十分钟带你搞懂箭头函数和普通函数的this指向

这里呢，首先我们要知道，都在哪里需要使用到this，然后在进一步的去测试它的this指向是什么就比如说普通函数，箭头函数，构造函数等地方使用到了this指向，这个文章我来带大家十分钟了解普通函数和箭头函数的this指向，他们的this指向有什么不同

先来聊聊普通函数的this指向

普通函数的this指向就比较容易理解
普通函数被调用也是分多种情况的

1.普通函数如果在全局中被调用

如下图所示：

function one(){
	//这里可以用console.log来在控制台打印输出看一下this指向了哪里
	console.log(this)
}
one()
//调用one函数可以看到它的this指向了window
//其实这里直接调用也可以理解是 window.one() window调用了one函数

来看看上面console.log的结果
确实了全局调用函数说明了它的this指向window

2.普通函数作为对象的属性时 1

如下图所示：

var obj_1={
	name:'obj_1',
	one:function (){
		//这里也是可以用console.log来在控制台打印输出看一下this指向了哪里
		console.log(this)
	},
	two:function (){
		//这里也是可以用console.log···
		console.log(this)
	}
}
obj_1.one();//这里调用之后可以看到one和two属性的this是指向调用的this
obj_1.two();

来看看上面console.log的结果

确切了普通函数this指向调用者本身

3.普通函数作为对象的属性时 2

如下图所示：

var obj_1={
	name:'obj_1',
	one:function (){
		//这里也是可以用console.log来在控制台打印输出看一下this指向了哪里
		console.log(this)
	},
	two:function (){
		//这里也是使用了一个return返回了一个函数
		return function (){
			console.log(this)
		}
	}
}
obj_1.one();//这里调用之后可以看到one属性的this是指向调用的this
obj_1.two()();//但是这里调用two属性内的函数需要两对括号才能调用到函数
//这里也可以知道其this的指向也就跟之前的不同了
//它的this是指向window的
//看到这里你可能没有看懂，但其实非常容易理解
//就是two属性被obj_1调用了之后把two属性内部的函数抛给了window让window调用
//所以这个函数的this指向了window
//也可以把其理解为(obj_1.two()) () 前面是一部分，后面又是一部分

来看看上面console.log的结果

第一个打印结果指向了调用的对象
第二个指向了window

综上所述
可以得知普通函数的this指向了调用者本身
函数的自调用就是被window给调用了

再来聊聊箭头函数的this指向

箭头函数的this指向也是比较容易理解
箭头函数被调用同样也是分多种情况的

1.当箭头函数在全局中被调用时

如下图所示：

var name='window';
(()=>{
	console.log(this)//这里箭头函数的自调用的this指向也是window
})()

console打印结果如下

这里可以看到箭头函数自调用虽然被调用了但是它的this指向了window
这里是因为箭头函数本身没有this指向他虽然是自调用但是它自动追到上下文的this指向但是这里只有箭头函数自己所以this指向了window对象
下面继续看箭头函数的this指向

2.箭头函数被当做对象的属性时

加粗样式

var name='window';
var obj_1={
	name:'obj1_1',
	one:()=>{
		console.log(this)
	}
}
obj_1.one();//这里调用之后可以知道它的this还是指向window

看一下打印结果

唉！这里你蒙了吧，为什么这里还是window呀
不要急不要慌
我来给你剖析剖析
首先呢我们要知道箭头函数的this到底指向了什么
唉这重点不就来了，因为箭头函数this指向其上下文最近的this指向，这个obj_1是离这个箭头函数最近的，所以我们得先知道，这个obj_1对象的this指向了什么，因为它的父级对象是window对象，可以知道obj_1的this指向为window，所以我们可以知道这个箭头函数的this指向了obj_1的this指向，所以这个箭头函数的this指向指向了obj_1的this指向window。

然后总结一下啊
1. 普通函数的this指向是指向起调用者，被谁调用this就指向谁
2. 箭头函数的this指向是指向其上下文最近的this指向，其最近的对象this指向的是谁，那么这个箭头函数的this就指向谁
3. 我们可以用bind，apply，call来改变普通函数的this指向，但是箭头函数就更该不了this指向了

关于箭头函数和普通函数的this指向就说这么多，散会