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 对象