为什么document.querySelectorAll要bind(document)

前言

阮一峰老师提到的jquery-free中

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

为什么要bind document对象?

如下的使用会报错

const select = document.querySelectorAll;
select('div');

原因：this指向

自己的错误理解

我简单的认为，可以替换成这样

const select = document.querySelectorAll;
select('div');
// 等价于
const select = document.querySelectorAll;
window.select('div');
// 等价于
window.document.querySelectorAll('div');

但是这个写法是不会报错的

window.document.querySelectorAll('div');

那么问题在哪呢

正解

原来是我在上面不停等价转换的时候出了问题

看一个例子

var a = {
    b: function test() {
        console.log(this);
    }
};
var c = a.b;
c();// 结果：this 指向 window
console.log(c);// c 就是 test函数

所以是window调用了c，故this指向window

回头看看最初的问题

const select = document.querySelectorAll;
// document 就是 a对象
// querySelectorAll 就是 test函数
// select 就是 c变量
select('div');

这样调用就是在window下掉用了querySelectorAll

而在window对象下是找不到各个标签的

结论

const $ = document.querySelectorAll;
$('div');

这样写相当于在window对象下，查找标签，是找不到的