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

發表於 2019-10-12 更新於 2020-08-06 分類於 JavaScript

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

轉生第二十七日，這一篇將會介紹 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 重點在於依照呼叫的方式而決定：

var myname = '我是路人';

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

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

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