JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのアロー関数をメソッドとして使う方法｜thisの挙動の違いを解説

アロー関数（ファットアロー関数）は、その名のとおりコードの行数を削減するのに役立つ機能です。構文「=>」が矢印（アロー）を表しており、「function」というキーワードを何度も書く手間を省くことができます。ただし、アロー関数は本来、メソッド以外の関数向けに設計されているため、メソッドとして使う場合には特有の挙動に注意が必要です。本記事では、アロー関数をメソッドとして使う方法と、その際の「this」の振る舞いについて詳しく解説します。

アロー関数をメソッドとして使う際の注意点

アロー関数には、通常の関数と大きく異なる特徴があります。それは「this」をレキシカルに束縛するという点です。つまり、アロー関数内の「this」は、呼び出し元のオブジェクトではなく、関数が定義されたスコープ（この場合はグローバルスコープ）を参照します。そのため、オブジェクト自身のプロパティにアクセスしたいメソッドには、従来のfunction式を使うのが適切です。

サンプルコード

以下のコードを実行すると、アロー関数と通常の関数をメソッドとして使った場合の出力の違いを確認できます。

<!DOCTYPE html>
<html>
   <body>
      <script>
         'use strict';
         var ob1 = {
            val1: 75,
            val2: 100,
            x: () => document.write(this.val1, this),

            y: function() {
               document.write("<br>"+this.val1, this);
            },

            z: function() {
               document.write("<br>"+this.val2, this);
            },
         }
         ob1.x();
         ob1.y();
         ob1.z();
      </script>
   </body>
</html>

実行結果の解説

上記のコードでは、x()はアロー関数として定義されているため、「this」はオブジェクトob1ではなくグローバルオブジェクト（window）を指します。その結果、this.val1はundefinedとなります。一方、y()とz()は通常のfunction式で定義されているため、「this」は呼び出し元のオブジェクトob1を正しく参照し、それぞれ「75」と「100」が出力されます。

このように、オブジェクトのメソッドとして関数を定義する場合は、アロー関数ではなくfunction式を使うことで、意図したとおりに「this」を扱うことができます。逆に、コールバック関数などで外側の「this」を維持したい場面では、アロー関数が非常に有効です。

  1. JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

    JavaScriptにおける名前付き引数とは？ Pythonなどの言語には「名前付き引数（キーワード引数）」という機能が標準で備わっていますが、JavaScriptにはこの機能が組み込まれていません。しかし、オブジェクトの分割代入（Destructuring）を活用することで、名前付き引数と同じ挙動を簡単に実現できます。 基本的な仕組み 関数の引数としてオブジェクトを1つ受け取り、その中から必要なプロパティを分割代入で取り出します。各プロパティにはデフォルト値も同時に指定できるため、引数が省略された場合でもエラーにならず安全に処理できます。 サンプルコード 以下は、オブジェクトを引数として渡し

  2. JavaScriptの簡潔なアロー関数の書き方と実装例

    簡潔なアロー関数とは JavaScriptにおける簡潔な（コンサイス）アロー関数の構文は、次のようになります。 (param1, param2) => param1 + param2 この形式には function キーワードがなく、波括弧 {} で囲まれた関数本体もありません。パラメータと関数本体の間に => を置くだけで成立します。 さらに、パラメータが1つだけの場合は、丸括弧を省略して次のように書くこともできます。 param1 => param1 * 2 主な特徴 functionキーワード不要： 通常の関数宣言よりも短く記述できます。 暗黙のリターン： =>