JavaScriptのアロー関数の特徴と通常の関数との違い

1. 矢印関数の使用

ES6 では、矢印=>を使用して関数式を定義する新しい方法が追加されました。多くの場合、矢印関数によって作成された関数と関数式の間に違いはなく、唯一の違いはそれらの記述方法です。

この記事の後半では、アロー関数と通常の関数の機能上の違いについて紹介します。

1. 通常関数から矢印関数へ

以下に示すように、関数を定義するには、 functionキーワードを使用できます。関数は 2 つのパラメーターaとbを受け取り、 aとbの合計を返します。

関数 getSum(a, b) {
    a + b を返します。
}

この関数を定義するために矢印関数を使用する場合は、 functionキーワードを省略し、矢印=>を使用して関数を定義して、次のように記述できます。

定数 getSum = (a, b) => {
    a + b を返します。
};

2. 中括弧を省略してリターンする

矢印関数を定義し、関数本体にreturnステートメントのみがある場合は、中括弧{}を省略してreturnことができます。

以下に示すように、矢印関数の完全な定義は次のとおりです。

定数 getSum = (a, b) => {
    a + b を返します。
};

この矢印関数の本体にはreturnステートメントのみがあります。中括弧{}とreturnを省略した後の簡略化された表記は次のようになります。

定数 getSum = (a, b) => a + b;

3. 括弧を省略する

定義された矢印関数にパラメータが 1 つしかない場合は、括弧を省略できます。

以下に示すように、定義された矢印関数には 1 つのパラメーターのみがあり、完全に記述されています。

定数関数 = (a) => {
    a + 2 を返します。
};

パラメータを囲む括弧は省略されており、次のコードは上記のコードと同等です。

定数関数 = a => a + 2;

注: 関数にパラメータがない場合、または複数のパラメータがある場合は、括弧を使用する必要があります。

2. アロー関数と通常の関数の違い

ほとんどの場合、矢印関数はより簡潔であるため、通常の関数を使用できる場所であればどこでも使用できます。

しかし、場合によっては、矢印関数は通常の関数とは大きく異なります。

1. 矢印関数の this は親スコープの this である

次のコードは、通常の関数として定義されたメソッドgetThisを持つオブジェクトobjを定義し、ここでthis出力します。 obj.getThis()を呼び出すと、 objオブジェクトが出力されます。これは、メソッド内のthisオブジェクトobjを指していることを意味します。

定数オブジェクト = {
    名前: 'ジャック',
    getThis() {
        console.log(これを);
    },
};
obj.getThis(); // {name: 'Jack', getThis: ƒ}

同様に、オブジェクトobjが定義されていますが、その中のメソッドは矢印関数で定義されています。ブラウザでobj.getThis()が呼び出されると、 Windowが出力されます。これは、 objオブジェクトのメソッドが呼び出されても、メソッド内のthisはobjを指すのではなく、 objが定義されているコンテキストのthisを指すことを示しています。

定数オブジェクト = {
    名前: 'ジャック',
    getThis: () => {
        console.log(これを);
    },
};
obj.getThis(); // ウィンドウ

2. call、apply、bindは矢印関数のthisを変更できない

次のコードでは、通常の関数getNameがthis.nameを出力し、関数内のthis callを通じてobjにバインドし、 getNameを呼び出してobjの属性nameを出力します。

定数オブジェクト = {
    名前: 'ジャック',
};

関数 getName() {
    コンソールにログ出力します。
}
getName.call(obj); // ジャック

関数が矢印関数に変更されると、 call機能しなくなり、関数内のthis objにバインドできず、 undefined出力されます。

定数オブジェクト = {
    名前: 'ジャック',
};

定数 getName = () => {
    コンソールにログ出力します。
};
getName.call(obj); // 未定義

3. コンストラクタとして使用できない

矢印関数はコンストラクターとして使用できません。矢印関数をコンストラクターとして使用すると、次のコードに示すようにエラーが報告されます。

定数Person = () => {
    this.name = 'ジャック';
};
const usr = new Person(); // Personはコンストラクタではありません

4. 議論はしない

通常の関数内では、 argumentsを使用して、配列のようなオブジェクトである渡されたパラメータを取得できます。

関数func() {
    console.log(引数);
}
func(1, 2, 3); // [引数] { '0': 1, '1': 2, '2': 3 }

ただし、矢印関数ではargumentsオブジェクトを使用できず、入力パラメータを取得できません。

ブラウザでは、矢印関数でargumentsオブジェクトを使用すると、エラーが報告されます。

定数関数 = () => {
    // ブラウザ環境 console.log(arguments); // 引数が定義されていません
};
関数(1, 2, 3);

ただし、矢印関数は、入力パラメータをパラメータ内の...argsの形式で取得することができ、取得されたargsは配列です。

定数関数 = (...引数) => {
    console.log(引数); // [ 1, 2, 3 ]
};
関数(1, 2, 3);

5. 矢印関数はnew.targetをサポートしていない

通常の関数定義のコンストラクター内では、インスタンスを構築するコンストラクターを返すためにnew.targetがサポートされています。

関数Person() {
    this.name = 'ジャック';
    コンソールにログ出力します。
}
// コンストラクタを指します new Person(); // [関数: Person]

矢印関数では、 new.targetはサポートされていません。ブラウザ環境では、 new.targetを使用する矢印関数はnew.target expression is not allowed here 。

定数Person = () => {
    this.name = 'ジャック';
    コンソールにログ出力します。
}
// ブラウザ環境 new Person(); // ここでは new.target 式は許可されません

この記事の参考文献:
上級 JavaScript プログラミング (第 4 版)

以上で、JavaScript のアロー関数の特徴と通常の関数との違いについての説明は終了です。js アロー関数と通常の関数についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: