这里呢,首先我们要知道,都在哪里需要使用到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对象

确实了全局调用函数说明了它的this指向window

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

如下图所示:

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指向_构造函数_02

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

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

如下图所示:

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的结果

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

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

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

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

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

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

如下图所示:

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

console打印结果如下

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

这里可以看到箭头函数自调用虽然被调用了但是它的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

看一下打印结果

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

唉!这里你蒙了吧,为什么这里还是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指向就说这么多,散会