使用jQuery $（this）和ES6箭頭函數（詞法綁定）

Question

使用ES6箭頭函數與詞法this綁定非常好。

不過，我遇到了一個問題，剛纔使用它具有典型的jQuery的點擊綁定：

class Game { 
    foo() { 
    self = this; 
    this._pads.on('click', function() { 
     if (self.go) { $(this).addClass('active'); } 
    }); 
    } 
} 

用箭頭函數：

class Game { 
    foo() { 
    this._pads.on('click',() => { 
     if (this.go) { $(this).addClass('active'); } 
    }); 
    } 
} 

然後$(this)被轉換到ES5 （self = this）類型閉包。

是否讓Traceur忽略「$（this）」來進行詞法綁定？

Answer 1

這跟Traceur沒什麼關係，也沒有關係，這就是ES6的工作原理。這是您使用=>而不是function() { }所要求的特定功能。

如果你想編寫ES6，你需要一直編寫ES6，你不能在某些代碼行上進出它，並且你肯定不能抑制或改變=>的工作方式。即使你可以，你也只會得到一些離奇的JavaScript版本，只有你自己明白，並且在你定製的Traceur之外無法正常工作，這絕對不是Traceur的要點。

解決這種特殊問題的方法是不使用this來獲取點擊的元素，而是使用event.currentTarget：

Class Game { 
    foo(){ 
    this._pads.on('click', (event) => { 
     if(this.go) { 
     $(event.currentTarget).addClass('active'); 
     } 
    }); 
    } 
} 

jQuery提供event.currentTarget特別是因爲，即使ES6之前，它並不總是可能的jQuery強加給回調函數this（即，如果它是通過bind綁定到另一個上下文。

Answer 2

事件綁定

$button.on('click', (e) => { 
    var $this = $(e.currentTarget); 
    // ... deal with $this 
}); 

環

Array.prototype.forEach.call($items, (el, index, obj) => { 
    var $this = $(el); 
    // ... deal with $this 
}); 

Answer 3

（這是一個答案，我寫了這個問題的另一個版本，學習它是這個問題的副本之前。我認爲這個答案能夠將信息清楚地整合在一起，所以我決定把它作爲一個社區維基添加進來，儘管它基本上只是其他答案的不同表述。）

你不能。這是箭頭函數的一半，他們關閉了this，而不是通過它們被稱爲的方式來設置它們自己的。對於這個問題中的用例，如果你想在調用處理函數時由jQuery設置this，則處理函數需要是function函數。

但是，如果你有使用箭頭（也許你想使用this什麼意思箭頭外）的理由，你可以使用e.currentTarget而不是this如果你喜歡：

class Game { 
    foo(){ 
    this._pads.on('click', e => {     // Note the `e` argument 
     if(this.go) { 
     $(e.currentTarget).addClass('active');  // Using it 
     } 
    }); 
    } 
} 

的currentTarget事件對象與jQuery設置this時調用處理程序時相同。

Answer 4

另一種情況

最常見的答案是正確的，我已經投了票。

然而，還有另一種情況：

$('jquery-selector').each(() => { 
    $(this).click(); 
}) 

可以固定爲：

$('jquery-selector').each((index, element) => { 
    $(element).click(); 
})