Third-Party-Bibliothek ist bindende Rückrufe, aber ich muss auf Klasseneigenschaften zugreifen

Question

Ich habe mehrere Fragen über die Verwendung von "this" in Klassen und Funktionen gesehen, aber ich glaube nicht, dass ich gesehen habe, wonach ich suche besonders.

Meine Situation ist:

Ich bin eine Funktion von einem Drittanbieter-Bibliothek in einer Klassenmethode aufrufen. Die Bibliotheksfunktion von Drittanbietern ruft jedoch callback.bind (this) auf, und ich muss Zugriff auf den Kontext haben, der es bindet.

Aber ich möchte auch auf Klasseneigenschaften zugreifen können. Ist das möglich? Wenn nicht, was ist eine mögliche Problemumgehung? Code Umriss sieht ungefähr so ​​aus:

class MyClass { 
    myProperty = 'something'; 

    myMethod() { 
    console.log(this.myProperty); 
    } 

    otherMethod() { 
    thirdPartyLibrary.functionRequiringCallback(function() { 
     this.MyMethod(); //undefined 
     this.requiredThirdPartyFunction(); //"this" refers to thirdPartyLibrary 
    }); 
    } 
} 

Ich könnte sicherlich die Callback-Funktion eines Pfeils, so dass „die“ bezieht sich auf den Klasse-Umfang, aber dann werde ich keinen Zugriff auf „requiredThirdPartyFunction“.

Jede Hilfe wäre willkommen.

Answer 1

Wenn Sie einen Verweis auf Ihre Instanz this möchten, können Sie immer die alte that = this Zuordnung verwenden. Sie weisen einer Variablen im Bereich this zu (normalerweise that), und Sie können es dann in dem Rückruf verweisen.

otherMethod() { 
    const that = this; // set a reference to the instance this 

    thirdPartyLibrary.functionRequiringCallback(function() { 
    that.MyMethod(); // that refers to your class instance this 
    this.requiredThirdPartyFunction(); //"this" refers to thirdPartyLibrary 
    }); 
} 

Eine weitere Option ist myMethod zu binden, durch einen Pfeil Funktion oder Funktion # binden, und anschließend die gebundene Methode einer Variablen zuweisen:

class MyClass { 
    myProperty = 'something'; 

    myMethod =() => console.log(this.myProperty); 

    otherMethod() { 
    const myMethod = this.myMethod; // assign the bound method to a variable 

    thirdPartyLibrary.functionRequiringCallback(function() { 
     MyMethod(); // will be invoked with original this 
     this.requiredThirdPartyFunction(); //"this" refers to thirdPartyLibrary 
    }); 
    } 
} 

Answer 2

Es gibt nicht so viele Möglichkeiten. Da es nur eine this ist, kann es entweder lexikalisch sein:

otherMethod() { 
    thirdPartyLibrary.functionRequiringCallback(() => { 
     this.MyMethod(); 
     thirdPartyLibrary.requiredThirdPartyFunction(); 
    }); 
    } 

oder dynamisch:

otherMethod() { 
    const _this = this; 
    thirdPartyLibrary.functionRequiringCallback(function() { 
     _this.MyMethod(); 
     this.requiredThirdPartyFunction(); 
    }); 
    } 

Die erste Option ist besser lesbar und ist wahrscheinlich eine bessere Wahl, da es aus dem Code nicht offensichtlich ist, über diesem this === thirdPartyLibrary innerhalb Rückruf.