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

大概是this值。我在jsFiddle http://jsfiddle.net/pomeh/mPRZR/上创建了一个测试用例来向您展示问题。

执行var foo = document.getElementById("...");时，函数内的this值为document对象。

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

我希望你能清楚:)查看示例和记录的值。

Answer 2

这有效：

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

因此，您使用bind函数方法显式设置grab函数的上下文。

现场演示： http://jsfiddle.net/E2tvB/

（注意：您需要填充bind以实现跨浏览器兼容性。）

Answer 3

我通常用它来缩短我的代码。到目前为止，我从来没有发现我的方法有任何问题。

var grab=function (x){return document.getElementById(x);};

grab("par").textContent="This is textContent of paragraph AFTER changed by javascript";

<html>
<body>
<p id="par">This is textContent of paragraph BEFORE changed by javascript</p>
</body>
</html>