如果不止一次使用，我应该在 jQuery 中缓存 $(this) 吗？答案

【问题标题】：Should I cache $(this) in jQuery if it is used more than once?如果不止一次使用，我应该在 jQuery 中缓存 $(this) 吗？
【发布时间】：2011-09-29 02:00:12
【问题描述】：

我知道如果您多次使用选择器，您应该缓存它的结果。一个例子是：

var $selected = $('.some-selected-element');

process($selected);
doStuff($selected);

但是，如果多次使用缓存$(this)，它有什么性能优势吗？

$('.some-selector').hover(function () {
    if (!$(this).hasClass('some-other-class')) {
        $(this).addClass('another-class');
    }
    process($(this));
}

【问题讨论】：

是的，你应该调用一个函数并多次返回结果

标签： jquery performance jquery-selectors

【解决方案1】：

是的，性能有所提高，因为它可以防止 jQuery 解释您的选择器。

这是选择器的解释，以及您将绕过的内容。 https://github.com/jquery/jquery/blob/master/src/core.js#L78-188

本质上，这部分

if ( selector.nodeType ) {
    this.context = this[0] = selector;
    this.length = 1;
    return this;
}

【讨论】：

【解决方案2】：

是的，有性能优势。

缓存$(this) 的结果可避免多次调用$() 函数以及创建多个引用同一元素的不同jQuery 对象。

【讨论】：

【解决方案3】：

$() 函数查找元素的 DOM 节点，并将原型方法应用于定义时尚未添加它们的浏览器（IE 浏览器）。所以不断地调用它就会执行这个操作。将 $() 函数调用的输出缓存到变量中会更好地提高性能和可读性。

【讨论】：

jQuery 不会向元素添加原型方法。您对扩展元素对象的 MooTools（或其他 js 库）感到困惑。 jQuery 在这个意义上保持元素不变，而是使用 jQuery 对象处理。

【解决方案4】：

jsperf.com 是一个很好的资源 - 也是我最近经常光顾的资源 - 用于评估 JavaScript 性能。例如，以下测试评估缓存的 jQuery 元素与非缓存的性能：

http://jsperf.com/jquery-cache-vs-no-cache

结果与此线程中的答案相呼应。

【讨论】：