如何在onlick過程中使用「this」來引用Class而不是HTML按鈕？

Question

我在JavaScript中製作了一個Stopwatch類，當用戶點擊「開始秒錶」按鈕時，秒錶應該啓動。

我的問題是，當用戶點擊「開始秒錶」按鈕時，「this」引用按鈕而不是秒錶對象。

有什麼建議嗎？

下面是一個例子： https://c9.io/rjfreund/stopwatch/workspace/stopwatch.html

Answer 1

由於您使用jQuery的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

...使用.bind()或.on()到處理程序綁定，並設置對象的事件 - 數據。

$('.yourElement').on("click", {obj: yourObject}, function(event) { 
    alert(event.data.obj); 
}); 

Answer 2

這是一個沒有代碼，我能做的最好的：

<a id="start_stopwatch" onclick="yourStopwatchClass.start.call(yourStopwatchClass)">Start stopwatch!</a> 

call指的this變量，無論你傳遞，在這種情況下，你Stopwatch類。

Answer 3

函數的值this由函數的調用方式決定。爲監聽器，如果被分配這樣的：

element.onclick = instance.method; 

那麼它將通過該處理程序被調用或多或少作爲元素的方法，並設置其this到的元素。使用其他方法（addEventListener和各種庫方案）附加偵聽器可以做同樣的事情。

您可以使用call或apply，但你也可以換行功能，並調用它來設置this到你想要的對象：這是由ES5提供

element.onclick = funciotn() {insance.method()}; 

您還可以使用bind，各種圖書館和shims。