这里呢,首先我们要知道,都在哪里需要使用到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.普通函数作为对象的属性时
如下图所示:
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.普通函数作为对象的属性时
如下图所示:
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指向就说这么多,散会