0

長年のC++/ C＃開発者である私は、JSコードの多くを「クラス」に移動して、関数とデータをグループ化しています。ただし、これらのクラスはイベントを処理するため、適切なこのコンテキストを提供するために、呼び出しをクラスメソッドにルーティングするためだけに機能する「スタブ」ハンドラーを作成する必要があることに気付きました。だから私はこのようなことをしています：

var Manager = {
    foo: 'x',
    bar: 1,

    onClickStub: function(evt) {
        // 'this' refers to HTMLElement event source
        Manager.onClick(evt);
    },

    onClick: function(evt) {
        // 'this' now refers to Manager.
        // real work goes here.
    }
}

これは通常の方法ですか、それともクラスの編成を維持しながらイベントハンドラーを構造化するためのより良い方法がありますか？

4

2 に答える 2

1

ジョセフ・シルバーが上記のコメントで言ったように、私bindはこの場合完璧だと思います。古いブラウザをサポートする必要がある場合は、いつでもシムを追加できます（ MDNドキュメントFunction.prototype.bindの実装例を参照してください）。次に、コードは次のようになります。

var Manager = {
    var foo: 'x',
    var bar: 1,

    // no more stub!

    onClick: function(evt) {
        // 'this' will refer to Manager.
        // real work goes here.
    }
}

// And when you bind the event handler:
var el = document.getElementById('something');
el.addEventListener('click', Manager.onClick.bind(Manager));
于 2013-01-29T20:17:19.673 に答える
0

これを行うために私が知っている最善の方法はthis、クラスの最上位にある別の変数に割り当ててから、クラス全体でその変数を参照することです。ただし、もちろん、これは、クラスとして匿名オブジェクトを使用していない場合にのみ機能します。

例えば：

var Manager = function(){
    var self = this,
    var foo = 'x',
    var bar = 1;

    var onClick = function(evt) {

        console.log(self); // refers to the manager
        console.log(this); // refers to the element the onclick is assigned to

       // If you want this to equal the manager then just do: this = self;
    }
}() // edit: to make this an immediate function

以下のコメントに応じて、次のようにonclickを添付できます

element.onclick = Manager.onClick;

この場合、thisonclick関数の変数は実際にはhtml要素であり、self変数はManager関数です。

于 2013-01-29T20:01:08.590 に答える