再学 this

作者: 老衲不生气 | 来源:发表于2020-06-27 12:36 被阅读0次

    执行上下文主要分为三种:全局执行上下文、函数执行上下文、eval执行上下文。而this和执行上下文是相互绑定的,所以对应的this也分为全局执行上下文的this、函数执行上下文的this、eval执行上下文的this。

    1、全局执行上下文中的 this

    动手操作,在控制台中打印this

    全局执行上下文中的 this
    最终输出的是 window 对象
    结论:全局执行上下文中的 this 是指向 window 对象的

    2、函数执行上下文中的 this

    示例代码1

    function foo(){
      console.log(this)
    }
    foo()
    

    打印结果也是 window 对象。这说明在默认情况下调用一个函数,其执行上下文中的 this 也是指向 window 对象的。也就是说,foo()等同于window .foo()
    示例代码2

    
    var obj = {
      name : "老衲不生气", 
      showThis: function(){
        console.log(this)
      }
    }
    obj.showThis()
    

    执行这段代码,你可以看到,最终输出的 this 值是指向 obj 的。这说明使用对象来调用其内部的一个方法,该方法的 this 是指向对象本身的
    永远注意一点:
    this永远指向最后调用他的对象
    this永远指向最后调用他的对象
    this永远指向最后调用他的对象
    马上,看一道陷阱题:

    var obj = {
      name : "老衲不生气",
      showThis: function(){
        this.name = "俺也是风一般的男子"
        console.log(this)
      }
    }
    var foo =obj.showThis
    foo()
    

    打印出的this指向全局 window 对象。
    分析:showThis 赋给一个全局对象foo,然后再调用该对象。 this永远指向最后调用他的对象

    3、eval执行上下文的this

    上代码

    //1、
    (function(){
        eval("console.log(this)")
    })()
    //2、
    function Foo(){
      this.bar = function(){
           eval("console.log(this)")
      }
    }
    var foo = new Foo()
    foo.bar()
    

    打印结果:
    window对象
    Foo对象
    说明eval指向调用上下文的this

    4、构造函数的this

    function CreateObj(){
      this.name = "老衲不生气"
    }
    var myObj = new CreateObj()
    

    new 创建了对象 myObj,那你知道此时的构造函数 CreateObj 中的 this 到底指向了谁吗?
    首先先理解new关键字做了什么:

    • 首先创建了一个空对象 tempObj
    • 接着调用 CreateObj.call 方法,并将 tempObj 作为 call 方法的参数,这样当 CreateObj 的执行上下文创建时,它的 this 就指向了 tempObj 对象;
    • 然后执行 CreateObj 函数,此时的 CreateObj 函数执行上下文中的 this 指向了 tempObj 对象;
    • 最后返回 tempObj 对象。

    5、补充

    • 匿名函数中的this指向全局对象
    • 定时器和延时器中的this指向全局对象
    • 只有函数执行的时候才能确定this到底指向谁
    • 全局执行上下文中的 this 是指向 window 对象的。但是,JS的严格版本中指向不是windows,而是undefined.

    相关文章

      网友评论

        本文标题:再学 this

        本文链接:https://www.haomeiwen.com/subject/csmmfktx.html