如何让"this“在onlick过程中引用一个类而不是html按钮？

Question

我在JavaScript中创建了一个秒表类，当用户单击"start 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>

...use .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设置为所需的对象：

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

您还可以使用ES5提供的bind、各种库和shims。