ES6:箭頭函數(Arrow Function)

1.語法

通常書寫匿名函數是這樣的：

function (){
	//...
}

改寫爲箭頭函數：

() => {
	//...
}

帶參數的改寫：

//單個參數
(x) => {
	//...
}
//單個參數可省略()
x => {
	//...
}
//多個參數
(x, y, z) => {
	//...
}

總結起來就是：
function去掉，()後加=>，一個參數可省略()，多個參數用逗號隔開

2.隱式返回

什麼是隱式返回？
先看一下什麼是顯式返回：

function (x){
	return x*2;
}

其中的return語句就是顯式返回
而隱式返回是箭頭函數對顯式返回的改寫，上面的代碼就可以改寫爲：

x => x*2

隱式返回極大簡化了只要簡單返回某些值的函數寫法

3.this

有以下的代碼：

const people = {
	name: 'Tom',
	say: function() {
		const sayHello = function() {
			console.log('hello ' + this.name);
		}
		sayHello();
	}
}
people.say();//打印：“hello ”

添加兩個 console.log(this) 來觀察一下

const people = {
	name: 'Tom',
	say: function() {
		console.log(this);//people
		const sayHello = function() {
			console.log(this);//Window
			console.log('hello ' + this.name);
		}
		sayHello();
	}
}
people.say();//打印：“hello ”

第一個this爲people這個對象，第二個則是Window，因爲this是在運行時綁定， people.say() 調用了say方法，所以第一個this應該指向people，第二個console是在sayHello方法中，sayHello是一個獨立的函數，它不是被people對象調用，所以this會指向Window。

通常的解決方法是添加一個self = this語句，將下面的this改爲self：

const people = {
	name: 'Tom',
	say: function() {
		const self = this;
		const sayHello = function() {
			console.log('hello ' + self.name);
		}
		sayHello();
	}
}
people.say();//打印：“hello Tom”

而使用箭頭函數可以直接解決這個問題：

const people = {
	name: 'Tom',
	say: function() {
		const sayHello = () => {
			console.log('hello ' + this.name);
		}
		sayHello();
	}
}
people.say();//打印：“hello Tom”

箭頭函數沒有自己的this值，其this值是繼承父作用域。

4.不適用場景

1️⃣定義函數的方法，且直接使用this

const p1 = {
	name: 'Tom',
	showName: function() {
		console.log(this.name);
	}
}
p1.showName(); //Tom

const p2 = {　　　　
	name: 'Tom',
	showName: () => {
		console.log(this.name);
	}
}
p2.showName(); //空

因爲箭頭函數的this值繼承父作用域，所以上面代碼直接定義使用this的函數時，this實際指向的是Window
2️⃣需要動態this時，如addEventListener

<button id="helloBtn">click</button>

const button = document.getElementById('helloBtn');
button.addEventListener('click', () => {
     this.innerText = 'hello!';
}); //無法實現

3️⃣使用new 操作符或prototype 屬性

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

var Foo = () => {};
console.log(Foo.prototype); // undefined

4️⃣使用Arguments 對象