理解作用域链

你的名字 2023-07-22 04:58 38阅读 0赞

先来看两个例子

var x = 10;
    
    bar();   //10
    function foo(){
      console.log(x);
    }
    
    function bar(){
      var x = 30;
      foo();
    }

解析

执行bar,相当于执行foo(),foo里面要输出x,我们首先要从foo自己的作用域下面去找
        foo里边是没有声明x的，然后我们会到foo的词法作用域去找，也就是声明foo的作用域去找。
        在这里foo的词法作用域就是全局作用域，全局作用域里声明的x=10，所以输出10

var x = 10;
        bar();  //30
    
        function bar(){
           var x = 30;
           function foo(){
               console.log(x); 
          }
           foo();
       }

解析

执行bar(),就会执行foo().foo里输出x,我们首先找foo的作用域里，发现没有声明x
        那就接着找foo的词法作用域。也就是声明foo的作用域，发现有x=30,于是输出了30

--------------------

### 几个相关的概念 ###

一 、execution context (执行上下文，也叫执行环境)：

*  执行上下文定义了变量和函数有权访问的其他数据。
 *  每个执行环境，都有一个与之关联的变量对象(variable object).环境中定义的所有变量和函数都保存在这个对象中。（我们编写的代码无法访问这个对象，但是解析器可以）
 *  全局执行环境，是最外围的一个执行环境，在WEB浏览器中，全局执行环境被认为是 window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的。
 *  某个执行环境中的所有代码都执行完毕之后，该环境被销毁，保存在其中的所有变量和函数定义，也随之销毁。（全局执行环境，直到应用程序退出——例如关闭管业或浏览器时才会被销毁）
 *  每个函数都有自己的执行环境

二 、scope chain（作用域链），activation object(活动对象)

*  当代码在一个环境中执行时，会创建变量对象的一个作用域链。
 *  作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。活动对象在最开始只包含一个arguments对象（这个对象在全局执行环境中是不存在的）
 *  作用域链中的下一个变量对象来自包含（外部）环境，以此类推，一致延续到全局执行环境。
 *  全局执行环境的变量对象，始终都是作用域链中的最后一个对象。

三 、\[\[Scope\]\]属性

*  函数是特殊的可执行对象。
 *  既然是对象，就可以拥有属性。
 *  函数中存在着一个内部属性\[\[Scope\]\]（我们不能使用，供JS引擎使用）
 *  函数被创建时，这个内部属性就会包含函数被创建的作用域中对象的集合。
 *  这个集合呈链式连接，被称为函数的作用域链
 *  作用域链上的每一个对象被称为变量对象（variable object）
 *  每一个变量对象都以键值对形式存在

--------------------

### 执行顺序 ###

//范例1
            var x = 10;
    
            bar();  //10
            function foo() {
                console.log(x);
            }
    
            function bar() {
                var x = 30;
                foo();

首先

1.代码在一开始会有声明前置,
          var x ;
          funciton bar();
          funciton foo();
          之后再去执行 x=10;
    
          在一开始的时候，这个执行环境叫全局执行环境（global Context）,也就是全局作用域。
    
          全局执行环境里包含了两个对象，一个是活动对象（AO），一个是Scope属性
          global Context = {
              AO : {
                  x : 10;
                  bar : function;
                  foo : function;
               },
              Scope:null
           }
    
        声明bar时  得到下面：
        bar().[[Scope]]  = global Context.AO
        声明foo时  得到下面：
        foo().[[Scope]]  = global Context.AO
        
        执行代码的时候，当我们需要一个值，会首先从它的活动对象里去找，如果找不到就要到它的[[Scope]] 里去找。
    
       2.当调用bar()时，进入bar的执行上下文
        因为bar里值声明了一个x,所以bar的活动对象里只有一个x
        barContext = {
          AO : {
              X : 30
          },
          Scope :bar.[[Scope]]   //global Context.AO
        }
        
       3. 当调用foo()的时候，进入foo的执行上下文
        fooContext = {
        //foo里没有声明变量，foo也没有参数，所以foo的活动对象是空的
        AO:{}
        Scope:foo.[[Scope]]    //global Context.AO
      }