箭頭函數是ECMAScript 6最受關注的更新內容之一。它引入了一種用“箭頭”（=>）來定義函數的新語法，它…它碉堡了~。箭頭函數與傳統的JavaScript函數主要差異在於以下幾點：
1.對 this 的關聯。函數內建 this 的值，取決於箭頭函數在哪裡定義，而非箭頭函數執行的上下文環境。
2.new 不可用。箭頭函數不能使用 new 關鍵字來實例化對象，不然會報錯。
3.this 不可變。函數內建 this 不可變，在函數體內整個執行環境中為常數。
4.沒有arguments物件。更不能透過arguments物件存取傳入參數。只能使用顯式命名或其他ES6新特性來完成。
這些差異的存在是有理可循的。首先，對this的綁定是JavaScript錯誤的常見來源之一。容易遺失函數內建數值，或得出意外結果。其次，將箭頭函數限制為使用固定this引用，有利於JavaScript引擎最佳化處理。
一、文法
箭頭函數的語法很簡單，定義自變量，然後是箭頭和函數主體。自變數和主題因使用不同可以採用更簡潔的格式。下面這個例子就是採用傳一個參數和傳回一個值的箭頭函數。
var reflect = value => value; / 等同於：
var reflect = function(value) {
return value;
};
可以看出，傳一個參數就直接寫就好了，不用加小括號。箭頭指向函數主體，不過函數主體也只是簡單的一條回傳語句，所以也不用加大括號。函式構造完畢賦給reflect加以引用。
若需傳入多個參數，則應加上小括號。例如：
var sum = (num1, num2)num2) =d ;
// 等同於：
var sum = function(num1, num2) {
return num1 num2;
};
sum()方法為兩個參數相加並回傳結果。跟前一個例子的唯一差異是傳入了兩個參數，所以要用小括號括起來。它與傳統函數一樣，括號內由逗號將傳入參數分開。同樣，如果函數不需要傳入參數，那也要以空括號來代替。
var sum = () => 1 2;
/
var sum = () => 1 2;
/
//等同於：
var sum = function() {
return 1 2; };
若你想使用標準的函數體，或者函數體內可能有更多的語句要執行，則要用大括號將函數體括起來，並明確定義傳回值。例如：複製程式碼
程式碼如下:
var sum = (num1, num2) => { return num1 num2; }
//等同於：
var sum = function(num1, num2) {
return num1 num2; };
大括號內的部分基本上等同於傳統函數，除了arguments參數不可用外。
因為大括號是函數主體的標誌。而箭頭函數若要傳回自訂物件的話，就必須用小括號把該物件括起來先。例如：
程式碼如下:
var getTemp = id = >🎜>
var getTemp = id = > ({- : id,
name: "Temp"
});
// 等同於：
var getTempItem = function(id) {
> name: "Temp"
};
};
上例可以看出，用小括號包含大括號則是物件的定義，而非函數主體。
二、使用
JavaScript最常見錯誤之一就是函數內部this關聯。因為this是根據函數目前的執行環境去取值的，這樣就會在呼叫時產生誤解，以導致對其他的不相關物件產生了影響。參見下例：
var PageHandler = {
,
init: function() {
document.addEventListener("click", function(event) { },
doSomething: function(type) {
console.log("Handling " type " for " .id.id);
在這段程式碼中，本意是想讓PageHandler的init()方法用於建構交互作用，並在點擊事件處理函數中呼叫this.doSomething()。但是程式碼並未依設計初衷來執行，運行時this指向了全域物件而不是PageHandler，從而造成this.doSomething()呼叫無效出現報錯，因為全域物件中不存在doSomething方法。
當然，可以在函數中使用bind()將this與PageHandler明確關聯起來，見下：
複製代碼
代碼如下:
document.addEventListener("click" , (function(event) {
this.doSomething(event.type);
doSomething: function(type) {
console.log("Handling " type " for " this.id);
}
};
現在看著預期的。透過呼叫函數的bind(this)，又創建了一個已關聯現有this的新函數返回，就是說為了達到目的額外又包了一層。
因為箭頭函數已經支援this關聯，所以這裡用箭頭函數會更爽快些，看下例：
複製程式碼
代碼如下:
var PageHandler = {
andling " type " for " this.id);
}
};
這個實例中的事件處理函數呼叫了this.doSomething()的箭頭函數。 this的取值即為init()內的this值。故而它等效於bind()。
箭頭函數簡潔扼要的特性，也使它成為其他函數自變數的理想選擇。例如，若要在ES5上，使用自訂比較器來排列數組，典型的程式碼見下：
複製程式碼
程式碼如下:
var result = values.sort(function(a, b) {
return a - b;
複製代碼
代碼如下:
var result = values.sort((a, b) => a - b);
陣列的sort/map/reduce等方法都支援回呼函數。用箭頭函數可以簡化書寫流程，解放你的雙手去做你想做的事。
三、補充
箭頭函數的確與傳統函數有不同之處，但仍存在共同的特徵。例如：
1.對箭頭函數進行typeof操作會回傳「function」。
2.箭頭函數仍是Function的實例，故而instanceof的執行方式與傳統函數一致。
3.call/apply/bind方法仍適用於箭頭函數，但就算呼叫這些方法擴充當前作用域，this也依舊不會變化。
箭頭函數與傳統函數最大的差異在，停用new操作。
四、結論
箭頭函數是ECMAScript 6一個備受關注的新特性，並且還在不斷的優化著。用簡短文法定義函數或語句書寫流程是大勢所趨，他們必將屌炸天，無人可阻。它對關鍵字this的關聯讓開發者不再神煩，並透過JavaScript引擎優化，幫助其提升表現。說到這裡，小夥伴們的大刀已經飢渴難耐了吧，若想試試箭頭函數，打開最新版本的Firefox即可。
