2015-09-15 5 views
24

Ich verwende den Code unten in NodeJSWie macht man `var self = this` in der es6 Klasse?

this.x = 'global x'; 
class Point { 
    constructor(x) { 
     this.x = x; 
    } 
    toString() { 
     return this.x; 
    } 
} 
var obj = new Point(1); 
obj.toString();// 1 as expected 
var a = obj.toString;// Here I can do something like var a = obj.toString.bind(obj); to get rid of the situation. But I am curious to know how can we write `var self = this`; 
a();// TypeError: Cannot read property 'x' of undefined 

a(); den Fehler wirft.
Wie können wir var self = this; wie wir in es5 tun, um eine solche Situation zu verhindern?

+0

Was versuchen Sie mit Ihrer ersten Zeile this.x = 'global x'; ? –

+0

@Roumelis Ich hatte erwartet, dass 'a()' im globalen Code läuft und 'toString()' gibt 'this.x' zurück, so dass' a() '' global x' zurückgibt. – intekhab

+0

Du fügst absichtlich x im Fenster hinzu dann? –

Antwort

15

Wie können wir var self = this; wie früher in ES5 tun?

Sie können es tun, genau wie Sie in ES5 tat - ES6 ist vollständig rückwärtskompatibel schließlich:

class Point { 
    constructor(x) { 
     this.x = x; 
     var self = this; 
     this.toString = function() { 
      return self.x; 
     }; 
    } 
} 

Allerdings, das ist wirklich nicht idiomatischen ES6 (nicht reden über const statt var). Sie würden eher einen Pfeil Funktion verwenden, die ein lexikalisch-scoped this hat, so dass Sie diese self Variable vollständig vermeiden kann:

class Point { 
    constructor(x) { 
     this.x = x; 
     this.toString =() => { 
      return this.x; 
     }; 
    } 
} 

(die auch zu this.toString =() => this.x; verkürzt werden könnte)

+0

wenn ich diesen Code 'this.toString = function() {return self.x; }; aus dem Konstruktor wie folgt toString() {return self.x; }; so wie wir das tun können, In diesem Fall ist self 'undefined' und wirf Fehler – intekhab

+0

@intekhab: Ja natürlich ist es -' self' ist eine Variable, die auf den Konstruktor beschränkt ist. Wie gesagt, es funktioniert genau wie in ES5. Die neue ES6 'class'-Syntax führt kaum etwas Neues ein, sondern die * Syntax *. – Bergi

11

Wenn Sie don‘ t wollen, dass alle Methoden, um Ihre Klasse in den Konstruktor erstellen, wie Bergi schlägt vor (was für mich hässlich scheint), dann können Sie enable ES7 features und definieren Sie Ihre Methode Pfeil Syntax:

class Point 
{ 
    constructor(x) 
    { 
     this.x = x; 
    } 

    toString =() => 
    { 
     return this.x; 
    } 
} 

Dies hat die gleiche bewirken, wie zu sagen:

constructor(x) 
{ 
    this.toString = this.toString.bind(this); 
} 

Aber es ist immer noch nicht möglich, den dynamischen dieses und die lexikalischen dieses (Selbst) in der gleichen Funktion zuzugreifen. Also das ist nicht eine vollständige Antwort.

Ich hoffe, jemand kann diese Antwort bearbeiten, um zu zeigen, wie wir auf beide Arten von diese in einer Klassenmethode zugreifen können, ohne jede Methode im Klassenkonstruktor zu definieren.

+3

Nun, dies erstellt immer noch alle Ihre Methoden innerhalb des Konstruktors (und ist genauso hässlich), nur es verwendet eine experimentelle Syntax dafür. – Bergi

Verwandte Themen