在onlick期间如何让“this”引用Class而不是html按钮？

Question

我在JavaScript中制作了一个Stopwatch课程，当用户点击“开始秒表”按钮时，应该开始秒表。

我的问题是当用户点击“开始秒表”按钮时，“此”正在引用按钮而不是秒表对象。

有什么建议吗？

这是一个例子： 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()绑定处理程序，并在 event-data 中设置对象。

$('.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设置为您想要的对象：

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

您还可以使用ES5提供的bind，各种图书馆和shims。