ES6 箭头函数

箭头函数

箭头函数改变了this指向多年来的问题

回顾：this

1. 通过对象调用函数，this指向对象
2. 直接调用函数，this指向全局对象
3. 通过new调用函数，this指向新创建的对象
4. 通过apply，call，bind调用函数，this指向指定的数据
5. DOM事件函数，this指向事件源

让我们来举个栗子

	//首先我们创建一个对象
	const obj = {
		count : 0,//声明一个属性0
		start : function () {
			setInterval(function () {//调用计时器
				this.count++;//每隔一秒++
				console.log(this.count);//输出
			}, 1000)
		}
	}
	obj.start()//执行此函数

这样看每次输出时是不是都会输出count++之后的值1, 2，3, 4，5但事实不是这样。
它每次输出的是NaN

为什么会是这样呢，那是因为在执行函数时是正常调用，函数指向的是obj，而函数里面的计时器调用时则不是直接调用的，而是window调用的，所以在执行时this默认指向window也就导致了输出时是NaN了，这是一个典型的this默认指向的问题。

以前我们怎么解决呢，一般是在this还未变化指向正确时，将this重新附给一个新的变量，但有时这样的嵌套多了，会非常的恶心，不但导致代码量臃肿不好看，而且这种this变量多了你就需要嵌套更多，声明更多，会很麻烦。

所以为了让我们使用this更加简洁，方便ES6出来了箭头函数

使用语法

箭头函数是一个表达式，理论上，任何使用函数表达式的场景都可以使用箭头函数。

完整语法：

	(参数一, 参数二, ...) =>{
		//函数体
	}

如果参数只有一个，可以省略小括号

	参数 => {
	
	}

如果箭头函数只有一条返回语句可以省略大括号，和return关键字

	参数 => 返回值

如果返回的是一个对象时
因为我们不可能返回一个带有大括号的表达式，会被认为是一个函数体，会出现问题。
所以只需要将返回的对象用小括号括起来就行，该返回语句会被认为是表达式

	参数 => (返回值)

此时我们就可以对上面的案例进行更改了

	const obj = {
		count : 0,
		start : function () {
			setInterval(() => {//把函数换成箭头函数
				this.count++;
				console.log(this.count);//输出
			}, 1000)
		}
	}
	obj.start()//执行此函数

而此时输出的就是正常的了

注意细节

• 箭头函数的函数体中的this，取决于箭头函数，定义的位置的this指向，而与如何调用无关。
• 箭头函数中，没有自己的this、arguments、new.target、如果使用了则使用的是函数外层的对应的
• 箭头函数没有原型
• 箭头函数不能作为构造函数

应用场景

1. 临时使用函数，并不会可以调用它，比如
   1. 事件处理函数
   2. 异步处理函数
   3. 其他临时处理函数
2. 为了绑定外层this的函数
3. 在不绑定其他代码的情况下，保持代码的简洁

以上就是ES6 箭头函数的全部内容了，希望对你有用