为什么我们不能将document.querySelector方法分配给另一个变量并使用它?
正如我们所知,我们可以将一个函数/方法分配给另一个变量,并随时使用分配的变量执行它。
const logger = {
log: (text) => {
console.log(text);
},
};
const log = logger.log;
logger.log("Log test");
log("Log test 2");
回答
querySelector 要求它绑定到文档类的实例。它在内部对此进行检查。当分配给它所属类范围之外的变量时,它无法执行查询它应该属于的文档实例的必要逻辑。
这可以通过将方法绑定到文档实例来强制执行:
const querySelector = document.querySelector.bind(document)
const querySelector = document.querySelector.bind(document)
以上将this在 querySelector 方法中绑定对from 的引用,以在后续调用中引用文档实例,而不管此时它是全局范围内的独立函数。
您可以在记录器类中看到类似的“this”范围丢失,如下所示:
THE END
二维码