有人說ES6(ES2015)最具魅力的是箭頭函數。但真的，我不這么認為：箭頭函數這玩意真是又丑又變扭！

不過，箭頭函數確實有它的功能優勢：

1、簡潔：

(雖然我也不認為這是真的簡潔，還是認為它是很變扭的)

看一段代碼：

const numbers = [1,2,3];

const event = numbers.filter(function(x){

return x % 2 === 0;

});

用箭頭語法重寫是這樣的：

const numbers = [1,2,3];

const event = numbers.filter(x => x % 2 === 0);

(真是種稀里糊涂的格式，不易理解 -_-!)

解釋：

function關鍵字被刪除，只留下參數，緊跟著的是箭頭(=>)，然是函數功能體。

如果參數列表中包含多個參數，必須用括號包裹，并用逗號分割。

此外，沒有參數時，必須在箭頭前用一組空括號：()=>{...}。

當函數的主體只是一行時，可以不使用return，因為它是隱式應用的。

2、綁定的詞法作用域

直接用例子來說明：

function DelayedGreeter(name){

this.name = name;

}

DelayedGreeter.prototype.greet = function(){

setTimeout(function cb(){

console.log("hello " + this.name);

},500);

}

const greeter = new DelayedGreeter("world");

greeter.greet();

在這段代碼中，期望輸出Hello world，但world參數并未能傳到cb函數的，所以輸出會是：

不引入箭頭函數時，如果想要得到正確的輸出，需要進行bind操作：

function DelayedGreeter(name){

this.name = name;

}

DelayedGreeter.prototype.greet = function(){

setTimeout( (function cb(){

console.log("hello " + this.name);

}).bind(this) ,500);

}

const greeter = new DelayedGreeter("world");

greeter.greet();

但如果使用箭頭函數，由于它具有綁定作用域的特性，可以較方便的實現上述同樣的效果：

function DelayedGreeter(name){

this.name = name;

}

DelayedGreeter.prototype.greet = function(){

setTimeout( ()=> console.log("hello " + this.name) ,500);

}

const greeter = new DelayedGreeter("world");

greeter.greet();

在這個方面的應用確實是方便了一些。

總結

以上是生活随笔為你收集整理的实战 es6_Node.JS实战65：ES6新特性：箭头函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。