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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,406评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,976评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,302评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,366评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,372评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,457评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,872评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,521评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,717评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,523评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,590评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,299评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,859评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,883评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,127评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,760评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,290评论 2 342

推荐阅读更多精彩内容

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