箭头函数与this指向-优快云博客

箭头函数

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

回顾：this

通过对象调用函数，this指向对象
直接调用函数，this指向全局对象
通过new调用函数，this指向新创建的对象
通过apply，call，bind调用函数，this指向指定的数据
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()//执行此函数