zoukankan      html  css  js  c++  java
  • 理解 this 作用域


    理解this作用域

    转载https://github.com/AwesomeDevin/blog/issues/10


    《javascript高级程序设计》中有说到:

    this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window ,而当函数被作为某个对象调用时,this等于那个对象。不过,匿名函数具有全局性,因此this对象同常指向window

    不过,在全局函数中,this等于window,匿名函数具有全局性,因此this对象通常指向window,针对于匿名函数this具有全局性的观点仍是有争议的,可参考 https://www.zhihu.com/question/21958425

    this的指向取决于函数(不包含箭头函数)执行时的环境

    验证过程如下:

    关于闭包经常会看到这么一道题:

    var name = "The Window";
        var object = {
            name : "My Object",
            getNameFunc : function(){
                return function(){
                    return this.name;
                };
            }
        };
    console.log(object.getNameFunc()());//result:The Window


    在这里,getNameFunc return了1个匿名函数,可能你会认为这就是输出值为The Window的原因

    但是,我们再来尝试写1个匿名函数

    var name = "The Window";
     var object = {
      name : "My Object",
      getNameFunc : function(){
       return this.funAA;
      },
      funAA:function(){
       return this.name
      }
     };
     console.log(object.getNameFunc()(),object.funAA())


    可以发现,同样是匿名函数,却输出了The Window, My Object

    在作用域链中,执行函数时会创建一个称为“运行期上下文(execution context)”的内部对象,运行期上下文定义了函数执行时的环境。

    因为函数在全局作用域中被object.getNameFunc()独立调用,funAA的作用域链被初始化为undefined即window的[[Scope]]所包含的对象,导致输出结果为window.name

    对作用域链不是很了解的同学,可以查看这边文章【Javascript】深入理解javascript作用域与作用域链

    实践是检验真理的唯一标准,让我们用代码测试一下

    var name = "The Window";
     var object = {
      name : "My Object",
      getNameFunc : function(){
       return this.funAA();
      },
      funAA:function(){
       return this.name
      }
     };
    console.log(object.getNameFunc(),object.funAA())


    可以发现,输出了 My Object, My Object
    getNameFunc仍为匿名函数,但是return的是this.funAA(),此时,this.funAA变成了由object调用,验证了我们之前的猜想:

    函数执行环境影响了this作用域,对这个demo的代码不太理解的同学,可以看一下另一个比较简单的案例

    this.x = 9;   
    var module = {
      x: 81,
      getX: function() { console.log(this.x) }
    };
    

    module.getX(); // 81

    var retrieveX = module.getX;
    function A(){
    this.x = 22;
    retrieveX() //22
    }
    A()

    new运算符对this作用域的影响

    还是实践出真理,我们先来写一段代码

    var a = 2
    function test(){
        this.a = 1
        console.log(window.a)
    }
    new test()
    test()


    可以看出输出结果为2,1
    new运算符改变了test函数内this的作用域,改变的原理是通过在函数内创建一个对象obj,并通过test.call(obj),执行obj.test(),call函数原理:

    Function.prototype.call1 = function(obj,...args){
    	obj.fn = this
    	obj.fn(...args)
    	delete obj.fn
    }

    这样test函数被对象obj调用,test复制的是obj的作用域链,而不是window

    function subNew(){
        var obj = {}
        var res = test.call(obj,...arguments)
    }
    subNew()   // 作用等于new test()

    let/var/const对this作用域的影响

    继续写代码通过事实来说明

    var a = 1 // 全局作用域
    let b = 1   // 块级作用域
    const c = 1   // 块级作用域
    function foo(){
      var d = 1  // 函数作用域
      this.a = 2
      this.b = 2
      this.c = 2
      this.d = 2
      console.log(a,b,c,d) // 2,1,1,1
    }
    foo()

    a为全局作用域中的变量,可以被this对象访问,b/c/d则不行

    可以发现,全局作用域中的a变量被改变,b变量与c变量都没有被改变,说明在fn()中通过this访问不到window作用域中的b/c变量
    注:这里说的访问不到与const定义的变量是常量没有关系,因为如果访问到的话,是会报typeError的

    箭头函数对this作用域的影响

    var num = 1
    const object = {
      num:2,
      foo: function(){
        return ()=>{
          console.log(this.num)
        }
      }
    }
    object.foo()  // 2

    箭头函数 this 指向 所处环境的上下文的 this 值,与是否独立调用或作为属性被调用,没有关系。
    箭头函数没有arguments/prototype,不能作为构造函数,不能使用new

    总结

    1. this的指向取决于函数执行时所创建运行期上下文(execution context)的内部对象,它与当前运行函数的[[scope]]所包含的对象组成了1个新的对象,这个对象就是活动对象,然后此对象会被推入作用域链的前端
    2. 如果调用的函数,被某一个对象所拥有,那么该函数在调用时,内部的this指向该对象。
    3. this指向与匿名函数没有关系,如果函数在全局作用域window中被独立调用,那么该函数内部的this,则指向undefined。但是在非严格模式中,当this指向undefined时,它会被自动指向全局对象。
    4. 在函数被独立调用时,并处于非严格模式下,函数内的this对象有能力也仅能访问到全局作用域中定义的变量即window对象, 块级作用域/函数作用域内的变量都无法被访问
    5. 箭头函数 this 指向 所处环境的上下文的 this 值,与是否独立调用或作为属性被调用,没有关系。

    相关知识点

    不理解new的实践可以查看我的这篇文章【Javascript】彻底捋清楚javascript中 new 运算符的实现
    对作用域链不是很了解的同学,可以查看这边文章【Javascript】深入理解javascript作用域与作用域链

  • 相关阅读:
    不需重新编译php,安装postgresql扩展(pgsql和pdo_pgsql)
    css如何实现水平垂直居中
    win系统DOS批处理命令:每日根据定时计划,弹出相应的提醒
    使用navicat连接mysql连接错误:Lost connection to Mysql server at 'waiting for initial communication packet'
    mysql域名解析引起的远程访问过慢?
    Jquery封装: 地区选择联动插件
    Jquery封装: WebSocket插件
    Jquery封装:下拉框插件
    如何在微信小程序中使用阿里字体图标
    轻量级进度条 – Nprogress.js
  • 原文地址:https://www.cnblogs.com/chenhaonan-nickyoung/p/13986300.html
Copyright © 2011-2022 走看看