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

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

1. 矢印関数の使用

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

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

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

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

関数 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オブジェクトのメソッドが呼び出されても、メソッド内のthisobjを指すのではなく、 objが定義されているコンテキストのthisを指すことを示しています。

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

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

次のコードでは、通常の関数getNamethis.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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • より良い JavaScript 条件文と一致条件を書くためのヒント (要約)
  • JSの矢印関数におけるこのポイントの詳細な説明
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JS 矢印関数に適さないシナリオは何ですか?
  • JavaScript で矢印関数を使用できないシナリオはどれですか
  • JavaScript の条件付きアクセス属性と矢印関数の紹介

<<:  HTML の小さなタグの使用に関するヒント

>>:  MySQL テーブルとデータベースでデータを分割する方法

推薦する

vue3 タイムスタンプ変換 (フィルターを使用せずに)

vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、...

CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...

MySQLデータベーストリガーの詳細な説明

目次1 はじめに2 トリガーの紹介3 トリガーを作成する4 トリガーを表示5. トリガーの削除6 結...

ウェブページを作るときに知っておくべきいくつかのスキル

1. IE6 では z-index が無効です。 CSS では、階層を変更するために z-index...

ホバー生成の境界線によって生じる要素の移動を解決する方法

序文hover疑似クラスが要素に境界線を追加すると、要素内のコンテンツがずれることがあります。box...

自動開始および停止コマンドを適用するには、Docker サービスを再起動します (推奨)

Docker サービス アプリケーションを再起動するコマンドを見てみましょう。具体的な内容は次のと...

Js の継承とプロトタイプチェーンを理解するのに役立つ記事

目次継承とプロトタイプチェーン継承されたプロパティ継承されたメソッドJavaScript でのプロト...

MySQL の pid とソケットの詳細な説明

目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...

Linuxのpasswdコマンドの使用

1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...

MySQL で CURRENT_TIMESTAMP を使用する方法

目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...

Linux システムでログを手動でスクロールする方法

ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...

ウェブサイト構築経験概要

<br />注目を集めるウェブサイトを作成するには、どのような原則に従うべきでしょうか?...

最もよく使われるHTMLエスケープシーケンス

HTML では、<、>、& などは特別な意味を持ち (<、> はリン...

IIS web.config でクロスドメイン アクセスを設定する方法

要件: ページに画像を表示する必要がありますが、さまざまな理由により、画像はサーバー 2 にあります...

MySQL ジョイントインデックス(複合インデックス)の実装

共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...