本文實(shí)例講述了ES6中的箭頭函數(shù)。分享給大家供大家參考，具體如下：
語法
我們先來看看箭頭函數(shù)的語法：
([param] [, param]) => { statements}param => expressionparam 是參數(shù)，根據(jù)參數(shù)個數(shù)不同，分這幾種情況：
() => { … } // 零個參數(shù)用 () 表示；x => { … } // 一個參數(shù)可以省略 ()；(x, y) => { … } // 多參數(shù)不能省略 ()；示例
我們再來看看一些示例，看看在ES5中的函數(shù)怎么通過ES6中的箭頭函數(shù)來替代吧：
// ES5var selected = allJobs.filter(function (job) { return job.isSelected();});// ES6var selected = allJobs.filter(job => job.isSelected());當(dāng)然，也可以定義多個參數(shù)：
// ES5var total = values.reduce(function (a, b) { return a + b;}, 0);// ES6var total = values.reduce((a, b) => a + b, 0);當(dāng)然=>后面也不一定非得接return 之后的語句，看下面：
// ES5$("#confetti-btn").click(function (event) { playTrumpet(); fireConfettiCannon();});// ES6$("#confetti-btn").click(event => { playTrumpet(); fireConfettiCannon();});但是需要注意的是，多行語句需要用{}括起來，單行表達(dá)式不需要{}，并且會作為函數(shù)返回值。
x => { return x * x }; // 函數(shù)返回 x * xx => x * x; // 同上一行x => return x * x; // SyntaxError 報錯，不能省略 {}x => { x * x }; // 合法，沒有定義返回值，返回 undefined和普通函數(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]特性
介紹完了箭頭表達(dá)式的語法和示例，我們就需要思考一下了。如果箭頭表達(dá)式僅僅就是簡化了函數(shù)的命名，我們?yōu)槭裁匆淖冊瓉淼牧?xí)慣而去使用它呢？所以我們需要了解一下箭頭函數(shù)的特性。
箭頭函數(shù)內(nèi)部沒有constructor方法，也沒有prototype，所以不支持new操作。但是它對this的處理與一般的普通函數(shù)不一樣。箭頭函數(shù)的 this 始終指向函數(shù)定義時的 this，而非執(zhí)行時。我們通過一個例子來理解:
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 function上面的代碼會出現(xiàn)錯誤，因?yàn)閠his的指向從o變?yōu)榱巳郑ê瘮?shù)調(diào)用中的this都是指向全局的）。如果大家對JavaScript中的this不是很熟悉的話，可以看看前面的一篇文章《javascript中this的用法實(shí)例詳解》。好了，回歸正題，我們需要修改上面的代碼如下：
var o = { x : 1, func : function() { console.log(this.x) }, test : function() { var _this = this; setTimeout(function() { _this.func(); }, 100); }};o.test();通過使用外部事先保存的this就行了。這里就可以利用到箭頭函數(shù)了，我們剛才說過，箭頭函數(shù)的 this 始終指向函數(shù)定義時的 this，而非執(zhí)行時。所以我們將上面的代碼修改如下：
var o = { x : 1, func : function() { console.log(this.x) }, test : function() { setTimeout(() => { this.func() }, 100); }};o.test();這回this就指向o了。
我們還需要注意一點(diǎn)的就是這個this是不會改變指向?qū)ο蟮模覀冎?strong>call和apply可以改變this的指向，但是在箭頭函數(shù)中是無效的。
var x = 1, o = { x : 10, test : () => this.x };o.test(); // 1o.test.call(o); // 依然是1希望本文所述對大家ECMAScript程序設(shè)計有所幫助。
新聞熱點(diǎn)
疑難解答
