iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 28
1
Modern Web

RE:從零開始的學習 JS 生活系列 第 28

EP.27 RE:從零開始的學習 JS 生活-第二十七日

前言

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

箭頭函式

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

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

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

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

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

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

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

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

本文同步發表於:https://hsiangfeng.github.io/javascript/20191012/2524618181/


上一篇
EP.26 RE:從零開始的學習 JS 生活-第二十六日
下一篇
EP.28 RE:從零開始的學習 JS 生活-第二十八日
系列文
RE:從零開始的學習 JS 生活32

尚未有邦友留言

立即登入留言