(Day23) ES6 箭頭函式

2021 iThome 鐵人賽

DAY 23

自我挑戰組

JavaScript 奇奇怪怪的核心觀念系列第 23 篇

13th鐵人賽

Ryder

2021-09-23 18:48:07

563 瀏覽

分享至

前言

跟變數一樣 JavaScript 在 ES6 為函式新添加一種寫法，他和傳統函式有以下差異：

this 指向不同
沒有 arguments 參數
部分寫法箭頭函式不支援

除了以上和傳統函式不同，箭頭函式本身一個可以縮寫特性，先來看一下範例：
這是原本傳統函式：

const sayHi = function(name){
	return `Hello ${name}` 
}
console.log(sayHi('Ryder')) //Hello Ryder

如果是使用箭頭函式可以省略 return 以及 { }

const sayHi = (name)=> `Hello ${name}` 

console.log(sayHi('Ryder')) //Hello Ryder

當參數只有一個時，也可以將包著參數的 () 給省略。

const sayHi = name => `Hello ${name}` 

console.log(sayHi('Ryder')) //Hello Ryder

this 指向不同

在傳統函式中，會根據呼叫函式的方法會決定 this 的指向。
箭頭函式則並沒有自己的 this ，箭頭函式的 this 會綁定到定義時所在的位置，跟呼叫方法無關，先來看看範例：

var name = 'Ryder'
var obj1 = {
	name: 'Jack',
	showName:function(){
		console.log(this.name)
	}
};
var obj2 = {
	name: 'Jack',
	showName:() => {
		console.log(this.name)
	}
};
obj1.showName() // Jack
obj2.showName() // Ryder

上面有提到，箭頭函式的 this 會綁定到定義時所在的位置，這是什麼意思呢？
簡單來說就是：當該實體、變數在哪裡建立， this 就會指向哪裡，而上面範例的 obj 正是建立在 window 下的，因此 this 是指向 window。

沒有 arguments 參數

在函式基本章節有提到，傳統函式能夠透過 arguments 這個關鍵字獲得該函式所有參數，而這方法在箭頭函式中無法使用，如範例：

function Fn1(){
	console.log(arguments) // Arguments(2) ['Ryder', 123, ...]
}
Fn1('Ryder', 123)

const Fn2 = () => {
	console.log(arguments) // VM940:2 Uncaught ReferenceError: arguments is not defined
}
Fn2('Ryder', 123)

不過這點可以使用 ES6 新增的其餘參數，來獲得全部參數資料，只需要在參數部分填上 ...arg 之後的 arg 便可獲得全部參數資料。（arg 可自定義名稱

const Fn3 = (...arg) => {
	console.log(arg) //['Ryder', 123]
}
Fn3('Ryder', 123)

部分寫法箭頭函式不支援

建構式函式

上面有提到箭頭含是沒有自己的 this ，因此建構式函式自然無法使用

const TShirt = (color,material,size) => {
	this.color = color
	this.material = material
	this.size = size
}
const BlackTShit = new TShirt('black','棉','L') //TShirt is not a constructor

call/apply/bind

箭頭函式的 this 是無法使用 call、apply 、 bind 上述綁定 this 功能，箭頭函式的 this 會是固定的。

const obj = {
	name:'Ryder'
}
const Fn1 = () => {
	console.log(this) }
function Fn2(){
	console.log(this)
}
Fn1.call(obj) // Window
Fn2.call(obj) // {name: 'Ryder'}