矢印関数は、ECMAScript 6で最も人気のある更新の1つです。「矢印」（=>）を使用して関数を定義する新しい構文を導入します。矢印関数と従来のJavaScript関数の主な違いは次のとおりです。
1。これに関連します。この値は、矢印関数が実行されるコンテキストではなく、矢印関数が定義される場所に応じて組み込まれています。
2.新しいものは利用できません。矢印関数は新しいキーワードを使用してオブジェクトをインスタンス化することはできません。そうしないと、エラーが報告されます。
3.これは不変です。これは機能するために組み込まれており、関数本体内の実行環境全体で一定です。
4.引数はありません。着信パラメーターは、引数オブジェクトを介してアクセスできません。明示的な命名またはその他の新しいES6機能を使用してのみ行うことができます。
これらの違いの存在は合理的です。まず、これに拘束することは、JavaScriptエラーの一般的なソースの1つです。機能の組み込み値を失うか、予期しない結果を得るのは簡単です。第二に、この参照を使用して矢印関数を制限することは、JavaScriptエンジン最適化処理を助長します。
1。構文
矢印関数の構文はシンプルで、独立した変数、次に矢印と関数の本体を定義します。独立変数とトピックは、使用が異なるため、より簡潔な形式で使用できます。次の例は、パラメーターを通過して値を返す矢印関数です。
コードコピーは次のとおりです。
var resprec = value => value;
//：に相当します：
var resfric = function（value）{
返品値。
};
ブラケットを追加せずに、パラメーターを渡すことでパラメーターを書き込むことができることがわかります。矢印は関数本体を指していますが、関数本体は単純なリターンステートメントであるため、ブレースを追加する必要はありません。関数が構築された後、反射して参照するように割り当てられます。
複数のパラメーターを渡す必要がある場合は、ブラケットを追加する必要があります。例えば：
コードコピーは次のとおりです。
var sum =（num1、num2）=> num1 + num2;
//：に相当します：
var sum = function（num1、num2）{
num1 + num2を返します。
};
sum（）メソッドは、2つのパラメーターを追加し、結果を渡すことです。前の例との唯一の違いは、2つのパラメーターが渡されるため、ブラケットに囲む必要があることです。それは従来の機能のようなもので、括弧内のコンマがパラメーターに分離されています。同様に、関数がパラメーターを渡す必要がない場合は、空のブラケットにも置き換える必要があります。
コードコピーは次のとおりです。varsum =（）=> 1 + 2;
//：に相当します：
var sum = function（）{
1 + 2を返します。
};
標準の関数本文を使用する場合、または関数本文で実行するためのより多くのステートメントがある場合、関数本体をブレースに囲み、戻り値を明確に定義します。例えば：
コードコピーは次のとおりです。
var sum =（num1、num2）=> {num1 + num2を返します。 }
//：に相当します：
var sum = function（num1、num2）{
num1 + num2を返します。
};
ブレースの部分は、基本的には従来の機能と同等ですが、引数パラメーターが利用できないことを除きます。
ブレースは関数の本体のロゴだからです。矢印関数がカスタムオブジェクトを返したい場合は、最初に括弧内のオブジェクトを囲む必要があります。例えば：
コードコピーは次のとおりです。
var getTempitem = id =>（{
ID：ID、
名前：「温度」
}）;
//：に相当します：
var getTempitem = function（id）{
戻る {
ID：ID、
名前：「温度」
};
};
上記の例からわかるように、ブラケットを使用して巻き毛ブラケットを含めることは、関数の本体ではなく、オブジェクトの定義です。
2。使用します
JavaScriptで最も一般的なエラーの1つは、関数内のこの関連です。これは、関数の現在の実行環境に応じて値をとるため、呼び出し時に誤解を引き起こし、他の無関係なオブジェクトに影響を与えます。次の例を参照してください。
コードコピーは次のとおりです。
var pagehandler = {
ID： "123456"、
init：function（）{
document.addeventlistener（ "click"、function（event）{
this.dosomething（event.type）; // エラー
}、 間違い）;
}、
DOSOMTHING：function（type）{
console.log（ "Handling" + type + "for" + this.id）;
}
};
このコードでは、元の意図は、PageHandlerのinit（）メソッドを使用して相互作用を構築し、クリックイベントハンドラー関数でthis.dosomething（）を呼び出すことです。ただし、コードは元の設計意図に従って実行されません。実行時に、これはPageHandlerの代わりにグローバルオブジェクトを指します。これにより、this.dosomething（）コールが無効になり、グローバルオブジェクトにはdosomhineメソッドが存在しないためにエラーが発生します。
もちろん、関数でbind（）を使用して、これをPageHandlerに明示的に関連付けることができます。以下を参照してください。
コードコピーは次のとおりです。
var pagehandler = {
ID： "123456"、
init：function（）{
document.addeventlistener（ "click"、（function（event）{
this.dosomething（event.type）;
}）。bind（this）、false）;
}、
DOSOMTHING：function（type）{
console.log（ "Handling" + type + "for" + this.id）;
}
};
少し奇妙に見えますが、コードの実行は現在期待に沿っています。関数のバインド（この）を呼び出すことにより、既存のこれに関連付けられた新しい関数が作成されます。つまり、目的を達成するために別のレイヤーが含まれます。
矢印関数はすでにこの関連性をサポートしているため、ここで矢印関数を使用する方が爽快になります。次の例を参照してください。
コードコピーは次のとおりです。
var pagehandler = {
ID： "123456"、
init：function（）{
document.addeventlistener（ "click"、
event => this.dosomething（event.type）、false）;
}、
DOSOMTHING：function（type）{
console.log（ "Handling" + type + "for" + this.id）;
}
};
このインスタンスのイベント処理関数は、this.dosomething（）の矢印関数を呼び出します。これの値は、このinit（）の値です。したがって、bind（）と同等です。
矢印関数の簡潔で簡潔な性質は、他の関数独立変数に理想的な選択となります。たとえば、ES5に配列をアレンジするためにカスタムコンパレータを使用するには、以下の典型的なコードを参照してください。
コードコピーは次のとおりです。
var result = values.sort（function（a、b）{
a -bを返します。
}）;
上記の例では、多くの構文を使用して簡単な操作を実装しています。矢印関数を使用する場合、非常に洗練されたコードを書くことができます。
コードコピーは次のとおりです。
var result = values.sort（（a、b）=> a -b）;
ソート/マップ/削減配列のメソッドは、コールバック関数をサポートしています。矢印関数を使用すると、ライティングプロセスを簡素化し、手を解放して必要なことを行うことができます。
3。サプリメント
矢印関数は実際には従来の関数とは異なりますが、共通の特性があります。例えば：
1。矢印関数のタイプ操作は「関数」を返します。
2。矢印関数は依然として関数のインスタンスであるため、インスタンスの実行方法は従来の関数の実行方法と一致しています。
3.Call/Apply/Bindメソッドは引き続きArrow関数に適用されますが、現在のスコープを拡張するためにこれらのメソッドが呼び出されたとしても、これは変更されません。
矢印関数と従来の機能の最大の違いは、新しい操作が無効になっていることです。
4。結論
矢印関数は、ECMAScript 6の新機能であり、多くの注目を集め、常に最適化されています。短い文法を使用して機能や声明を書くプロセスを定義するのは一般的な傾向であり、それらは確実に無敵であり、誰もそれらを止めることができません。キーワードとの関係により、開発者はもはやイライラせず、JavaScriptエンジンを通じてパフォーマンスを向上させるために最適化します。これについて言えば、私の友達はすでにのどが渇いています。矢印機能を試してみたい場合は、Firefoxの最新バージョンを開いてください。