Typoskript "this" innerhalb einer Methode der Klasse

Ich weiß, dies ist wahrscheinlich schmerzhaft basic, aber ich bin eine harte Zeit Verpackung meinen Kopf um ihn herum.

class Main
{
     constructor()
     {
         requestAnimationFrame(this.update);  //fine    
     }

     update(): void
     {
         requestAnimationFrame(this.update);  //error, because this is window
     }

}

Scheint es der Fall zu sein, dass ich einen proxy benötigen, also sagen wir, dass die Verwendung von Jquery

class Main
{
     constructor()
     {
         this.updateProxy = $.proxy(this.update, this);
         requestAnimationFrame(this.updateProxy);  //fine    
     }

     updateProxy: () => void
     update(): void
     {
         requestAnimationFrame(this.updateProxy);  //fine
     }

}

Aber aus einer Actionscript-3-hintergrund, ich bin nicht wirklich sicher, was hier passiert. Sorry, ich bin nicht sicher, wo Javascript beginnt und Typoskript endet.

updateProxy: () => void

Und ich bin auch nicht überzeugt, ich mache das richtige. Das Letzte was ich will ist die meisten meiner Klasse haben ein eine () - Funktion muss aufgerufen werden, mit aProxy() wie ich finde, Schreibe ich die gleiche Sache zweimal? Ist es normal?

Ich fand diese Dokumentation sehr hilfreich github.com/Microsoft/TypeScript/wiki/...

InformationsquelleAutor Clark | 2013-04-22

95

Wenn Sie wollen this erfasst das Typoskript Weg dies zu tun ist über die Pfeil-Funktionen. Zitat Anders:

Den this im Pfeil-Funktionen ist lexikalisch Gültigkeitsbereich

Hier ist der Weg ich mag zu verwenden, dies zu meinem Vorteil zu nutzen:
```
class test{
    //Use arrow functions
    func1=(arg:string)=>{
            return arg+" yeah" + this.prop;
    }
    func2=(arg:number)=>{
            return arg+10 + this.prop;
    }       

    //some property on this
    prop = 10;      
}
```
Anzeigen dieser in der TypeScript Playground

Können Sie sehen, dass in den generierten JavaScript - this erfasst außerhalb der Aufruf der Funktion:
```
var _this = this;
this.prop = 10;
this.func1 = function (arg) {
    return arg + " yeah" + _this.prop;
};
```
also die this Wert innerhalb der Funktion Aufruf (die window) nicht verwendet werden.

Erfahren Sie mehr: "Verständnis this in Maschinenschrift" (4:05) – YouTube

Dies ist nicht notwendig. Was Sie ' re darauf hindeutet, ist idiomatic JavaScript, aber Typoskript macht dies überflüssig.
mit den Pfeiltasten Funktionen im Rahmen von Klassen-Membern nicht erlaubt war, vor dem TS 0.9.1 (und diese Antwort war vorher). Aktualisierte Antwort auf eine neue syntax ein 🙂
vielen Dank für die Bearbeitung, da die Antwort gewählt, die von der OP, ich war verwirrt.
SIE MÜSSEN DAS VIDEO ZU SEHEN - SEHR NÜTZLICH. NUR 5 MINUTEN
Danke, @basarat. Glühbirne ging für Kontext für das wie bald wie ich gesehen haben, verwenden Sie die Pfeil Funktion auf halbem Weg durch Ihr video. Ich Schätze Sie.

InformationsquelleAutor basarat
16

Wenn Sie schreiben, Ihre Methoden, wie diese, 'diese' behandelt werden, die Art und Weise, die Sie erwarten.
```
class Main
{
    constructor()
    {
        requestAnimationFrame(() => this.update());
    }

    update(): void
    {
        requestAnimationFrame(() => this.update());
    }
}
```
Eine andere option wäre, bind 'dieser' Aufruf der Funktion:
```
class Main
{
    constructor()
    {
        requestAnimationFrame(this.update.bind(this));
    }

    update(): void
    {
        requestAnimationFrame(this.update.bind(this));
    }
}
```
In meiner Erfahrung ist die update-Funktion ist besser wie folgt definiert: update = () => { ... }
Ich habe mit typescript eine Menge und wechselten hin und her, viele Male. im moment habe ich nur die geschweiften Klammern, wenn es mehr als eine einfache Methode. auch bei der Verwendung Typoskript + linq (die göttliche), das format ist schöner. Beispiel: Enumerable.Aus(arr).Where(o => o -.id == 123);
Ich denke, wenn man sich die javascript generiert wird, werden Sie einen großen Unterschied sehen. Es ist nicht eine Frage des Geschmacks. update = () => {} erstellen lexikalische scoping per "var _diese = diese" Zusammenstellung, Ihre syntax nicht.
Möglicherweise müssen Sie aktualisieren Sie Ihre Bibliothek Typoskript, weil es absolut nicht sind die "_diese" Kontext. Mit "() => code()" oder () => { return-code(); }" wird die Ausgabe 100% identisch ist javascript-code. Hier ist die Ausgabe: i.imgur.com/I5J12GE.png. Sie können auch sehen, für sich selbst durch einfügen den code in typescriptlang.org/Playground
offenbar bind () kann schlecht sein, denn es verliert geben Sicherheit auf die ursprüngliche Funktion args

InformationsquelleAutor joelnet
4

Das problem entsteht, wenn Sie übergeben eine Funktion als callback. Durch die Zeit der Rückruf hat ausgeführt, der Wert von "this" geändert haben könnte, um die Fenster, die Kontrolle aufrufen der callback, oder etwas anderes.

Stellen Sie sicher, dass Sie immer mit einem lambda-Ausdruck an der Stelle, übergeben Sie einen Verweis auf die aufzurufende Funktion zurück. Zum Beispiel
```
public addFile(file) {
  this.files.push(file);
}
//Not like this
someObject.doSomething(addFile);
//but instead, like this
someObject.doSomething( (file) => addFile(file) );
```
Dies stellt so etwas wie
```
this.addFile(file) {
  this.files.push(file);
}
var _this = this;
someObject.doSomething(_this.addFile);
```
Weil die addFile-Funktion aufgerufen wird, die auf ein bestimmtes Objekt-Referenz (_diese) wird es nicht das "dies" der invoker aber statt den Wert der _diese.

Wenn Sie sagen, was es kompiliert, denen man Sie zeigen? (Der Pfeil Instanz oder die, die gerade vergeht die Methode object?)
Die lambda. Erstellen Sie einfach einen TS mit code ein und schauen Sie, was es kompiliert.

InformationsquelleAutor Peter Morris
4

Siehe Seite 72 der typescript-Sprache-Spezifikation
https://github.com/Microsoft/TypeScript/blob/master/doc/TypeScript%20Language%20Specification.pdf?raw=true

Pfeil-Funktion Ausdrücken

Im Beispiel
```
class Messenger {
 message = "Hello World";
 start() {
 setTimeout(() => alert(this.message), 3000);
 }
};
var messenger = new Messenger();
messenger.start();
```
den Einsatz von einem Pfeil Funktion Ausdruck bewirkt, dass die callback zu haben
auch dieses, wie die Umgebung 'start' - Methode. Schreiben Sie die callback -
als standard-Funktion, Ausdruck es notwendig, manuell
vereinbaren Sie Zugang zu den umliegenden, zum Beispiel durch kopieren in
eine lokale variable:

Dies ist der eigentliche generierten Javascript:
```
class Messenger {
 message = "Hello World";
 start() {
 var _this = this;
 setTimeout(function() { alert(_this.message); }, 3000);
 }
};
```
Link ist gebrochen leider
Ich aktualisiert den link. Merkwürdigerweise ist das doc ist über ein Jahr alt und immer noch verwiesen wird, die von Ihrer homepage, aber die wichtigsten Inhalte habe ich in die Antwort.

InformationsquelleAutor Simon_Weaver

Kurz gesagt, das Schlüsselwort this immer eine Referenz auf das Objekt, das die Funktion aufgerufen wurde.

In Javascript, da Funktionen sind nur Variablen, Sie können übergeben Sie herum.

Beispiel:

var x = {
   localvar: 5, 
   test: function(){
      alert(this.localvar);
   }
};

x.test() //outputs 5

var y;
y.somemethod = x.test; //assign the function test from x to the 'property' somemethod on y
y.test();              //outputs undefined, this now points to y and y has no localvar

y.localvar = "super dooper string";
y.test();              //outputs super dooper string

Wenn Sie die folgenden Funktionen mit jQuery:

$.proxy(this.update, this);

Was Sie tun, ist die übergeordnete Kontext. Hinter den kulissen von jQuery wird guive Sie diese:

$.proxy = function(fnc, scope){
  return function(){
     return fnc.apply(scope);  //apply is a method on a function that calls that function with a given this value
  }
};

InformationsquelleAutor Kenneth

1

Sehr spät zur party, aber ich denke, es ist sehr wichtig für die künftigen Besucher dieser Frage Folgendes zu beachten:

Andere Antworten, einschließlich der akzeptiert, verpassen ein entscheidender Punkt:
```
myFunction() { ... }
```
und
```
myFunction = () => { ... }
```
sind nicht die gleiche Sache "mit der Ausnahme, dass letztere erfasst this".

Die erste syntax erstellt eine Methode, die auf den Prototyp, während die zweite syntax erstellt eine Eigenschaft auf das Objekt, dessen Wert ist eine Funktion (auch das kommt vor erfassen this). Man kann das sehen deutlich in der transpiled JavaScript.

Vollständig zu sein:
```
myFunction = function() { ... }
```
wäre das gleiche, als Sie die zweite syntax, aber ohne Aufnahme.

So, mit Hilfe der Pfeil-syntax in den meisten Fällen wird Ihr problem lösen der Bindung an den Gegenstand, aber es ist nicht das gleiche und es gibt viele Situationen, wo Sie wollen, um eine ordnungsgemäße Funktion des Prototyps statt einer Eigenschaft.

In diesen Fällen kann die Verwendung einer proxy-oder .bind() eigentlich ist die richtige Lösung. (Obwohl das leiden die Lesbarkeit zu verbessern.)

Mehr zu Lesen hier (und nicht in Erster Linie über TypeScript, aber die Prinzipien stehen):

https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1

https://ponyfoo.com/articles/binding-methods-to-class-instance-objects

InformationsquelleAutor Karim Ayachi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Pfeil-Funktion Ausdrücken