前言
ES6出現(xiàn)了函數(shù)的新的定義形式——箭頭函數(shù)男摧，這種函數(shù)的定義方式洛搀，十分具有表現(xiàn)力敢茁，讓輸入、輸出一目了然留美，也深得開發(fā)者的喜愛彰檬。
一、 箭頭函數(shù)如何使用
var f = v => v;
這種定義方式等價于：
var f = function(v) {
return v;
};
是不是很簡潔方便谎砾？在自己寫箭頭函數(shù)時在書寫格式上有以下幾點需要注意：
- 當(dāng)入?yún)⒉恢?個時逢倍，需要用()括起來；
- 當(dāng)沒有入?yún)r景图，要用()表示较雕；
- 箭頭函數(shù)的函數(shù)體多于一條語句，就要使用大括號將它們括起來挚币，并且使用return語句返回亮蒋。
- 如果箭頭函數(shù)直接返回一個對象扣典，必須在對象外面加上()，否則會報錯宛蚓。
下面給出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" })
二激捏、箭頭函數(shù)的優(yōu)點
- 可以讓函數(shù)表達(dá)更加簡潔设塔，一目了然凄吏。
看看下面幾個例子：
const isEven = n => n % 2 == 0;
const square = n => n * n;
僅僅使用一行就創(chuàng)建了一個“小工具”
- 簡化回調(diào)函數(shù)
// 正常函數(shù)寫法
var result = values.sort(function (a, b) {
return a - b;
});
// 箭頭函數(shù)寫法
var result = values.sort((a, b) => a - b);
- 箭頭函數(shù)可以讓this指向固定化，這種特性很有利于封裝回調(diào)函數(shù)闰蛔。后面我們會詳細(xì)介紹它的this的特性痕钢。
三、箭頭函數(shù)應(yīng)該注意的幾個點
- 箭頭函數(shù)的this會繼承箭頭函數(shù)的定義完成處的上下文的this序六，也就是它定義處外層的this任连，且它是固定的。
什么叫繼承函數(shù)外層的this例诀？來看幾個例子：
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 }); //42
這里需要注意的是随抠，箭頭函數(shù)只是作為setTimeout()的入?yún)ⅲ⒉皇窃趕etTimeout()內(nèi)部完成定義的繁涂，它完成定義的上下文(context)是函數(shù)foo的作用域拱她，如果是普通函數(shù)，執(zhí)行時this應(yīng)該指向全局對象window扔罪，應(yīng)該輸出21秉沼。但是，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效的上下文的this（本例是{id: 42}）矿酵，所以輸出的是42唬复。
對比下不使用箭頭函數(shù)：
function foo() {
setTimeout(function(){
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 }); //21
這里的this由函數(shù)調(diào)用的位置決定，是在setTimeout()內(nèi)部回調(diào)全肮，所以是作為函數(shù)單獨調(diào)用敞咧，在瀏覽器中即指向全局變量window。
再看一個例子：
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭頭函數(shù)
setInterval(() => this.s1++, 1000);
// 普通函數(shù)
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
和上面一樣辜腺，第一個箭頭函數(shù)中的this繼承構(gòu)造函數(shù)Timer的this即指向?qū)嵗齮imer休建，所以timer的s1會自加；而第二個this指向全局變量哪自，不會改變timer的s2丰包。
再看看上面提到的函數(shù)封裝中的用法：
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)
因為箭頭函數(shù)的this間接繼承了構(gòu)造函數(shù)的this，所以可以通過this使用構(gòu)造函數(shù)的方法壤巷。
箭頭函數(shù)不可以當(dāng)作構(gòu)造函數(shù)邑彪，也就是說，不可以使用new命令胧华，否則會拋出一個錯誤寄症。
不可以使用arguments對象宙彪，該對象在函數(shù)體內(nèi)不存在。如果要用有巧，可以用rest 參數(shù)（形式為...變量名）代替释漆。
var add = (...nums) => {
let sum = 0;
for(let i = 0; i < nums.length; i++){
sum += nums[i]
}
return sum
}
- 不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)篮迎。
在這4條注意點中男图，第一條是最重要的，也是花大量篇幅介紹的甜橱，希望各位在使用時可以注意逊笆。
本文到此結(jié)束，更多參考：阮一峰ESMAScript6入門
