JavaScriptプロトタイプオブジェクトを使用する場合のイベントメソッドの "this"キーワード

Question

JavaScriptのプロトタイプクラスのメンバー変数にイベントハンドラでアクセスしようとしています。 "それ"（イベントハンドラの場合は[これのコピー]）。言うまでもなく、私はいくつかの問題に遭遇しています。

テイク、例えば、このHTMLスニペット：

<a id="myLink" href="#">My Link</a> 

そして、このJavaScriptコード：

function MyClass() 
{ 
    this.field = "value" 
    this.link = document.getElementById("myLink"); 
    this.link.onclick = this.EventMethod; 
} 

MyClass.prototype.NormalMethod = function() 
{ 
    alert(this.field); 
} 

MyClass.prototype.EventMethod = function(e) 
{ 
    alert(this.field); 
} 

は、MyClassのオブジェクトをインスタンス化し、NormalMethodを呼び出すことは、私は（アラ​​ートが「言ってそれを期待するとまったく同じように動作しますこの "キーワードがイベントターゲット（anchor（）HTML要素）を参照するため、リンクをクリックすると結果は未定義の値になります。

私はプロトタイプのJavaScriptスタイルに新たなんだけど、過去に、閉鎖で、私は単にコンストラクタで「この」のコピーを作った：

var that = this; 

そして、私はメンバーにアクセスすることができました"that"オブジェクト経由のイベントメソッドの変数。プロトタイプコードでは動作しないようです。これを達成する別の方法がありますか？

ありがとうございました。

Answer 1

あなた"that=this"閉鎖イディオムはまだ適用されます。

function MyClass() 
{ 
    ... 

    var that = this; 
    this.link.onclick = function() { 
     return that.EventMethod.apply(that, arguments); 

     // that.EventMethod() works too here, however 
     // the above ensures that the function closure 
     // operates exactly as EventMethod itself does. 

    }; 
} 

Answer 2

あなたが必要

this.link.onclick = this.EventMethod.bind(this); 

Answer 3

試してみてください：

this.link.onclick = this.EventMethod.bind(this); 

... 'バインドは' プロトタイプの一部であり、 'this'が正しく設定された状態でメソッドを呼び出す関数を返します。

Answer 4

上記のように、Prototypeライブラリの一部であるbindを使用することは、この問題を解決するためのきれいな方法です。

https://stackoverflow.com/a/2025839/1180286