jQuery $（this）与变量

Question

鉴于：

var element = $('#element');

我想知道哪个更快：

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

要么：

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

或者重要吗？

Answer 1

使用element 。

如果element是一个匹配单个元素的jQuery集合，例如$( someId ) ，那么就使用它。

如果选择器要匹配多个元素，那么element实际上是elements ， 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实际上会包装这个元素，所以你并没有真正运行任何类型的查询两次。

顺便说一句 ，在某些情况下，这确实有所不同（例如，委托时）。

Answer 5

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

Answer 6

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

Answer 7

这会更快：

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

这将是最快的：

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

1. 元素被缓存（并且没有改变，我假设）
2. 直接使用bind（'click'）不要使用.click（）包装器
3. 如果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);