EP.27 RE:從零開始的學習 JS 生活-第二十七日之 ES6 箭頭函式

前言

轉生第二十七日,這一篇將會介紹 ES6 的箭頭函式

箭頭函式

身為一名工程師,其實如果能夠打少一點字當然是好事,ES6 就是為了幫助我們加快開發速物而定義一個新的函式定義方法,只需要將原本的 function 改成 =>,而這也就是所謂的箭頭函式,例如原本傳統匿名函式是這樣子:

1
2
3
let myname = function () {
console.log('Ray');
}

我們每次要建立一個函式的時候,都必須要打八個字,也就是 function,但是我們如果我們改用 ES6 就只需要打兩個字 =>,所以上面這個匿名函式就可以這樣改:

1
2
3
let myname = () => {
console.log('Ray');
}

頓時你應該會覺得程式碼瞬間簡潔很多,但是原本的函式定義是這樣子:

1
2
3
function fu () {
console.log('Ray');
}

你並不能將原本的一般函式定義改成箭頭函式這樣:

1
2
3
fu () => {
console.log('Ray');
}

另外箭頭函式還有一個問題,也就是 this 的部分,在箭頭函式的 this 會與原本的傳統函式不同,這邊寫個範例舉例一下:

傳統函式的 this 重點在於依照呼叫的方式而決定

1
2
3
4
5
6
7
8
9
var myname = '我是路人';

var a = {
myname: 'Ray',
fu: function () {
console.log(this.myname);
}
}
a.fu(); // Ray

但是如果你改成箭頭函式呢?

1
2
3
4
5
6
7
8
9
var myname = '我是路人';

var a = {
myname: 'Ray',
fu: () => {
console.log(this.myname);
}
}
a.fu(); // 我是路人

簡單來講你將東西建立在哪裡, this 就會指向哪裡,以上述箭頭函式範例來講,我們是將 var a = {}; 建立在 window,所以此時 this 就會指向 window,簡單來講箭頭函式的 this 就是綁定到其定義時所在的位置

所以通常來講我個人若有使用到 this 就會改用傳統函式,進而確保 this 的指向位置是我要的。

結尾

下一篇的 RE:從零開始的學習 JS 生活-第二十七日 將會介紹 ES6 的 forEach 以及 for...of