使用$（this）与将选择器缓存到变量有什么性能上的好处？

Question

Is $(this) the same as caching a selector? Does $(this) search the DOM everytime?

For example:

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

    //OR

    var selector = $('#selector');

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

}

Answer 1

Defining $(this) doesn't require a DOM search, but it does create a new object in memory. In your example, the difference in performance might be negligible, but it's still good practice to use one object instead of creating three identical ones. I often see var $this = $(this) -- adding that one line saves both memory and typing, and it's clear to anyone reading your code what $this is.

Answer 2

In this context

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

'this' is a local variable which refers to the DOM element. So to answer your questions, this is not doing a 'dom'query every single time. You are however calling $(this) several times, which is passing the 'this' DOM element to the jquery constructor and giving you a jquery object. A more optimal way to do this would be as follows:

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

The second method

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

would be a little more expensive, since $("#selector") would end up doing a DOM query.