これは私が機能を矢印に新たなんだES6

Question

でネストされた矢印の機能で期待どおりに動作しないと、私はこのコードを使用することができますなぜ私は理解していない：

const adder = { 
    sum: 0, 
    add(numbers) { 
     numbers.forEach(n => { 
      this.sum += n; 
     }); 
    } 
}; 

adder.add([1,2,3]); 
// adder.sum === 6 

を...とそれだけで正常に動作し、しかし、次のような場合にはthisが正しくバインドされていません：MDNから

const adder = { 
    sum: 0, 
    add: (numbers) => { 
     numbers.forEach(n => { 
      this.sum += n; 
     }); 
    } 
}; 

adder.add([1,2,3]); 
// Cannot read property sum 

Answer 1

：

矢印関数式がshorteを持っていますRの関数式よりも構文と独自のこの、引数、スーパー、またはnew.targetを結合しない。（...）

矢印関数内thisがoutterを参照していることの意味は、ほとんどのthisがあります。ブラウザで実行した場合、thisはwindowオブジェクトです。

this.sumの代わりにadder.sumを使用してください。

Fiddle

Answer 2

アロー機能は、字句thisに到達することができます。コンテキストはadderではなく、adderで定義されています。そのように動作するように期待されている

：

function Foo() { 
    // this === foo; 
    this.sum = 0; 

    const adder = { 
     sum: 0, 
     add: (numbers) => { 
      numbers.forEach(n => { 
       // this === foo; 
       this.sum += n; 
      }); 
     } 
    }; 

    adder.add([1,2,3]); 
} 

const foo = new Foo; 

そして

const adder = { 
    sum: 0, 
    add(numbers) { ... } 
}; 

のでadd方法は、それがのように呼ばれていますadderthisとしてときがあります

const adder = { 
    sum: 0, 
    add: function (numbers) { ... } 
}; 

のショートカットですadder.add(...)。