ECMAScript6の新機能Arrow関数を詳しく紹介_基礎知識

アロー関数は、ECMAScript 6 で最も話題になっているアップデートの 1 つです。 「矢印」 (=>) を使用して関数を定義するための新しい構文が導入されています。これは驚くべきことです。アロー関数と従来の JavaScript 関数の主な違いは次の点です。
1. これとの関連付け。関数内の this の値は、アロー関数が実行されるコンテキストではなく、アロー関数が定義されている場所によって異なります。
2.newは利用できません。アロー関数は、 new キーワードを使用してオブジェクトをインスタンス化することはできません。使用しない場合は、エラーが報告されます。
3.これは不変です。関数の組み込み this は不変であり、関数本体の実行環境全体を通じて一定です。
4. 引数オブジェクトはありません。受信パラメータには、引数オブジェクトを介してアクセスできません。これは、明示的な名前付けまたはその他の新しい ES6 機能を使用する場合にのみ実行できます。

これらの違いは正当化されます。まず、これへのバインディングは、JavaScript エラーの一般的な原因の 1 つです。組み込み関数の値が失われたり、予期しない結果が得られたりする可能性があります。次に、アロー関数を固定の this 参照の使用に制限することは、JavaScript エンジンの最適化に有益です。

1. 文法

アロー関数の構文は非常に単純で、独立変数を定義し、次にアローと関数本体を定義します。独立変数とトピックは、その使用法に応じて、より簡潔な形式になる場合があります。次の例では、1 つのパラメーターを渡して値を返すアロー関数を使用します。

コードをコピー コードは次のとおりです。

// 以下と同等:

varreflect = function(value) {
return value;
};



ご覧のとおり、パラメーターを渡す場合は、括弧を追加せずに直接記述するだけです。矢印は関数本体を指していますが、関数本体は単なる return ステートメントであるため、中かっこを追加する必要はありません。関数が構築された後、参照のためにリフレクトに割り当てられます。

複数のパラメータを渡す必要がある場合は、かっこを追加する必要があります。例:

コードをコピー コードは次のとおりです。var sum = (num1, num2) = > num1 num2;

// 以下と同等:

var sum = function(num1, num2) {
return num1 num2;
};



sum() メソッドは 2 つのパラメーターを追加し、結果を返します。前の例との唯一の違いは、2 つのパラメーターが渡されるため、それらがかっこで囲まれていることです。これは従来の関数と同じで、括弧内に渡されるパラメータをカンマで区切ります。同様に、関数にパラメーターが必要ない場合は、代わりに空の括弧を使用する必要があります。

コードをコピーします コードは次のとおりです。var sum = () => 🎜>/ / 以下と同等: var sum = function() {

return 1 2;

};



標準の関数本体を使用する場合、または関数本体でさらに多くのステートメントを実行する可能性がある場合は、関数本体を中括弧で囲み、戻り値を明確に定義します。例:

コードをコピー

コードは次のとおりです。var sum = (num1, num2) => ; { return num1 num2; }//以下と同等:

var sum = function(num1, num2) {

return num1 num2;
};



中括弧内の部分は、arguments パラメーターが使用できないことを除いて、基本的に従来の関数と同等です。
中括弧は関数本体の記号であるためです。アロー関数がカスタム オブジェクトを返す場合は、オブジェクトをかっこで囲む必要があります。例:

コードをコピーします

コードは次のとおりです。var getTempItem = id = > id: id,

name: "Temp"

});
// 以下と同等:
var getTempItem = function(id) {
return {
id: id,
名前: "Temp"
};
};

上記の例からわかるように、括弧を使用して中括弧を含めることはオブジェクトの定義であり、関数の本体ではありません。

2.

を使用します。

JavaScript で最もよくあるエラーの 1 つは、関数内のこの関連付けです。これは関数の現在の実行環境に基づいて値を取得するため、呼び出し中に誤解が発生し、他の無関係なオブジェクトに影響を与えます。以下の例を参照してください:

コードをコピー コードは次のとおりです:

var PageHandler = {
id: "123456" ,
init: function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // エラー
}, false );
},
doSomething: function(type) {
console.log("this.id の " type " の処理);
}
};

このコードでは、本来の目的は、PageHandler の init() メソッドを使用してインタラクションを構築し、クリック イベント処理関数で this.doSomething() を呼び出すことです。ただし、コードは当初の設計意図に従って実行されず、実行時に PageHandler ではなくグローバル オブジェクトを指していたため、 this.doSomething() 呼び出しが無効になり、 doSomething メソッドが実行されないためエラーが報告されました。グローバルオブジェクトに存在します。
もちろん、関数内で binding() を使用して、これを PageHandler に明確に関連付けることもできます。以下を参照してください:

コードをコピー コードは次のとおりです:

var PageHandler = {

id: "123456",

init: function() {
document. addEventListener("click" , (function(event) {
This.doSomething(event.type);
}).bind(this), false);
},

doSomething : function(type) {
console.log("this.id の " type " を処理します。);関数の binding(this) を呼び出すと、既存の this に関連付けられた新しい関数 return が作成されます。これは、目的を達成するために追加のレイヤーがラップされることを意味します。
アロー関数はすでにこの関連付けをサポートしているため、ここではアロー関数を使用する方が便利です。次の例を参照してください。

コードをコピー

コードは次のとおりです: var PageHandler = { id: "123456",

init: function() {

document.addEventListener("click ",
events = > this.doSomething(event.type), false);
},

doSomething: function(type) {
コンソール。 log("this.id の " type " の処理);
}
};



この例のイベント処理関数は、this.doSomething() のアロー関数を呼び出します。 this の値は init() の this 値です。したがって、これはbind()と同等です。
アロー関数の簡潔で簡潔な性質により、他の関数の引数にも理想的な選択肢となります。たとえば、カスタム コンパレータを使用して ES5 で配列を並べ替える場合の一般的なコードは次のとおりです:

コードをコピー

コードは次のとおりです:var result = value.sort(function(a, b) { return a - b; });

上記の例では、単純な操作を実装するために多くの構文を使用しています。アロー関数を使用すると、非常に簡潔なコードを作成できます。

コードをコピーします

コードは次のとおりです:var result = value.sort((a, b) => a - b);

配列のsort/map/reduceとその他のメソッドはすべてコールバック関数をサポートしています。アロー関数を使用すると、作成プロセスが簡素化され、手を解放してやりたいことを行うことができます。

3.補足

アロー関数は確かに従来の関数とは異なりますが、それでも共通の特徴があります。例:
1. アロー関数の Typeof 演算は「function」を返します。
2. アロー関数は依然として Function のインスタンスであるため、instanceof の実行方法は従来の関数と一致します。
3. call/apply/bind メソッドは引き続きアロー関数に適用できますが、これらのメソッドが現在のスコープを拡張するために呼び出された場合でも、これは変わりません。
アロー機能と従来の機能の最大の違いは、新しい操作が無効になることです。

4. 結論

アロー関数は ECMAScript 6 の新機能として注目を集めており、現在も最適化が行われています。短い構文を使用して関数やステートメントを定義してプロセスを記述するのが一般的な傾向であり、それらは必ず爆発的に増加し、誰もそれを止めることはできません。キーワードとの関連付けにより、開発者は安心し、JavaScript エンジンの最適化によるパフォーマンスの向上に役立ちます。そうは言っても、友人たちはすでに剣に飢えているので、矢印機能を試してみたい場合は、最新バージョンの Firefox を開いてください。