让你彻底明白this的指向问题

关于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会发生变化。但是变化是什么呢?各位同学去百度,上班时间写文章怕被抓。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,268评论 0 4
  • 1. this之谜 在JavaScript中,this是当前执行函数的上下文。因为JavaScript有4种不同的...
    百里少龙阅读 1,023评论 0 3
  • 终于读完了这本书,想要记录一些东西。说来惭愧,很早就知道这本书,却到现在才真正的静下心读完它。因为以前只看对自己有...
    梓梦柔阅读 462评论 0 1
  • 在朋友圈里晒张旅游门票,有人就说好幸福,在微博里随便发张风景图,就有人说光调的好,好久不联系的同学问我在干嘛,我说...
    言嘉辰阅读 450评论 0 2
  • 每个人多多少少都会有些不为人知或让人觉得不可思议的习惯,在其他人眼里可能就是所谓的异类,或者奇葩。 究竟要怎么界定...
    鬼目春阅读 480评论 2 0