document.querySelector赋值给一个变量，为啥调用这个变量会报错？

Question

看到简化dom选取的一段操作如下

const $ = document.querySelector.bind(document)
// 以后就可以像JQ一样选取某个元素下的子元素了
$("#parent").querySelector(".son")

但是为何要使用bind来重新返回一个函数呢？为啥不能直接将document.querySelector赋值给$变量呢？我试了下会报错如下

const $ = document.querySelector
$("#parent").querySelector(".son")

大佬们，求教

Answer 1

重复的问题
参考 https://segmentfault.com/q/1010000006207891/a-1020000006208171

Answer 2

let foo = {
   bar: function() {
       console.log('This is: ', this);

       if (this !== foo) {
           throw new TypeError('Illegal invocation');
       }
   }
}

// 1. 直接调用
foo.bar();

// 2. 赋值给一个变量后调用
let fn1 = foo.bar;
fn1();

// 3. 赋值给一个变量同时 bind 后调用
let fn2 = foo.bar.bind(foo);
fn2();

看了这个例子你就应该明白了。

如果不清楚为啥会是这个结果，你应该恶补 this 上下文的相关知识了。