ES6クラスPromiseチェーン - アクセス 'this'

Question

私は2番目の約束でクラスプロパティを参照したいと思います。しかし、クラス関数pTwoでは、 'this'は未定義です。私は約束の範囲にいることを理解しています。私はどのようにPromiseChainインスタンスのスコープにアクセスできますか？

ES6と本来の約束を使用しています。

class PromiseChain { 
 
    constructor(){ 
 
     this.food = 'Pasta'; 
 
     this.type = 'Italian'; 
 
    } 
 

 
    pOne() { 
 
     console.log('pOne'); 
 
     return Promise.resolve(); 
 
    } 
 

 
    pTwo() { 
 
     console.log('pTwo'); 
 
     try { 
 
      console.log(this.food); 
 
     } catch (e) { 
 
      // can't read 'food' of undefined! 
 
      console.log(e); 
 
     } 
 
     return Promise.reject() 
 
    } 
 

 
    work() { 
 
     console.log('Get to work!'); 
 
     this.pOne().then(this.pTwo).catch((error) => { 
 
      console.log(error); 
 
     }) 
 
    } 
 
} 
 

 
new PromiseChain().work();

Answer 1

これは簡単です、あなたはJavaScriptで私たちがbind()方法でこれを行うことができ、正しいスコープにpTwoの通話をバインドする必要があります。

したがって：

this.pOne().then(this.pTwo.bind(this)).catch((error) => { 

は、その結果、正しい範囲にpTwoにお電話をバインドします：印刷する

Get to work! 
pOne 
pTwo 
Pasta 
undefined 

。最後の未定義で何かが返されるようにするには、rejectパラメータでメッセージを渡します。

.bind(this)のロットを使用してコードベースを混乱させたくない場合は、現在のスコープで参照を明示的にthisに設定し、これをパラメータとして各約束事に渡すことができます。今pTwoは今pTwoの内側に、我々は次の操作を行うことができ、thatの引数を受け入れ

work() { 
    var that = this; 
    console.log('Get to work!'); 
    this.pOne().then(this.pTwo(that).catch((error) => { 
     console.log(error); 
    })); 
} 

注：workメソッドの宣言では、あなたのケースでは、我々はパラメータを渡す

pTwo(parentScope) { 
    console.log('pTwo'); 
    try { 
     console.log(parentScope.food); 
    } catch (e) { 
     // can't read 'food' of undefined! 
     console.log(e); 
    } 
    return Promise.reject() 
} 

お知らせparentScope正しい範囲を参照することができます。