(Day23) ES6 箭頭函式
前言
跟變數一樣 JavaScript 在 ES6 為函式新添加一種寫法,他和傳統函式有以下差異:
- this 指向不同
- 沒有 arguments 參數
- 部分寫法箭頭函式不支援
除了以上和傳統函式不同,箭頭函式本身一個可以縮寫特性,先來看一下範例:
這是原本傳統函式:
1 | const sayHi = function(name){ |
如果是使用 箭頭函式 可以省略 return
以及 { }
1 | const sayHi = (name)=> `Hello ${name}` |
當參數只有一個時,也可以將包著參數的 ()
給省略。
1 | const sayHi = name => `Hello ${name}` |
this 指向不同
- 在傳統函式中,會根據呼叫函式的方法會決定
this
的指向。 - 箭頭函式則並沒有自己的
this
,箭頭函式的this
會綁定到定義時所在的位置,跟呼叫方法無關,先來看看範例:
1 | var name = 'Ryder' |
上面有提到,箭頭函式的 this
會綁定到定義時所在的位置,這是什麼意思呢?
簡單來說就是: 當該實體、變數在哪裡建立, this
就會指向哪裡,而上面範例的 obj
正是建立在 window 下的,因此 this
是指向 window。
沒有 arguments 參數
在函式基本章節有提到,傳統函式能夠透過 arguments 這個關鍵字獲得該函式所有參數,而這方法在箭頭函式中無法使用,如範例:
1 | function Fn1(){ |
不過這點可以使用 ES6 新增的其餘參數,來獲得全部參數資料,只需要在參數部分填上 ...arg
之後的 arg
便可獲得全部參數資料。(arg 可自定義名稱
1 | const Fn3 = (...arg) => { |
部分寫法箭頭函式不支援
建構式函式
上面有提到箭頭含是沒有自己的 this
,因此建構式函式自然無法使用
1 | const TShirt = (color,material,size) => { |
call/apply/bind
箭頭函式的 this
是無法使用 call
、apply
、 bind
上述綁定 this
功能,箭頭函式的 this
會是固定的。
1 | const obj = { |
參考文獻
- JavaScript 核心篇 (六角學院)
- EP.27 RE:從零開始的學習 JS 生活-第二十七日之 ES6 箭頭函式
- 鐵人賽:箭頭函式 (Arrow functions)