"this" dans les fonctions appartenant à un tableau

Question

J'ai une classe ES6 qui contient une méthode avec async.waterfall. Waterfall obtient un tableau de fonctions comme premier argument. Donc, je le fais de cette façon:

class RequestLog { 
    mainMethod() { 
     async.waterfall([ 
      this.method1, 
      this.method2, 
      this.method3 
     ]); 
    } 

    method1(cb) { 
     console.log(this); // outputs null 
     cb(); 
    } 
} 

Mais comme il est indiqué ci-dessus, en première fonction I nef this === null. Si c'était une fonction anon j'écrirais:

async.waterfall([ (cb) => { console.log(this) } ]); 

mais je veux avoir des méthodes séparées pour la clarté du code. Alors, comment puis-je passer this à la fonction nommée dans une classe?

Answer 1

Vous devez lier les méthodes à this. Voici quelques options:

Option 1 - les lient lorsque vous les utilisez:

mainMethod() { 
    async.waterfall([ 
     this.method1.bind(this), 
     this.method2.bind(this), 
     this.method3.bind(this) 
    ]); 
} 

Option 2 - les lier dans le constructeur:

class RequestLog { 
    constructor() { 
    this.method1 = this.method1.bind(this); 
    this.method2 = this.method2.bind(this); 
    this.method2 = this.method3.bind(this); 
    } 
    ... 
} 

Option 3 - Liez-les en utilisant proposal-class-fields, ce qui nécessite Class properties transform de Babel ou Stage 2 preset:

class RequestLog { 
    method1 = (cb) => { 
     console.log(this); // outputs null 
     cb(); 
    } 
} 

Option 4 - utiliser proposal-bind-operator, qui nécessite Function bind transform de babel:

mainMethod() { 
    async.waterfall([ 
     ::this.method1, 
     ::this.method2, 
     ::this.method3 
    ]); 
} 

Option 5 - les appeler d'une fonction de flèche:

mainMethod() { 
    async.waterfall([ 
     (cb) => this.method1(cb), 
     (cb) => this.method2(cb), 
     (cb) => this.method3(cb) 
    ]); 
}