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 テーブルとデータベースでデータを分割する方法

推薦する

el-select のスタイルを変更する方法の詳細な説明: popper-append-to-body と popper-class

elementUI が提供する el-select コンポーネントのスタイルを変更する方法この問題...

Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法

MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...

...

ウェブデザインの達人がよく使うレスポンシブフレームワークを共有する(要約)

この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

JSタイマーを使用して要素を移動する

JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...

mysql-5.7.21-winx64 無料インストール版のインストール - Windows チュートリアル詳細説明

1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...

入力ファイルの制御と美化について

一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...

ネットワークセグメント内の IP アドレスに対する Nginx の接続制限設定の詳細な説明

Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...

Windows 10 での Hyperledger Fabric 1.4 環境構築プロセスの図

内容Hyperledger fabric1.4環境のWindows 10でのセットアップ前提条件Wi...

innerHTML アプリケーション

ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...

MySQL分離の使用手順を読む

現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...

MySQL の時間保持問題に関する簡単な分析

MySQL のデフォルトの時間タイプ (datetime と timestamp) の精度は秒です。...

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...

MySQLは間違ったパスワードを入力する試行回数を制御します

1. 本番環境でMySQLのデッドロックを監視し、デッドロックの可能性を減らす方法まず、デッドロック...