【JavaScript】アロー関数式と通常の関数の違い【thisに要注意】

今日は、ES6 で導入されたアロー関数と通常の関数（functionとかくやつ）の違いを紹介します。「アロー関数を使えば、すっきりと関数を記述できる！」というのは事実ですが、オブジェクトのメソッド内でのthisの取り扱いに注意する必要があるので、その辺りをまとめます。

アロー関数とは

まずはアロー関数の定義をさらっと確認しておきましょう。

1は、そのまんまですが、2、3についてはこれから紹介する例を見れば、その意味することがわかりやすいかと思います。

オブジェクトのメソッド内での”this”取り扱い時の注意（うまくいかない例）

まずは、アロー関数なしで、thisの取り扱いに注意しなければならない例を紹介します。

ポイントは「メソッドの呼び出し元のオブジェクトが何であるかを確認する」ことです。callAgeメソッドの、setTimeout関数に注目して下さい。

var profile = {
  name: "Keisuke",
  age: 33,
  callAge: function() {
    // 実行時の呼び出し元オブジェクトはprofileなのでthis.ageにアクセス可能;
    console.log(this.age); // 33

    setTimeout(function() {
      // setTimeout() 実行時の呼び出し元オブジェクトはグローバルオブジェクト
      console.log("歳は" + this.age); // 歳はundefined
    }, 1000);
  },
  callName: function() {
    // 実行時の呼び出し元オブジェクトはprofileなのでthis.nameにアクセス可能;
    console.log("私の名前は" + this.name); // 私の名前はKeisuke
  }
};

profile.callAge();
profile.callName();

アロー関数の導入以前は、以下のように”this”にアクセス

【方法1】”this” をbindする

setTimeout関数にcallAgeメソッドのthis、つまり profile を bind してあげると、うまくいきます。

var profile = {
  name: "Keisuke",
  age: 33,
  callAge: function() {
    setTimeout(
      function() {
        // callAgeメソッドのthis、つまり profile を bind してあげる
        console.log("歳は" + this.age); // 歳は33
      }.bind(this),
      1000
    );
  },
  callName: function() {
    console.log("私の名前は" + this.name); // 私の名前はKeisuke
  }
};

profile.callAge();
profile.callName();

setTimeoutに、アロー関数を使用します

ここでアロー関数の出番です。setTimeoutに通常の関数ではなく、代わりにアロー関数を使用します。アロー関数はthisを束縛しない（アロー関数自身はthisを持たない）ので、setTimeout関数を取り囲むcallAge関数のthis、つまりprofileが入ります。

var profile = {
  name: "Keisuke",
  age: 33,
  callAge: function() {
    setTimeout(() => {
      // アロー関数を使うことにより、callAgeメソッドの”this”、つまり”this”はちゃんとprofileオブジェクトを参照する
      console.log("歳は" + this.age); // 歳は33
    }, 1000);
  },
  callName: function() {
    console.log("私の名前は" + this.name); // Keisuke
  }
};

profile.callAge();
profile.callName();