[JavaScript] Arrow Function Test

JavaScript

window.status = "window";

// callback: normal function
var obj1 = {
  status: "obj1",
  func: function() {
    // this=window
    setTimeout(function(){alert(this.status);}, 1000);
  }
};
obj1.func(); // ⇒ "window"

// callback: arrow function
var obj2 = {
  status: "obj2",
  func: function() {
    // this=obj2
    setTimeout(()=>{alert(this.status);}, 1000);
  }
};
obj2.func(); // ⇒ "obj2"

アロー関数の特長：
obj > function > arrow function
という位置関係の時、arrow function 内の this は必ず obj を指します。つまり静的に決定されます。
コールバックが通常の function においては、this はコールバックを実行した主体（オブジェクト）を指します。つまり、動的に決定されますので、注意が必要です。

⇒ ソースデモはこちら