关于this指向的问题,想必困扰了很多初学JavaScript的同学,一会指向这个一会指向那个,让初学者一脸懵逼。今天我们就来聊聊js面向对象里this的指向问题,让初学者看完对this有个大概的了解,不再对其有恐惧的感觉。
1.构造函数
第一种情况我们聊聊在构造函数里this的指向问题。看下面的代码:
function Person(){
this.name='老王';
this.age='99';
console.log(this)//Person {'name':'老王','age':'99'}
}
var p1=new Person();
console.log(p1.name)//'老王'
从上面的代码中我们看到this打印出来是一个对象'name':'老王','age':'99'},而这个对象的两个属性竟然和构造函数Person中的两个属性一样,这是巧合吗?答案当然不是了,哪有那么多巧合。在构造函数中this的指向就是构造函数本身,当然,我们使用这个函数的时候也是把他当做构造函数来使用的,所以打印出来那么对象也没那么奇怪了。
那么p1.name为什么打印出来是‘老王’,因为p1是构造函数的Person的实例化出来的,所以p1继承了Person的属性,你要问我为什么,那么请看我关于原型和原型链的详细理解这篇文章,你就会明白,本文就不过多的阐述了。
2.函数作为对象的一个属性
函数作为对象的一个属性,并且作为对象的一个属性被调用时,这种情况下this的指向和上面作为构造函数的this指向不一样了。看下面代码:
var obj={
'name':'老王',
'age':'99',
'box':function(){
console.log(this);//obj{'name':'老王','age':'99','box':function}
}
}
obj.box();
以上代码中,box不仅作为一个对象的一个属性,而且的确是作为对象的一个属性被调用。结果this就是obj对象。
那么会不会有这种情况,这个函数不是作为对象的一个属性被调用?有,这种情况可以有。但是此时this的指向又发生了变化。还是看代码:
var obj={
'name':'老王',
'age':'99',
'box':function(){
console.log(this);
}
}
var fn=obj.box
fn();
这种情况下大家猜一下this打印出来的是什么?
答案是Window,为什么?来,跟着我的思路走。
在上面的代码中我定义了一个全局变量fn,并且赋值为obj.box,那么此时obj.box就已经发生变化了,fn是全局变量,属于window,那么此时this指向window。
3.函数用call或者apply调用
当一个函数被call和apply调用时,this的值就取传入的对象的值。至于call和apply如何使用,不会的同学可以去查查其他资料,这里就不做详细讲解了,因为比较简单。
4.全局 & 调用普通函数
在全局下,this永远指向的都是window,这个谁还有异议可以面壁思过去了。
普通函数在调用时,其中的this也都是window。看代码:
var a='厉害了我的哥';
var box=function(){
console.log(this.a);//厉害了我的哥'
}
box();
普通函调用时为什么this会指向window呢?还是作为全局变量的问题。
5.特殊情况
为什么还有特殊情况呢,请大家注意一个点,this的指向在定时器setTimeout和setInterval会发生变化。但是变化是什么呢?各位同学去百度,上班时间写文章怕被抓。