Question

示例：

$("#footer-create-nav li").click(function () {
    var $this = $(this);
    $this.addClass('footer-create-active');
    $this.siblings().removeClass('footer-create-active');
    return false;
}

我的代码看起来很多：

$("#footer-create-nav li").click(function () {
    $(this).addClass('footer-create-active');
    $(this).siblings().removeClass('footer-create-active');
    return false;
}

Answer 1

避免多次重新创建jQuery对象是一种很好的做法。

this表示一个DOM对象，当传递给$或jQuery函数时，每次都会创建一个新的jQuery对象。在$this中缓存该对象一次或您喜欢的任何其他变量名称可以避免在每次$(this)调用时重新创建对象。此缓存的好处可能取决于您调用$(this)的次数，并且在大多数情况下可能无法察觉。

为了获得更好的主意，请测试yourselves。

Answer 2

你有另一种选择。 jQuery方法返回它们正在运行的对象。

$(this).addClass("example")

将返回$(this)。

的值

所以你可以把你的功能写成

$("#footer-create-nav li").click(function () {
    $(this).addClass('footer-create-active')
           .siblings().removeClass('footer-create-active');
    return false;
}

并且仅使用this而不使用其他变量。

另请参阅

问题：jQuery chaining: Can everything be chained? When can we not chain?

Answer 3

可能不是。从透视的角度来看，如果用户在一个页面上触发了该功能（通过单击）一千次，则加速可能平衡额外的20个字节的JS代码所产生的额外下载时间。

如果您在紧密循环中进行复杂的选择器查找，则缓存结果可能是值得的。但绝对不是这种情况。

Answer 4

我无法解释，但是这个jsperf似乎表明每次调用$(this)更好......

http://jsperf.com/jquery-this-vs-this-vs-chain

我多次访问$（this）时应该创建一个局部变量$ this吗？

4 个答案:

另请参阅