AngularでのsetTimeout使用時のfunctionとラムダ式の違い

Question

Angularの仕様なのかTypeScriptの仕様なのかわかりませんが、以下の結果が出ました。

  www = 0;
  abc(){
    console.log(this.www);  //0を出力
    setTimeout(function() {
      console.log(this.www);//undefinedを出力
    },100);

    setTimeout(()=>{
      console.log(this.www);//0を出力
    },100);
  }

https://stackoverflow.com/questions/41106125/angular-2-using-this-inside-settimeout
こちらに同じ質問があるのですが、翻訳して読んでもよくわかりませんでした。

"function"と"()=>"の違いは何でしょうか？

Answer 1

Angularの仕様なのかTypeScriptの仕様なのかわかりませんが、以下の結果が出ました。

これはJavascript(ES6)の仕様で,アロー関数と言います。
普通の無名関数は新たにスコープを作っているため、関数内では新たなthisが生成されるのに対し、アロー関数内ではthisは新たに生成されず、親のthisを継承する。

詳しくはこちらをどうぞ。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

Comments

[kuniatsu]

よくわかりました。ありがとうございました。