前言
ES6出現了函數的新的定義形式——箭頭函數，這種函數的定義方式，十分具有表現力，讓輸入、輸出一目了然，也深得開發者的喜愛。
一、 箭頭函數如何使用
var f = v => v;
這種定義方式等價于：
var f = function(v) {
return v;
};
是不是很簡潔方便？在自己寫箭頭函數時在書寫格式上有以下幾點需要注意：
- 當入參不只1個時，需要用()括起來；
- 當沒有入參時，要用()表示；
- 箭頭函數的函數體多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回。
- 如果箭頭函數直接返回一個對象，必須在對象外面加上()，否則會報錯。
下面給出4個范例依次說明：
var fun = (x,y) => x + y;
fun(1,4)//5
var say = () => console.log('hello')
var area = (a,b,h) => {
var l = (a+b)/2;
return h*l
}
s = area(4,8,5)//30
let getTempItem = id => ({ id: id, name: "Temp" })
二、箭頭函數的優點
- 可以讓函數表達更加簡潔，一目了然。
看看下面幾個例子：
const isEven = n => n % 2 == 0;
const square = n => n * n;
僅僅使用一行就創建了一個“小工具”
- 簡化回調函數
// 正常函數寫法
var result = values.sort(function (a, b) {
return a - b;
});
// 箭頭函數寫法
var result = values.sort((a, b) => a - b);
- 箭頭函數可以讓this指向固定化，這種特性很有利于封裝回調函數。后面我們會詳細介紹它的this的特性。
三、箭頭函數應該注意的幾個點
- 箭頭函數的this會繼承箭頭函數的定義完成處的上下文的this，也就是它定義處外層的this，且它是固定的。
什么叫繼承函數外層的this？來看幾個例子：
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 }); //42
這里需要注意的是，箭頭函數只是作為setTimeout()的入參，并不是在setTimeout()內部完成定義的，它完成定義的上下文(context)是函數foo的作用域，如果是普通函數，執行時this應該指向全局對象window，應該輸出21。但是，箭頭函數導致this總是指向函數定義生效的上下文的this（本例是{id: 42}），所以輸出的是42。
對比下不使用箭頭函數：
function foo() {
setTimeout(function(){
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 }); //21
這里的this由函數調用的位置決定，是在setTimeout()內部回調，所以是作為函數單獨調用，在瀏覽器中即指向全局變量window。
再看一個例子：
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭頭函數
setInterval(() => this.s1++, 1000);
// 普通函數
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
和上面一樣，第一個箭頭函數中的this繼承構造函數Timer的this即指向實例timer，所以timer的s1會自加；而第二個this指向全局變量，不會改變timer的s2。
再看看上面提到的函數封裝中的用法：
var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);//注意這一行
},
doSomething: function(type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};
里面直接使用了
this.doSomething(event.type), false)
因為箭頭函數的this間接繼承了構造函數的this，所以可以通過this使用構造函數的方法。
箭頭函數不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。
不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用rest 參數（形式為...變量名）代替。
var add = (...nums) => {
let sum = 0;
for(let i = 0; i < nums.length; i++){
sum += nums[i]
}
return sum
}
- 不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。
在這4條注意點中，第一條是最重要的，也是花大量篇幅介紹的，希望各位在使用時可以注意。
本文到此結束，更多參考：阮一峰ESMAScript6入門
