外部 'this'がバインドされている場合、現在の要素の 'this'オブジェクトにアクセスします。

Question

質問のタイトルが混乱しているのはわかりませんが、ここに行きます。

私のようなものだ場合：

var Test = function(){ 
    this.foo = a; 
} 

Test.prototype.init = function() { 
    $(document).on('change', '.form-control', this.myFunction); 
} 

Test.prototype.myFunction = function() { 
    console.log(this.foo); 
    console.log(this); 
} 

私の理解では、印刷のMyFunctionの「この」をするとき、それがよ、この場合には、呼び出しを行った関数の実行コンテキストを印刷するだろうということですが.on（ 'change' ...）の実行コンテキストを出力します。したがって、this.fooがそのコンテキストに存在しないので、が定義されていないが印刷されます。

この問題を解決し、this.fooにアクセスするには、私がやっている以下：私は「この」関数呼び出しに、そのthis.foo結合してい

Test.prototype.init = function() { 
    $(document).on('change', '.form-control', (this.myFunction).bind(this)); 
} 

Test.prototype.myFunction = function() { 
    console.log(this.foo); 
    console.log(this); 
} 

をが印刷されますが、これは問題ありません。その場合、どうすれば.on（ 'change' ...）の実行コンテキストにもアクセスできますか？ ???意味、私は最初にバインディングの前にアクセスしていた 'this'にどうやってアクセスできますか？

ありがとうございました

Answer 1

参照変数を使用するだけです。これは、コンテキストを維持し、まだあなたがバインドされた機能のthisが常に同じ値にバインドされますthis

Test.prototype.init = function() { 

    var context = this; 

    $(document).on('change', '.form-control', function() { 
     context.myFunction(); 
     console.log(this); // `this` has context to the onchange 
    }); 
}; 

Answer 2

と.onのコンテキストを使用できるようになります。つまり、元の値にアクセスできなくなります。

thisの両方を使用する場合は、thisともう1つを引数として使用する必要があります。または両方を引数として使用します。

var Test = function(a) { 
 
    this.foo = a; 
 
    this.init(); 
 
} 
 

 
Test.prototype.init = function() { 
 
    // Set `this` to the calling test object, and window 
 
    // (which would be the original context in this case) 
 
    // as first parameter of `myFunction`. Swap the arguments 
 
    // if you wish to use them the other way around. 
 
    window.setTimeout(this.myFunction.bind(this, window), 500); 
 
}; 
 

 
Test.prototype.myFunction = function(that) { 
 
    console.log(this.foo); 
 
    console.log(that.foo); 
 
}; 
 

 
new Test(5);

ところで、ES6 arrow functionsはthisは、テストオブジェクトを指すということを意味し、それらはで定義されている環境を維持します。

Test.prototype.init = function() { 
    window.setTimeout(() => this.myFunction(window), 500); 
};