JS中this的指向问题
  • 2020 年 05 月 06 日
  • 945 次阅读
  • 918 字
  • 112 条评论


众所周知,this的指向问题一直是JS中比较难的问题,很多时候我们都搞不清this到底指向的谁。今天,我就来给大家讲一下this的指向问题。

一句话概括:谁调用this,this就指向谁。

接下来给大家举几个简单的例子:

var lilei = {
            name : "lilei",
            age : 18,
            say : function() {
                console.log(`我叫${this.name},今年${this.age}`);
            }
        }

        lilei.say();    // 调用lilei的say方法

大家都知道上述例子中返回的结果为:“我叫lilei,今年18”  。可大家知道这其中的原理是什么吗?

首先,我们得明白一个问题,为什么此例中的say方法要获取自己对象中的name和age属性要加this.?

如果不加this. 会怎样?很显然,会报错,因为say方法的作用域中不存在name和age属性。有朋友会说,say方法、name和age属性不都是属于 lilei 这个对象嘛,他们应该是属于同一个作用域,按理来说都可以彼此访问啊。

这里我们得弄清楚一个问题,对象到底有没有作用域?答案是:没有。

为什么:因为JS只有全局作用域(window)和局部作用域(函数内部)2种作用域,而对象刚好两者都不是。

所以:我们调用say方法时,say方法会在他的作用域链中进行寻找,到底有没有name和age属性,显而易见,say的局部作用域中没有,那么    就在window中寻找,刚好window中也没有。所以不加this.结果就会报错。

而我们要想访问,就得用this,加了this 的属性就会等待被调用,这里的say方法是被lilei调用的,按照最上面所说的,谁调用this,this就指向谁。那么这里的this.name和this.age就指的是lilei对象中的name和age属性的值。所以,会返回 “我叫lilei,今年18”。

接下来,再举个例子来应证这句话:“谁调用this,this就指向谁”。

   var lilei = {
            name : "lilei",
            sex : "male",
            age : 18,
            say : function() {
                console.log(`我叫${this.name},今年${this.age}`);
            }
        }

        lilei.say();    // 调用lilei的say方法


        var mike = {
            name : "mike",
            age : 20
        }

        mike.say = lilei.say;    // 将lilei对象中的say方法赋给mike的say方法(mike没有say方法就会创建一个say方法)
        mike.say();              // 调用mike的say方法

    var say = lilei.say;    //将lilei对象中的say方法赋给一个新的变量
    say();                  //调用say方法

我们先讲mike.say()会返回什么?这里赋值之后,有的朋友可能会认为,既然是lilei的say方法,那么mike的say方法应该是指向的lilei的say方法。依然会返回“我叫lilei,今年18”。可结果却恰恰相反,返回的是“我叫mike,今年20”。

按照我们所说的口诀:“谁调用this,this就指向谁”。那么这里this指向的就是mike对象,刚好mike对象中有name和age属性,可直接进行调用。所以,这里返回的结果就是:“我叫mike,今年20”。

再来讲最后面的say()会返回什么,这里我们是将lilei对象中的say方法赋给了say变量,如果按照上面有的朋友认为的,那么应该会继承lilei中的say方法,返回“我叫lilei,今年18”。但是结果却不尽人意,并是不。

同样,按照我们所说的口诀,“谁调用this,this就指向谁”。那么这里的this就指向了全局window,有的朋友说为什么是全局window,这里的say() 实际上就等同于 window.say(),所以就是window调用了say方法,this就指向了window,同时,say方法就会去window中找寻name和age属性的值,但是我们这里并没有在window全局作用域中声明name和age属性,因此就没找到,所以这里返回的结果就是undefined未定义。

以上就是关于this的指向问题,可能有些地方没讲明白,希望见谅,如果有不懂的地方或者有什么意见或建议,请在下方留言或者联系本人。

谢谢大家的观看,希望大家多多关注我,本人会不定期为大家更新相关资源与教程。


版权属于:Promise

本文链接:http://smalll.cn/archives/4/


JavaScript

—— 收到 112 条评论 ——

    2021 年 08 月 05 日 20:04
    2021 年 08 月 05 日 18:46
    2021 年 08 月 05 日 17:40
    2021 年 08 月 05 日 10:01
    2021 年 08 月 05 日 09:14
    2021 年 08 月 05 日 08:48
    2021 年 08 月 05 日 05:21
    2021 年 08 月 04 日 10:49
    2021 年 08 月 04 日 08:38

    female viagra nz - sildenafil 50mg otc viagra 120mg pills

    2021 年 08 月 04 日 06:45
    2021 年 08 月 04 日 06:35
    2021 年 08 月 03 日 21:58
    2021 年 08 月 03 日 16:01
    2021 年 08 月 03 日 12:52
    2021 年 08 月 03 日 07:28
    2021 年 08 月 03 日 06:51
    2021 年 08 月 03 日 05:10
    2021 年 08 月 02 日 23:23
    2021 年 08 月 02 日 17:47
    2021 年 08 月 02 日 17:16
    2021 年 08 月 02 日 16:57
    2021 年 08 月 02 日 16:54
    2021 年 08 月 02 日 15:07
    2021 年 08 月 02 日 14:06
    2021 年 08 月 02 日 11:06
    2021 年 08 月 02 日 04:13

    order clomid 50mg - clomid tablets clomid online

    2021 年 08 月 02 日 00:51
    2021 年 08 月 01 日 20:04
    2021 年 08 月 01 日 14:30
    2021 年 08 月 01 日 14:03
    2021 年 08 月 01 日 09:51
    2021 年 08 月 01 日 09:14
    2021 年 08 月 01 日 04:26
    2021 年 07 月 31 日 23:08
    2021 年 07 月 31 日 19:09
    2021 年 07 月 31 日 12:24
    2021 年 07 月 31 日 03:27
    2021 年 07 月 30 日 22:10

    free local personals
    bbb dating site

    2021 年 07 月 30 日 13:44
    2021 年 07 月 30 日 13:23

    furosemide 20 mg over the counter - lasix 80 mg lasix 500 mg tablet

    2021 年 07 月 30 日 09:27
    2021 年 07 月 30 日 08:52
    2021 年 07 月 30 日 07:59
    2021 年 07 月 30 日 06:14
    2021 年 07 月 29 日 23:16
    2021 年 07 月 29 日 22:58
    2021 年 07 月 29 日 20:37
    2021 年 07 月 29 日 19:26
    2021 年 07 月 29 日 18:04
    2021 年 07 月 29 日 06:25

    buy azithromycin zithromax - zithromax antibiotic azithromycin 500mg dose

    2021 年 07 月 29 日 06:13
    2021 年 07 月 29 日 06:00
    2021 年 07 月 29 日 05:54
    2021 年 07 月 29 日 03:55
    2021 年 07 月 28 日 20:11
    2021 年 07 月 28 日 20:06
    2021 年 07 月 28 日 18:24
    2021 年 07 月 28 日 17:18
    2021 年 07 月 28 日 16:13
    2021 年 07 月 28 日 13:39
    2021 年 07 月 28 日 05:50
    2021 年 07 月 28 日 04:05
    2021 年 07 月 28 日 02:22
    2021 年 07 月 27 日 22:07
    2021 年 07 月 27 日 20:13
    2021 年 07 月 27 日 18:54
    2021 年 07 月 27 日 17:36
    2021 年 07 月 27 日 14:05
    2021 年 07 月 27 日 12:58
    2021 年 07 月 27 日 12:19
    2021 年 07 月 27 日 10:31

    buy modafinil online - provigil generic modafinil online

    2021 年 07 月 27 日 09:44
    2021 年 07 月 27 日 05:21
    2021 年 07 月 26 日 21:51
    2021 年 07 月 26 日 21:13
    2021 年 07 月 26 日 11:30
    2021 年 07 月 26 日 09:25
    2021 年 07 月 26 日 04:09
    2021 年 07 月 25 日 23:52
    2021 年 07 月 25 日 16:45
    2021 年 07 月 25 日 16:29
    2021 年 07 月 25 日 14:52
    2021 年 07 月 25 日 12:52

    deltasone 40 mg - order prednisone 10mg online order prednisone 5mg online

    2021 年 07 月 24 日 19:41
    2021 年 07 月 24 日 12:08

    ivermectin humans - ivermectin 5ml ivermectin topical

    2021 年 07 月 24 日 08:46
    2021 年 07 月 24 日 03:52
    2021 年 07 月 23 日 21:43
    2021 年 07 月 23 日 07:49

    tadalafil max dose - pharmacy websites tadalafil tablets for sale

    2021 年 07 月 22 日 23:18
    2021 年 07 月 22 日 22:51
    2021 年 07 月 22 日 04:42

    viagra 100 mg tablet price in india - viagra india price how can i order viagra online

    2021 年 07 月 21 日 00:25

    buy amoxicillin 500 mg - buy amoxicilina 500 mg amoxicillin sale

    2021 年 07 月 20 日 00:24

    lyrica cap - ed drugs canadian international pharmacy association

    2021 年 07 月 19 日 00:39

    how to get accutane prescription online - accutane cost canada accutane generic price

    2021 年 07 月 17 日 23:39

    ivermectin order online - stromectol uk buy stromectol oral

    2021 年 07 月 16 日 23:12

    tadalafil generic price in india - tadalafil 10mg buy tadalafil 5mg tablets india

    2021 年 07 月 16 日 01:25

    where to buy ivermectin - ivermectina stromectol 3 mg

    2021 年 07 月 14 日 22:50

    order vardenafil online canada - generic vardenafil usa vardenafil coupon

    2021 年 07 月 13 日 23:32

    amoxicillin no prescription - cvs amoxicillin price where to buy amoxicillin 500 mg

    2021 年 07 月 13 日 00:16

    purchase accutane online - accutane online order where can i purchase accutane

    2021 年 07 月 09 日 22:52

    prednisone 475 - prednisone medication buy prednisone online without a prescription

    2021 年 07 月 08 日 10:36

    free ed pills - new ed drugs erectile dysfunction treatment options

    2021 年 07 月 07 日 06:27

    cheap priligy 60mg - buy priligy online otc cialis 2017

    2021 年 07 月 04 日 22:28

    Uhoqfq - cheapest ed pills online Nenlji