EP.27 RE:從零開始的學習 JS 生活-第二十七日之 ES6 箭頭函式
前言
轉生第二十七日,這一篇將會介紹 ES6 的箭頭函式
箭頭函式
身為一名工程師,其實如果能夠打少一點字當然是好事,ES6 就是為了幫助我們加快開發速物而定義一個新的函式定義方法,只需要將原本的 function
改成 =>
,而這也就是所謂的箭頭函式,例如原本傳統匿名函式是這樣子:
1 | let myname = function () { |
我們每次要建立一個函式的時候,都必須要打八個字,也就是 function
,但是我們如果我們改用 ES6 就只需要打兩個字 =>
,所以上面這個匿名函式就可以這樣改:
1 | let myname = () => { |
頓時你應該會覺得程式碼瞬間簡潔很多,但是原本的函式定義是這樣子:
1 | function fu () { |
你並不能將原本的一般函式定義改成箭頭函式這樣:
1 | fu () => { |
另外箭頭函式還有一個問題,也就是 this
的部分,在箭頭函式的 this
會與原本的傳統函式不同,這邊寫個範例舉例一下:
傳統函式的 this 重點在於依照呼叫的方式而決定:
1 | var myname = '我是路人'; |
但是如果你改成箭頭函式呢?
1 | var myname = '我是路人'; |
簡單來講你將東西建立在哪裡, this
就會指向哪裡,以上述箭頭函式範例來講,我們是將 var a = {};
建立在 window
,所以此時 this
就會指向 window
,簡單來講箭頭函式的 this 就是綁定到其定義時所在的位置。
所以通常來講我個人若有使用到 this
就會改用傳統函式,進而確保 this
的指向位置是我要的。
結尾
下一篇的 RE:從零開始的學習 JS 生活-第二十七日 將會介紹 ES6 的 forEach
以及 for...of