javascript - 为什么我不能调用对存储在变量中的 document.getElementById 的引用？

Question

当我在工作时，我会编写一些 JS 的小片段来探索适当的语言，而不是使用任何框架。但是，由于我很懒，我将通过将其存储在变量中来保留对 document.getElementById 的引用:

var grab = document.getElementById;
var foo = grab('some_id');
var bar = grab('some_other_id');

这在 IE7/8 中一直有效，但我在 Firefox 上尝试了它，但它不喜欢这个快捷方式。现在，当我将它包装在一个函数中并关闭参数时，它就可以工作了:

var grab = function (some_id) {  
    return document.getElementById(some_id);  
};

但我不明白为什么我需要这样做；在 Firefox 中，我可以抛出对用户定义函数的引用，它不会提示:

var foo = function(x) {
    alert(x);
};
var bar = foo;
foo('foo'); // alerts 'foo'
bar('bar'); // alerts 'bar'

为什么我不能调用对存储在变量中的 document.getElementById 的引用？

Answer 1

这是关于这个的值。我在 jsFiddle http://jsfiddle.net/pomeh/mPRZR/ 上创建了一个测试用例向您展示问题。

当你执行 var foo = document.getElementById("..."); 时，函数内部 this 的值就是 document对象。

当你执行 var grab = document.getElementById; var foo = grab("..."); 您正在全局上下文 中执行getElementById。在这种情况下，函数内部 this 的值是全局对象，而不是 document 对象。

我希望这对您来说很清楚 :) 查看示例和记录的值。