jquery - 使用 $(this) vs 将选择器缓存到变量是否有任何性能优势？

Question

$(this) 和缓存选择器一样吗？$(this) 是否每次都搜索 DOM？

例如：

$('#selector').on('click', function() {
    $(this).method();
    $(this).method1();
    $(this).method2();

    //OR

    var selector = $('#selector');

    selector.method();
    selector.method1();
    selector.method2();

}

Answer 1

定义$(this)不需要 DOM 搜索，但它确实在内存中创建了一个新对象。在您的示例中，性能差异可能可以忽略不计，但使用一个对象而不是创建三个相同的对象仍然是一种好习惯。我经常看到var $this = $(this)——添加一行可以节省内存和打字，任何阅读你的代码的人都清楚这$this是什么。

Answer 2

在这种情况下

$('#selector').on('click', function() {
  $(this).method();
  $(this).method1();
  $(this).method2();
});

'this' 是一个引用 DOM 元素的局部变量。因此，要回答您的问题，这并不是每次都进行“dom”查询。但是，您多次调用 $(this)，这会将“this”DOM 元素传递给 jquery 构造函数并为您提供一个 jquery 对象。一个更优化的方法如下：

$('#selector').on('click', function() {
  var $this = $(this);
  $this.method();
  $this.method1();
  $this.method2();
});

第二种方法

$('#selector').on('click', function() {
  var selector = $("#selector");
  selector.method();
  selector.method1();
  selector.method2();
});

会贵一点，因为 $("#selector") 最终会执行 DOM 查询。