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);