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查询。

将$（this）vs缓存选择器用于变量是否有任何性能优势？

2 个答案: