1

イベントハンドラー関数をJavascriptオブジェクトの一部として使用したいと思います。イベントハンドラー内の「this」は、通常、イベントが発生したオブジェクトに自動的に割り当てられるため、イベントハンドラー内の「this」をメソッドであるオブジェクトにバインドしたいと思います。

これは、バインディングが発生するオブジェクトのinit関数（tryoutの場合はjsfiddle）を使用して実行できます。

var myObject = {
    init:function(){
        this.downHandler = this.downHandler.bind(this);
    },
    downHandler:function(){
        alert(this.someInfo);
    },
    someInfo:"hi there"
}      
myObject.init();

これを避けたい：他の場所で再定義すると、コードの保守性が低下します。だから私は、メソッド自体でバインドのプロセスを維持するソリューションを探しています。

すでに関数の即時実行を試みましたが、即時実行の時点で、「this」は「window」オブジェクトを指しています（ブラウザーコンテキストを想定）。私の試験は次のようになります。

var myObject = {
//more code
    downHandler:(function(){
        alert(this.someInfo);
    }).bind(this), //does not work since at the point of immediate execution, the this is assigned to window
//more code
}

別のinit関数ではなく、イベント処理関数でバインディングを維持する方法を考えられますか？

4

3 に答える 3

2

すでにjQueryがロードされているので、使用jQuery.proxy

var myObject = {
    downHandler: $.proxy(function(){
       alert(this.someInfo);
    }, this)
};

Underscoreがインストールされている場合(これは、このようなものに適しています)、使用します。_.bind

var myObject = {
    downHandler: _.bind(function(){
       alert(this.someInfo);
    }, this
};

MooTools にも似たようなものがあるかもしれません。

于 2012-11-17T16:19:29.273 に答える
0

アラート中は、「this」の代わりにオブジェクト名「myObject」を使用してください。

var myObject = {
    downHandler:(function(){
        alert(myObject.someInfo);
    }).bind(this), 
  //when 'this' use it alert undefined
  //when 'myObject' use it alert "hi there"
   someInfo:"hi there" 
}

これがお役に立てば幸いです。

于 2012-11-17T16:50:36.353 に答える
0 
var myObject = {
    clickHandler: function() {
        alert(myObject.someInfo); 
        //returns undefined without execution of init-function
        //returns "hi there" if init ran. 
    },
    someInfo: "hi there"
}

$('#clickMe').on('click', myObject.clickHandler);
于 2012-11-17T16:21:08.997 に答える