javascript - Javascriptクロージャと「これ」

Question

作成したオブジェクトに問題があり、次のようになります。

var myObject = {

    AddChildRowEvents: function(row, p2) {
        if(document.attachEvent) {
            row.attachEvent('onclick', function(){this.DoSomething();});
        } else {
            row.addEventListener('click', function(){this.DoSomething();}, false);
        }
    },

    DoSomething: function() {
        this.SomethingElse(); //<-- Error here, object 'this' does not support this method.
    }
}

問題は、「DoSomething」関数内にいるときに、「this」が「myObject」を参照していないことです。何が間違っているのでしょうか。

Answer 1

関数が呼び出されるとき、「これ」は行を指します。オブジェクトが必要な場合は、次のように実行できます。]

AddChildRowEvents: function(row, p2) {
    var theObj = this;
    if(document.attachEvent) {
         row.attachEvent('onclick', function(){theObj.DoSomething();});
    } else {
         row.addEventListener('click', function(){theObj.DoSomething();}, false);
    }
},

関数が呼び出されると、関数が定義されたときにスコープ内にあった変数theOBjにアクセスできます。

Answer 2

thisは常に内部関数を参照します。ネストされた関数がある場合は、別の変数を作成してそれを指す必要がありますthis。

var myObject = {
    AddChildRowEvents: function(row, p2) {
        var that = this;
        if(document.attachEvent) {
            row.attachEvent('onclick', function(){that.DoSomething();});
        } else {
            row.addEventListener('click', function(){that.DoSomething();}, false);
        }
    }
}

Answer 3

これは、クロージャに関する一般的な問題です。それを解決するには、次のようにしてみてください。

var myObject = {    
    AddChildRowEvents: function(row, p2) { 
        var self = this;

        if(document.attachEvent) {            
             row.attachEvent('onclick', function(){this.DoSomething(self);});        
        } else {            
             row.addEventListener('click', function(){this.DoSomething(self);}, false);        
        }    
    },    

    DoSomething: function(self) {       
        self.SomethingElse(); 
    }
}