語(yǔ)法
我們先來(lái)看看箭頭函數(shù)的語(yǔ)法：
([param] [, param]) => { statements}param => exPRession123456123456param 是參數(shù)，根據(jù)參數(shù)個(gè)數(shù)不同，分這幾種情況： () => { … } // 零個(gè)參數(shù)用 () 表示； x => { … } // 一個(gè)參數(shù)可以省略 ()； (x, y) => { … } // 多參數(shù)不能省略 ()；
示例
我們?cè)賮?lái)看看一些示例，看看在ES5中的函數(shù)怎么通過(guò)ES6中的箭頭函數(shù)來(lái)替代吧：
// ES5var selected = allJobs.filter(function (job) { return job.isSelected();});// ES6var selected = allJobs.filter(job => job.isSelected());1234567812345678當(dāng)然，也可以定義多個(gè)參數(shù)：
// ES5var total = values.reduce(function (a, b) { return a + b;}, 0);// ES6var total = values.reduce((a, b) => a + b, 0);1234567812345678當(dāng)然=>后面也不一定非得接return 之后的語(yǔ)句，看下面：
// ES5$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();});// ES6$("#confetti-btn").click(event => { playTrumpet(); fireConfettiCannon();});12345678910111234567891011但是需要注意的是，多行語(yǔ)句需要用{}括起來(lái)，單行表達(dá)式不需要{}，并且會(huì)作為函數(shù)返回值。
x => { return x * x }; // 函數(shù)返回 x * xx => x * x; // 同上一行x => return x * x; // SyntaxError 報(bào)錯(cuò)，不能省略 {}x => { x * x }; // 合法，沒(méi)有定義返回值，返回 undefined1234512345和普通函數(shù)一樣，箭頭函數(shù)也可以使用剩余參數(shù)和默認(rèn)參數(shù)。
var func1 = (x = 1, y = 2) => x + y;func1(); // 得到 3var func2 = (x, ...args) => { console.log(args) };func2(1,2,3); // 輸出 [2, 3]123456123456
特性
介紹完了箭頭表達(dá)式的語(yǔ)法和示例，我們就需要思考一下了。如果箭頭表達(dá)式僅僅就是簡(jiǎn)化了函數(shù)的命名，我們?yōu)槭裁匆淖冊(cè)瓉?lái)的習(xí)慣而去使用它呢？所以我們需要了解一下箭頭函數(shù)的特性。
箭頭函數(shù)內(nèi)部沒(méi)有constructor方法，也沒(méi)有prototype，所以不支持new操作。但是它對(duì)this的處理與一般的普通函數(shù)不一樣。箭頭函數(shù)的 this 始終指向函數(shù)定義時(shí)的 this，而非執(zhí)行時(shí)。我們通過(guò)一個(gè)例子來(lái)理解:
var o = { x : 1, func : function() { console.log(this.x) }, test : function() { setTimeout(function() { this.func(); }, 100); }};o.test(); // TypeError : this.func is not a function123456789101112123456789101112上面的代碼會(huì)出現(xiàn)錯(cuò)誤，因?yàn)閠his的指向從o變?yōu)榱巳郑ê瘮?shù)調(diào)用中的this都是指向全局的）。如果大家對(duì)javaScript中的this不是很熟悉的話，可以看看我寫(xiě)過(guò)的一篇文章，深入理解Javascript之this。好了，回歸正題，我們需要修改上面的代碼如下：
var o = { x : 1, func : function() { console.log(this.x) }, test : function() { var _this = this; setTimeout(function() { _this.func(); }, 100); }};o.test();1234567891011121312345678910111213通過(guò)使用外部事先保存的this就行了。這里就可以利用到箭頭函數(shù)了，我們剛才說(shuō)過(guò)，箭頭函數(shù)的 this 始終指向函數(shù)定義時(shí)的 this，而非執(zhí)行時(shí)。所以我們將上面的代碼修改如下：
var o = { x : 1, func : function() { console.log(this.x) }, test : function() { setTimeout(() => { this.func() }, 100); }};o.test();1234567891012345678910這回this就指向o了。
我們還需要注意一點(diǎn)的就是這個(gè)this是不會(huì)改變指向?qū)ο蟮模覀冎纁all和apply可以改變this的指向，但是在箭頭函數(shù)中是無(wú)效的。
var x = 1, o = { x : 10, test : () => this.x };o.test(); // 1o.test.call(o); // 依然是1本文轉(zhuǎn)自：http://blog.csdn.net/mevicky/article/details/49942559 一個(gè)很不錯(cuò)的博客！謝謝~
