[JS] js aliase DOM API

[david2tdw]

document.querySelectorAll()的别名写法：

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

问题： 为什么要bind(document)?

分析： 以下代码可执行：

window.document.querySelector('div')

但是以下代码却报错：

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

看下面这个例子：

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

a.b(); // b函数
var c= a.b;
console.log(c); // 打印c对象
c(); // 打印this对象，this 指向 window, 想当与window.b();

再看最初的问题：

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

想当于在window下调用querySelector()方法。所以会报错。

window.querySelector();

结论： 在使用别名的时候会导致函数的this指向发生变化，需要重新绑定到相应的对象上。

为什么document.querySelectorAll要bind(document)

Making a short alias for document.querySelectorAll