javascript - 在回调中使用对 dom 元素的引用而不是检索它更好吗？

Question

我不确定如何简洁地表达这个问题，所以如果以前有人问过(而且我确定有人问过)，这就是我找不到答案的原因。

如果我在 Javascript/jQuery 中有类似下面的代码:

$('#my-clicky-thing').click(function() {
    if ( document.getElementById('my-checkbox').checked ){
        // whatever
    }
}

...这样做会更明智/更有效吗:

var myCheckbox = document.getElementById('my-checkbox');
$('#my-clicky-thing').click(function() {
    if ( myCheckbox.checked ){
        // whatever
    }
}

在我看来，后一种方法效率更高。我假设对复选框的引用在创建时绑定(bind)到点击回调函数，因此使用复选框引用比必须调用 getElementById 来获取它更快。

我只是用这个作为一个简单的例子。我没有接受过任何正式的 Javascript 培训，但在实践中，我通常总是采用引用方法。我只是从未停下来思考这样做是否有任何缺点或陷阱。

Answer 1

The latter approach seems to me like it would be more efficient.

这取决于您所说的“高效”是什么意思。例如，它的内存效率较低。但除非你有数百万个，否则内存影响不太可能重要。

I'm assuming that a reference to the checkbox is bound to the click callback function when it is created...

是的，是的，因为回调是对该变量存在的上下文的闭包。

... so using the checkbox reference would be faster than having to call getElementById to fetch it.

无穷小，是的。 getElementById 的速度非常，因为浏览器通过元素的 ID 保留了元素的索引，因此查找非常、非常、非常快。

更复杂的 DOM 查询会更慢，但是 click 与时间无关，所以它不太可能有影响。与发生很多 的事件(如mousemove)相关的慢速查询会主张缓存引用；否则，这真的无关紧要，是保留引用还是查找引用的决定可能最好由其他因素驱动，例如元素是否可能消失，闭包是否会被优化掉(例如，没有其他内容)，诸如此类。