javascript - 如果 JavaScript 有一流的函数，为什么在变量中调用这个函数不起作用？

Question

JavaScript 据称具有一流的功能，因此以下内容似乎应该有效:

var f = document.getElementById;
var x = f('x');

但它在所有浏览器上都会失败，每个浏览器上都会出现不同的神秘错误消息。 Safari 显示“输入错误”。 Chrome 提示“非法调用”。 Firefox 显示“无法转换 JavaScript 参数”。

为什么？

Answer 1

当您在 Javascript 中调用 obj.method() 时，该方法将作为 this 传递给 obj。调用 document.getElementById('x') 并将 this 设置为 document。

但是，如果您只是编写 f = document.getElementById，您现在就有了该函数的新引用，但该引用不再“绑定(bind)”到 文档.

因此您的代码不起作用，因为当您将 f 作为裸函数名称调用时，它最终会绑定(bind)到全局对象(window)。一旦函数的内部尝试使用 this，它就会发现它现在有一个 window 而不是 document，毫不奇怪，它没有'不喜欢。

如果你这么调用它，你可以让f工作:

var x = f.call(document, 'x');

调用 f 但显式将上下文设置为 document。

解决此问题的其他方法是使用 ES5 及更高版本中可用的 Function.bind():

var f = document.getElementById.bind(document);

并且实际上只是创建您自己的正确设置上下文的包装器的通用快捷方式:

function f(id) {
    return document.getElementById(id);
}