アロー関数におけるThisの使い方

By /

JavaScriptのアロー関数におけるthisは、通常の関数におけるthisを違うものを指すことがあります。本記事では、便利なアロー関数におけるthisの使い方を見てみましょう。

アロー関数とは？

そもそもアロー関数とはなんでしょうか。アロー関数はJavaScriptで関数を簡潔に書くための記述方法です。（詳しくはこちら）通常の関数と比べて文法が短く、特にthisの振る舞いが大きく異なります。

通常の関数におけるthisの振る舞い

JavaScriptでは、thisの値は関数がどのように呼び出されるかによって変わります。これが時として混乱を招くことがあります。例えば、オブジェクトのメソッド内でタイマーを設定する場合、以下のような問題が生じることがあります。

const myObject = {
  value: 42,
  showValue: function() {
    setTimeout(function() {
      console.log(this.value);  // ここで`this`は`myObject`ではなく、`window`を指すため、undefinedになる
    }, 1000);
  }
};
myObject.showValue();

ここでは、this.valueで42という値を出力しようとしていますが、thisはwindowを指すため、this.valueも値が定義されていないことになってしまいます。

アロー関数での解決

アロー関数を使うと、thisが自動的に外のスコープ（アロー関数を包んでいる関数やコンテキスト）のthisと同じになります。つまり、アロー関数はその場所でのthisを「記憶」します。上の例をアロー関数を使って書き直すと、以下のようになります。

const myObject = {
  value: 42,
  showValue: function() {
    setTimeout(() => {
      console.log(this.value);  // アロー関数により、`this`は`myObject`を指し続ける
    }, 1000);
  }
};
myObject.showValue();

この場合、setTimeoutのコールバックで使われているアロー関数は、showValueが呼び出されたときのthis（ここではmyObject）を使用します。そのため、期待通り42が出力されます。

アロー関数は、thisが周囲のコンテキストから自動的に引き継がれるため、予期せぬthisの値に悩まされることが少なくなります。これにより、特にイベント処理や非同期処理のコードが読みやすく、理解しやすくなります。

上部へスクロール