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 テーブルとデータベースでデータを分割する方法
elementUI が提供する el-select コンポーネントのスタイルを変更する方法この問題...
MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...
この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...
目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...
JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...
1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...
一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...
Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...
内容Hyperledger fabric1.4環境のWindows 10でのセットアップ前提条件Wi...
ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...
現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...
MySQL のデフォルトの時間タイプ (datetime と timestamp) の精度は秒です。...
今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...
1. 本番環境でMySQLのデッドロックを監視し、デッドロックの可能性を減らす方法まず、デッドロック...