ES6 箭頭函式(arrow function)

魔豆發表於2018-08-10

例行宣告:接下來的文字內容全部來自 Understanding ECMAScript 6,作者是Nicholas C.Zakas,也就是大名鼎鼎的Professional JavaScript for Web Developers(《JavaScript高階程式設計》)的作者。我很喜歡他的寫作風格,所以在看了Understanding ECMAScript 6後試著自己寫篇部落格梳理一下,相當於簡單地翻譯和鞏固一下吧。在此特別感謝Nicholas的原創,我只是一個小矮人,站在巨人的肩膀上,所以看到了原本看不到的風景。
原文連結:https://leanpub.com/understan...

本文連結:https://segmentfault.com/a/1190000008397584

1: 什麼是箭頭函式?
箭頭函式,顧名思義就是用箭頭(=>來定義的函式,不會用到關鍵字‘function’),例如:

let sum = (a, b)=> {return a + b;}

效果等同於:

var sum = function(a, b){return a + b;}

但是,事實上上面兩個function存在很多不同,會在之後的第三點講解。

2: 箭頭函式的多種定義方式
箭頭函式的定義形式有很多種(這也是我不喜歡的一點,呵呵),具體的有:

1: 什麼情況下都可以型

let sum = (a, b)=>{return a + b;}

這種是最常用,最通用的形式。

2: 只有一個引數型

let self = num1 => {return num1;}

可以看到相對第一種定義的區別是:沒有用()包圍引數. 這種形式只可以在這種情況下用。

3: 沒有引數型

let functionA = ()=> {return 'hehe';}

當沒有引數時,必須要有'()'。

4: 兩個引數及其以上型


let sum = (a, b) => {return a + b;}

當有兩個及其以上的引數時,也必須要用‘()’把引數括起來。

5:沒有return&&沒有{}

let sum = (a, b) => a + b;

你可以同時不給return關鍵字和{},效果`等同`於上面的第4種情況

6: 沒有return && 有{}

let sum = (a, b)=> {a + b;}

這種情況不等於第5種,這種情況下`'a+b'`並不會作為這個函式的返回值,如果你呼叫這個函式,得到的結果`undefined’`

7: 有return && 沒有{}

let sum = (a, b)=> return a + b;

不要作死,這種寫法直接給你一個syntaxError.

註明,以上的第5,6,7點針對的是函式方法體的部分,不論函式引數是幾個,結果沒有區別;同樣的,第2,3,4點針對的是函式的引數部分,不論函式的方法體怎麼寫,對結果沒有影響。

3: 箭頭函式和一般的非箭頭函式的區別:

 
1: 沒有this, super, arguments和new.target繫結。一個箭頭函式裡面的這幾個指由包含它的最近的非箭頭函式決定
2: 不能使用new來呼叫。因為箭頭函式沒有構造方法。
3: 沒有[prototype]屬性。因為不能new一個箭頭函式,所以prototype也沒必要有了。
4: 不能改變this的值。this的值在這個箭頭函式的整個生命週期裡面都不變。
5: 沒有arguments。你必須通過命名引數和剩餘引數去獲取箭頭函式的引數。
6: 不能有重名引數。非箭頭函式在非嚴格模式下面可以有重名引數。

相關文章