Question

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

Answer 1

$(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 2

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

100,000 电话的差异大约为100与70毫秒，而$(this)的速度较慢。

＆＃13;

var testCount = 100000;

$('div').each(function(){
  var self = $(this);
  
  // Measurement using $(this) selector
  var t1 = new Date();
  for (var i = 1; i <= testCount; i++){
  	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++){
  	var nil = self.attr('id');
  }
  console.log('T2', (new Date()) - t2);
});

＆＃13;

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

＆＃13;

就个人而言，我仍然使用已保存的声明var self = $(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();
});

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

jQuery＆＃34; $（this）＆＃34;：重复使用效率如何？

3 个答案: