javascript - onlick中にhtmlボタンではなくクラスを参照するように「this」を取得するにはどうすればよいですか？

Question

JavaScriptでストップウォッチクラスを作成しました。ユーザーが「ストップウォッチの開始」ボタンをクリックすると、ストップウォッチが開始されます。

私の問題は、ユーザーが「ストップウォッチの開始」ボタンをクリックすると、「これ」がストップウォッチオブジェクトではなくボタンを参照していることです。

助言がありますか？

score 3 · Accepted Answer

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

score 0 · Accepted Answer

これは、コードなしでできる最善の方法です。

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

call変数は、this渡したもの、この場合はStopwatchクラスを参照します。

score 0 · Accepted Answer

関数の値は、関数のthis呼び出し方法によって設定されます。リスナーの場合、次のように割り当てられている場合:

element.onclick = instance.method;

次に、多かれ少なかれ要素のメソッドとしてハンドラーによって呼び出され、要素に設定thisされます。他の方法 (addEventListenerおよびさまざまなライブラリスキーム) を使用してリスナーをアタッチすると、同じことが行われます。

callまたはを使用できapplyますが、関数をラップして呼び出してthis、必要なオブジェクトに設定することもできます。

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

bindES5 が提供する、さまざまなライブラリ、および shims を使用することもできます。

3 に答える 3