Zugriff auf das 'This' -Objekt des aktuellen Elements, wenn ein externes 'This' bind war

Question

Ich weiß nicht, ob der Titel der Frage zu verwirrend ist, aber hier gehe ich.

Wenn habe ich so etwas wie:

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); 
} 

Mein Verständnis ist, dass beim Drucken ‚dieses‘ in myFunction würde es den Ausführungskontext der Funktion drucken, die den Anruf gemacht, in diesem Fall, es wird Drucken Sie den Ausführungskontext für .on ('ändern' ...). Wenn also this.foo gedruckt wird, weil es in diesem Kontext nicht existiert, dann wird undefined ausgedruckt.

Um dieses Problem zu lösen und this.foo zugreifen zu können, ich tue das folgende:

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

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

Ich Bindung 'diese' zum Funktionsaufruf, so this.foo würde ausgedruckt werden, das ist in Ordnung, aber meine Frage ist, in diesem Fall wie bekomme ich auch Zugriff auf den Ausführungskontext für .on ('ändern' ...) ??? Bedeutung, wie kann ich auf die "diese" zugreifen, auf die ich ursprünglich vor dem Binden zugegriffen hatte?

Danke

Answer 1

Anstatt zu binden, verwenden Sie einfach eine Referenzvariable. Es wird den Zusammenhang zu halten und immer noch ermöglicht es Ihnen, mit den .on ‚s Kontext zu verwenden 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

Eine gebundene Funktion der this wird immer auf den gleichen Wert gebunden. Das bedeutet, dass Sie nicht mehr auf den ursprünglichen Wert zugreifen können. Wenn Sie beide this es verwenden möchten, müssen Sie eins als this und das andere als Argument verwenden. Oder beides als Argumente.

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);

Btw, arrow functions ES6 die Umwelt halten sie in definiert sind, was bedeutet, dass this zu Ihrem Testobjekt zeigen würde.

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