gpt4 book ai didi

javascript - 为什么我们不能将 document.querySelector 方法分配给另一个变量并使用它?

转载 作者:行者123 更新时间:2023-12-04 00:13:25 24 4
gpt4 key购买 nike

这个问题在这里已经有了答案:





Making a short alias for document.querySelectorAll

(10 个回答)


12 个月前关闭。




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

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

最佳答案

querySelector 要求它绑定(bind)到文档类的实例。它在内部对此进行检查。当分配给其所属类范围之外的变量时,它无法执行必要的逻辑来查询它应该属于的文档实例。
这可以通过将方法绑定(bind)到文档实例来强制执行:

const querySelector = document.querySelector.bind(document)
以上将绑定(bind)对 this 的引用从 querySelector 方法中在后续调用中引用文档实例,不管它此时是全局范围内的独立函数。
您可以在 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)

关于javascript - 为什么我们不能将 document.querySelector 方法分配给另一个变量并使用它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66381760/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com