ES6 Comment obtenir _this en classe, dans un autre contexte

Question

Je cherchais et je n'arrive pas à trouver un moyen de le comprendre de manière ES6.

class MyClass { 
    // i can't event decalre _this/_self here 
    constructor() { 
    setTimeout(function(){ 
     // other work.. 
     hiUser(); // this.hiUser() or //_this.hiUser() not working 
    },1000); 
    } 
    hiUser(){ 
    alert('Hi'); 
    } 
} 

Answer 1

Vous pouvez utiliser fat arrow functions:

class MyClass { 
    constructor() { 
    setTimeout(() => { 
     this.hiUser(); 
    }, 1000); 
    } 

    hiUser(){ 
    alert('Hi'); 
    } 
} 

Ou vous pouvez utiliser simple ES5's Function.prototype.bind method:

class MyClass { 
    constructor() { 
    setTimeout(function() { 
     this.hiUser(); 
    }.bind(this), 1000); 
    } 

    hiUser(){ 
    alert('Hi'); 
    } 
} 

---

Il existe une méthode ES7 proposal to shorthand the Function.prototype.bind, donc, selon la transpiler (ex. Babel ou Typescript) que vous utilisez (éventuellement), vous pouvez définir les indicateurs ES7 et utiliser aujourd'hui:

class MyClass { 
    constructor() { 
    setTimeout(::function() { 
     this.hiUser(); 
    }, 1000); 
    } 

    hiUser(){ 
    alert('Hi'); 
    } 
} 

Answer 2

setTimeout pourrait avoir son propre contexte this. Vous pouvez définir _self dans le constructeur si, ou utiliser des fonctions de direction:

class MyClass { 
    constructor() { 
     var self = this; 
     // etc. 
    } 
} 

Answer 3

Les réponses précédentes ne vous a donné des exemples de code sur la façon de le corriger; Permettez-moi de vous expliquer votre problème et pourquoi il se passe

Dans votre exemple de code, la fonction à l'intérieur de votre setTimeout est lié à la valeur this du setTimeout (qui est généralement window ou undefined en mode strict).

setTimeout(function() { 
    // this === window 
}, 1000); 

---

En ES6, ils ont introduit des expressions lambda (fonctions de direction) qui sont "liés lexicalement" - ce qui signifie qu'ils empruntent la valeur this de leur champ extérieur. Dans votre cas, c'est la classe/l'objet.

Afin de tirer parti de la expression lambda s, il ressemblerait à ceci:

class Foo { 

    constructor() { 
     setTimeout(() => this.myMethod(), 1000); 
    } 

    myMethod() { 
     console.log('foo'); 
    } 
} 

---

Si vous utilisez Babel transpile votre code, et utilisez les fonctionnalités expérimentales, vous pouvez utiliser La syntaxe de l'ES7 vous permet également de résoudre votre problème avec la syntaxe.

Si vous liez une fonction/méthode, elle crée une copie de cette fonction et lie la valeur this à celle que vous choisissez. Cela vous permettra d'utiliser l'instruction function qui sera liée à votre classe/objet.

<context to be bound> :: <function to receive context>

class Foo { 

    constructor() { 
     setTimeout(this::function() { 
      this.myMethod(); 
     }, 1000); 
    } 

    myMethod() { 
     console.log('foo'); 
    } 
} 

Une version encore plus courte ressemblerait à quelque chose comme ce qui suit

constructor() { 
    setTimeout(this::this.myMethod, 1000); 
} 

Si vous rencontrez toujours des problèmes de compréhension, je vous suggère de lire plus sur les classes de ES6 et javascript contraignant .