jQuery“$（this）”：重复使用效率高吗？

Question

正在使用$（this）重复有效，还是将它保存到变量中更好？我已经看到它在很多jQuery代码中重复使用，但由于它是对构造函数的调用，我认为它应该不必要地慢，我错了吗？

Answer 1

只是为了好玩 - 一种测量。要查看差异，您需要拨打$(this)数万次（取决于CPU）。

的电话不同的是大致100与70毫秒$(this)是较慢的一个。

var testCount = 100000; 
 

 
$('div').each(function(){ 
 
    var self = $(this); 
 
    
 
    // Measurement using $(this) selector 
 
    var t1 = new Date(); 
 
    for (var i = 1; i <= testCount; i++){ 
 
    \t var nil = $(this).attr('id'); 
 
    } 
 
    console.log('T1', (new Date()) - t1); 
 
    
 
    // Measurement using saved declaration 
 
    var t2 = new Date(); 
 
    for (var i = 1; i <= testCount; i++){ 
 
    \t var nil = self.attr('id'); 
 
    } 
 
    console.log('T2', (new Date()) - t2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
</div>

就个人而言，我还是用保存声明var self = $(this)，因为它始终是一个好习惯，写更优化的代码，因为由于不同的上下文（在其他的答案中描述了一些可能的混乱也）。

Answer 2

$(this)会将this引用的DOM元素带入jQuery object。所以如果经常使用，它会一遍又一遍地完成。当然，使用varibale，一旦声明进程中的效果就不那么有效了。

由于$()是jQuery的构造函数调用，每次使用$(this)时，都会生成一个新实例并重新执行该任务。让我们来看看jQuery的来源：

jQuery = function(selector, context) { 
    return new jQuery.fn.init(selector, context); 
}; 

还有你看，一个新的实例将与new创建。幸运的是，jQuery并没有这么做，因为this已经是一个DOM元素，几乎可以使用了。

重复使用字符串选择器时，情况会变得更糟，例如$('.my-element')。在那里你应该明确地使用一个变量，因为jQuery必须在每个构造上做很多事情。我不是说$(this)是非常缓慢的。对于一个/两个动作，你不需要一个变量。但它永远不会像一次那样快！

Answer 3

只有当你使用$(this)让我们说10倍的情况下的回调，它可以合理地做一些像

$('.my-elem').on('click', function() { 
    var $this = $(this); 
    $this.doSomething(); 
}); 

不用说：介意范围！这会给你种种问题：

var $this = $(this); 

$('.my-elem').on('click', function() { 
    $this.doSomething(); 
}); 

$('.other-elem').on('click', function() { 
    $this.doSomething(); 
}); 

但是不要太担心它。你永远不会注意到速度的差异，也许如果你在一个循环运行数千次的时候使用它......但是，尽管优化代码总是很好的。