12

イベントハンドラーでJavaScriptのプロトタイプクラスのメンバー変数にアクセスしようとしています。通常は「this」キーワードを使用します（イベントハンドラーの場合は「that」[これのコピー]）。 。言うまでもなく、私はいくつかの問題に直面しています。

たとえば、次の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の呼び出しは、期待どおりに機能します（ "value"と警告）が、 "this"キーワードがイベントターゲット（anchor（）HTML要素）を参照するようになったため、リンクをクリックすると未定義の値になります。 。

私はプロトタイプのJavaScriptスタイルに慣れていませんが、過去には、クロージャーを使用して、コンストラクターで「this」のコピーを作成しました。

var that = this;

そして、「that」オブジェクトを介してイベントメソッドのメンバー変数にアクセスできます。これはプロトタイプコードでは機能しないようです。これを達成する別の方法はありますか？

ありがとう。

4

4 に答える 4

13

必要なもの:

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

...'bind' は Prototype の一部であり、'this' が正しく設定されたメソッドを呼び出す関数を返します。

于 2009-09-02T17:20:12.023 に答える
9

あなたの"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.

    };
}
于 2009-09-02T17:18:25.413 に答える
5

試してみてください

this.link.onclick = this.EventMethod.bind(this);
于 2009-09-02T17:19:55.533 に答える
0

上で述べたように、Prototype ライブラリの一部である bind を使用することは、この問題を解決するクリーンな方法です。この質問は、別の SO の質問の複製です。ここでは、プロトタイプ ライブラリ全体を含めずにバインド メソッドを実装して回答します。

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

于 2013-10-25T13:33:41.133 に答える