Question

假设：

var element = $('#element');

我想知道哪个更快：

element.click(function(){
    element.dosomething()
)}

或者：

element.click(function(){
    $(this).dosomething()
)}

或者重要吗？

Answer 1

使用element。

如果element是与单个元素匹配的jQuery集合，例如$( someId )，则只需使用它。

如果选择器要匹配多个元素，那么element实际上是elements元素的集合，因此，在这种情况下，您在单击处理程序中使用$(this)抓住实际点击的那个。

以下示例解释了差异：

1-单个元素处理程序

var table = $("#myTable");
table.click(function() {
    // Same as $(this), except $(this) creates another
    //  wrapper on the same object (which isn't too expensive anyway)
    table.doSomething();
});

2-多个元素的处理程序

var rows = $("#myTable > tbody > tr");
rows.click(function() {
    // Here we have to use $(this) to affect ONLY the clicked row
    $(this).doSomething();
});

3-处理单个元素，但需要多个子元素

var table = $("#myTable");
// "on" and "live" call handler for only child elements matching selector
// (Even child elements that didn't exist when we added the handler, 
     as long as parent -table in this case- exists)
table.on("click", "tbody > tr", function() {
    // Here we have to use $(this) to affect ONLY the clicked row
    $(this).doSomething();
});

我发现它确保（并且工作量较少，但差别很小）仅仅是现有的包装器，表明在这种情况下我期待单个元素，而我只是在使用它。当我处理匹配元素集合的元素时使用$(this)。

Answer 2

速度可能是相同的，但使用$（this）要好得多，因为你不必担心元素被重新分配给其他东西（或元素的值完全丢失）。

此外，如果您为类而不是特定元素重构和使用选择器，该函数将适用于所有匹配的元素，而不仅仅是那个元素。

Answer 3

第一个更快。第二个运行相同的选择器两次。也就是说，一旦使用第一种方法，你只会使用该代码，这可能不是你想要的大部分时间。

在实践中，使用如下模式：

$('stuff').click(function(){
    var $$ = $(this); 
    $$.dosomething();
    $$.dosomethingelse();
)}

也就是说，除非您只使用一次选择器，否则首先将其分配给变量。

Answer 4

jQuery有它独特的dom元素缓存（已经被jquery触摸过一次）所以实际上在大多数情况下这不会产生真正的区别。

我真的不相信这是你的情况，但jquery实际上会包装这个元素，所以你并没有真正运行任何类型的查询两次。

BTW ，在某些情况下，这确实有所不同（例如委托时）。

Answer 5

我更喜欢第二种。如果您想重构该函数并将其重新用于另一个按钮，那么它将更具可移植性。

Answer 6

当$（this）导致函数调用时，你的第一个例子理论上更快，但可能不是很多。

Answer 7

这会更快：

element.click(function(){
    element.dosomething();
)}

这将是最快的：

element.bind('click', element.dosomething);

元素被缓存（并且没有改变，我假设）
直接使用bind（'click'）不要使用.click（）wrapper
如果element.dosomething是您要调用的函数，则直接传递它而无需额外调用

我假设element.dosomething()是正确的，element也不会改变。

以下是工作代码示例：http://jsfiddle.net/xhS3b/

//<a href="#" id="element">click me</a>

var element = $('#element');
element.dosomething = function () {
    alert('did something');   
    return false;
}
element.bind('click', element.dosomething);

jQuery $（this）与变量

7 个答案: