【ES2015入門】 3 アロー関数

アロー関数と無名関数の間には this の扱い方の違いがある。以下のコードを見ていただきたい。

function Foo() {
  document.getElementById("button_1").addEventListener("click", function() {
    console.log("anonymous: ", this);
  });
  
  document.getElementById("button_2").addEventListener("click", () => {
    console.log("arrow: ", this);
  });
};

let foo = new Foo();

f:id:kosumoro:20160807234350j:plain

双方の主張は以下の通りである。

無名関数の主張: addEventListenerdocument.getElementById("button_1") によって呼び出されているから、 this の値も document.getElementById("button_1") であるべき。

アロー関数の主張: そもそも document.getElementById("button_2").addEventListener の処理自体が Foo のコンテキストに書かれているのだから、 this の値は Foo であるべき。

ES2015に対応するつもりで無名関数を機械的にアロー関数に書き換えていると痛い目を見ることがあるかもしれない。