document.querySelectorAll赋给其它变量时, 为什么要.bind(document)?

Question

http://www.ruanyifeng.com/blo...
阮一峰的博客提到$的替代方法:

　var $ = document.querySelectorAll.bind(document);

让我比较在意的是最后那个bind
按理说querySelectorAll是作为document的方法调用的, 执行上下文已经是document了啊, 为什么还要再bind一次呢?

比如: 执行如下代码:

var select = document.querySelectorAll; 
select('span'); 

会报错

VM2761:1 Uncaught TypeError: Illegal invocation(…)

而

select.call(document, 'span'); 

就会得出正确结果了.
求解!~

Answer 1

这个问题其实和querySelectorAll没什么关系。
document是类的一个实例，而querySelectorAll是原型链上的方法。
类比到普通的类和原型方法就很好理解了吧。

通过实例来运行原型链上的方法时，解释器会自动将this指向那个实例
但是直接这样var select = document.querySelectorAll;，你的变量仅仅是指向了原型链上的那个函数，而没有绑定this指针，所以你才需要在外面手动绑定一下指针。

Answer 2

因为document.querySelectorAll是通过document这个对象去调用querySelectorAll的时候，函数的环境变量里this会指向document，假设querySelectorAll含有this的操作的话，那么this就会指代document。

而当你执行var select = document.querySelectorAll; 的时候，select所得到的是querySelector这个引用，但是此时如果直接通过select去调用的话，也就是select('span'); ，由于select（querySelectorAll）直接调用的话，this会自动指向window，所以就会出错。

bind的作用是，创建一个新函数，称为绑定函数。当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数。
而这句话var $ = document.querySelectorAll.bind(document);的效果相当于下面的代码

var $ = function(document) {
    return function() {
        return document.querySelectorAll.call(document, arguments);
    }
}

Answer 3

你直接调用函数执行上下文是document，但是你把querySelectorAll方法赋值给一个变量，在调用就不再是document了，调用的时候，再调用这个函数和这个函数原来的所有者没有任何关系。-

$('id')
//不就是
window.$('id')

Answer 4

我的理解是this的指向问题。
querySelectorAll是document下的一个方法，
附值给select后，select已经是window下的一个属性，此时，this已经不再是document，而window下没有querySelectorAll方法，所以会报错；var select = document.querySelectorAll.bind(document)，能保证调用select（）时this永远指向document

Answer 5

var a = {b: function() {console.log(this);}}
var c = a.b;
c();

你在浏览器上运行下看看 这时候console出来的是a对象还是window对象