1. 矢印関数の使用ES6 では、矢印 この記事の後半では、アロー関数と通常の関数の機能上の違いについて紹介します。 1. 通常関数から矢印関数へ以下に示すように、関数を定義するには、 関数 getSum(a, b) { a + b を返します。 } この関数を定義するために矢印関数を使用する場合は、 定数 getSum = (a, b) => { a + b を返します。 }; 2. 中括弧を省略してリターンする矢印関数を定義し、関数本体に 以下に示すように、矢印関数の完全な定義は次のとおりです。 定数 getSum = (a, b) => { a + b を返します。 }; この矢印関数の本体には 定数 getSum = (a, b) => a + b; 3. 括弧を省略する定義された矢印関数にパラメータが 1 つしかない場合は、括弧を省略できます。 以下に示すように、定義された矢印関数には 1 つのパラメーターのみがあり、完全に記述されています。 定数関数 = (a) => { a + 2 を返します。 }; パラメータを囲む括弧は省略されており、次のコードは上記のコードと同等です。 定数関数 = a => a + 2; 注: 関数にパラメータがない場合、または複数のパラメータがある場合は、括弧を使用する必要があります。 2. アロー関数と通常の関数の違いほとんどの場合、矢印関数はより簡潔であるため、通常の関数を使用できる場所であればどこでも使用できます。 しかし、場合によっては、矢印関数は通常の関数とは大きく異なります。 1. 矢印関数の this は親スコープの this である次のコードは、通常の関数として定義されたメソッド 定数オブジェクト = { 名前: 'ジャック', getThis() { console.log(これを); }, }; obj.getThis(); // {name: 'Jack', getThis: ƒ} 同様に、オブジェクト 定数オブジェクト = { 名前: 'ジャック', getThis: () => { console.log(これを); }, }; obj.getThis(); // ウィンドウ 2. call、apply、bindは矢印関数のthisを変更できない次のコードでは、通常の関数 定数オブジェクト = { 名前: 'ジャック', }; 関数 getName() { コンソールにログ出力します。 } getName.call(obj); // ジャック 関数が矢印関数に変更されると、 定数オブジェクト = { 名前: 'ジャック', }; 定数 getName = () => { コンソールにログ出力します。 }; getName.call(obj); // 未定義 3. コンストラクタとして使用できない矢印関数はコンストラクターとして使用できません。矢印関数をコンストラクターとして使用すると、次のコードに示すようにエラーが報告されます。 定数Person = () => { this.name = 'ジャック'; }; const usr = new Person(); // Personはコンストラクタではありません 4. 議論はしない通常の関数内では、 関数func() { console.log(引数); } func(1, 2, 3); // [引数] { '0': 1, '1': 2, '2': 3 } ただし、矢印関数では ブラウザでは、矢印関数で 定数関数 = () => { // ブラウザ環境 console.log(arguments); // 引数が定義されていません }; 関数(1, 2, 3); ただし、矢印関数は、入力パラメータをパラメータ内の 定数関数 = (...引数) => { console.log(引数); // [ 1, 2, 3 ] }; 関数(1, 2, 3); 5. 矢印関数はnew.targetをサポートしていない通常の関数定義のコンストラクター内では、インスタンスを構築するコンストラクターを返すために 関数Person() { this.name = 'ジャック'; コンソールにログ出力します。 } // コンストラクタを指します new Person(); // [関数: Person] 矢印関数では、 定数Person = () => { this.name = 'ジャック'; コンソールにログ出力します。 } // ブラウザ環境 new Person(); // ここでは new.target 式は許可されません
以上で、JavaScript のアロー関数の特徴と通常の関数との違いについての説明は終了です。js アロー関数と通常の関数についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQL テーブルとデータベースでデータを分割する方法
vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、...
まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...
目次1 はじめに2 トリガーの紹介3 トリガーを作成する4 トリガーを表示5. トリガーの削除6 結...
1. IE6 では z-index が無効です。 CSS では、階層を変更するために z-index...
序文hover疑似クラスが要素に境界線を追加すると、要素内のコンテンツがずれることがあります。box...
Docker サービス アプリケーションを再起動するコマンドを見てみましょう。具体的な内容は次のと...
目次継承とプロトタイプチェーン継承されたプロパティ継承されたメソッドJavaScript でのプロト...
目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...
1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...
目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...
ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...
<br />注目を集めるウェブサイトを作成するには、どのような原則に従うべきでしょうか?...
HTML では、<、>、& などは特別な意味を持ち (<、> はリン...
要件: ページに画像を表示する必要がありますが、さまざまな理由により、画像はサーバー 2 にあります...
共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...