为什么我们不能将 document.querySelector 方法分配给另一个变量并使用它？ [复制]

Question

正如我们所知，我们可以将一个函数/方法分配给另一个变量，并使用分配的变量随时执行它。

const logger = {
  log: (text) => {
    console.log(text);
  },
};

const log = logger.log;
logger.log("Log test");
log("Log test 2");

但是为什么我们不能将document.querySelector 分配给变量并使用它。 querySelector 也是document 对象的一个​​方法。

    console.log( typeof document.querySelector ) // function

const myDocument = document.querySelector;
myDocument("body");  // Uncaught TypeError: Illegal invocation

Answer 1

querySelector 要求它绑定到文档类的实例。它在内部对此进行检查。当分配给其所属类范围之外的变量时，它无法执行必要的逻辑来查询它应该属于的文档实例。

这可以通过将方法绑定到文档实例来强制：

const querySelector = document.querySelector.bind(document)

以上内容将在 querySelector 方法中绑定对 this 的引用，以便在后续调用中引用文档实例，而不管此时它是全局范围内的独立函数。

您可以在 logger 类中看到类似的“this”范围丢失，如下所示：

const logger = {
  log: function() {
    console.log(this.toString());
  },
};

const log = logger.log;
logger.log(); // [object Object] (the logger object)
log(); // [object Window] (the global object)

Answer 2

这样试试：

const myDocument = document.querySelector.bind(document);
myDocument("body");