ES6中的箭頭函數(shù)實(shí)例詳解
本文實(shí)例講述了ES6中的箭頭函數(shù)。分享給大家供大家參考，具體如下：
語法
我們先來看看箭頭函數(shù)的語法：
([param] [, param]) => {
statements
}
param => expression
param 是參數(shù)，根據(jù)參數(shù)個(gè)數(shù)不同，分這幾種情況：
() => { … } // 零個(gè)參數(shù)用 () 表示；
x => { … } // 一個(gè)參數(shù)可以省略 ()；
(x, y) => { … } // 多參數(shù)不能省略 ()；
示例
我們再來看看一些示例，看看在ES5中的函數(shù)怎么通過ES6中的箭頭函數(shù)來替代吧：
// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());
當(dāng)然，也可以定義多個(gè)參數(shù)：
// ES5
var total = values.reduce(function (a, b) {
return a + b;
}, 0);
// ES6
var 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á)式不需要{}，并且會(huì)作為函數(shù)返回值。
x => { return x * x }; // 函數(shù)返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 報(bào)錯(cuò)，不能省略 {}
x => { x * x }; // 合法，沒有定義返回值，返回 undefined
和普通函數(shù)一樣，箭頭函數(shù)也可以使用剩余參數(shù)和默認(rèn)參數(shù)。
var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3
var 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操作。但是它對(duì)this的處理與一般的普通函數(shù)不一樣。箭頭函數(shù)的 this 始終指向函數(shù)定義時(shí)的 this，而非執(zhí)行時(shí)。我們通過一個(gè)例子來理解:
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
上面的代碼會(huì)出現(xiàn)錯(cuò)誤，因?yàn)閠his的指向從o變?yōu)榱巳郑ê瘮?shù)調(diào)用中的this都是指向全局的）。如果大家對(duì)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ù)定義時(shí)的 this，而非執(zhí)行時(shí)。所以我們將上面的代碼修改如下：
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.func() }, 100);
}
};
o.test();
這回this就指向o了。
我們還需要注意一點(diǎn)的就是這個(gè)this是不會(huì)改變指向?qū)ο蟮?，我們知?a target="_blank" href="http://www.dbjr.com.cn/article/110484.htm">call和apply可以改變this的指向，但是在箭頭函數(shù)中是無效的。
var x = 1,
o = {
x : 10,
test : () => this.x
};
o.test(); // 1
o.test.call(o); // 依然是1
希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
淺談JavaScript 函數(shù)參數(shù)傳遞到底是值傳遞還是引用傳遞
下面小編就為大家?guī)硪黄獪\談JavaScript 函數(shù)參數(shù)傳遞到底是值傳遞還是引用傳遞。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JS保留兩位小數(shù) 四舍五入函數(shù)的小例子，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JS數(shù)組splice操作,結(jié)合實(shí)例形式分析了javascript使用splice方法刪除數(shù)組元素相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
Node.js：Windows7下搭建的Node.js服務(wù)(來玩玩服務(wù)器端的javascript吧,這可不是前端js插件
什么是Node.js?還服務(wù)器端javascript?對(duì)于這個(gè)概念我在這篇文章不做解釋，可以自己去搜索了解下，服務(wù)器端js不是新技術(shù)，只是最近的node.js的火爆讓他爆發(fā)了，我會(huì)在以后的文章里解釋什么是node.js。2011-06-06
輕松玩轉(zhuǎn)BootstrapTable（后端使用SpringMVC+Hibernate）
這篇文章主要和大家輕松玩轉(zhuǎn)BootstrapTable，后端使用SpringMVC+Hibernate，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
js中的原型與原型鏈應(yīng)該是老生常談的話題了，在前端面試中基本都是必問的一個(gè)問題，但是很多人還是稀里糊涂的，只知道其表層含義。本文將帶大家深入了解JavaScript中的原型與原型鏈，感興趣的可以學(xué)習(xí)一下2022-10-10
小程序自定義導(dǎo)航欄兼容適配所有機(jī)型（附完整案例）
jQuery鼠標(biāo)懸浮鏈接彈出跟隨圖片實(shí)例代碼