变量对象

在《javascript
之执行环境-08》文中说到,当JavaScript代码执行一段可执行代码时,会创建对应的执行上下文(execution
context)。对于每个执行上下文,都有三个重要属性:

  • 变量对象(Variable object,VO)
  • 作用域链(Scope chain)
  • this 

每个执行环境(执行上下文)都有一个对应的变量对象(variable
object),环境中形参、函数、定义的所有变量都保存在变量对象中。

你不知道的JavaScript–Item19 执行上下文(execution context)

在这篇文章里,我将深入研究JavaScript中最基本的部分——执行上下文(execution
context)。读完本文后,你应该清楚了解释器做了什么,为什么函数和变量能在声明前使用以及他们的值是如何决定的。

创建变量对象过程

因创建执行环境分为两个阶段,所以变量对象也分两个阶段来分析:

  1. 初始化(当函数被调用,未执行代码之前)
  2. 代码执行阶段(开始执行代码)

1、EC—执行环境或者执行上下文

每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文(好高大上的概念啊)。

javascript中,EC分为三种:

全局级别的代码 ––
这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境。
函数级别的代码 ––当执行一个函数时,运行函数体中的代码。 Eval的代码 ––
在Eval函数内运行的代码。

EC建立分为两个阶段:进入执行上下文(创建阶段)执行阶段(激活/执行代码)

进入上下文阶段:发生在函数调用时,但是在执行具体代码之前(比如,对函数参数进行具体化之前)
创建作用域链(Scope Chain) 创建变量,函数和参数。 求”this“的值。
执行代码阶段
变量赋值 函数引用 解释/执行其他代码。

我们可以将EC看做是一个对象。

EC={
    VO:{/* 函数中的arguments对象, 参数, 内部的变量以及函数声明 */},
    this:{},
    Scope:{ /* VO以及所有父执行上下文中的VO */}
}

现在让我们看一个包含全局和函数上下文的代码例子:

图片 1

很简单的例子,我们有一个被紫色边框圈起来的全局上下文和三个分别被绿色,蓝色和橘色框起来的不同函数上下文。只有全局上下文(的变量)能被其他任何上下文访问。

你可以有任意多个函数上下文,每次调用函数创建一个新的上下文,会创建一个私有作用域,函数内部声明的任何变量都不能在当前函数作用域外部直接访问。在上面的例子中,函数能访问当前上下文外面的变量声明,但在外部上下文不能访问内部的变量/函数声明。为什么会发生这种情况?代码到底是如何被解释的?

初始化

VO包括:

1、根据函数的参数,创建并初始化arguments object,值为默认值
undefined

2、扫描该执行上下文中的函数声明(不包括函数表达式)

      a)  找到所有的function
声明,将函数名当做属性创建,值为函数定义

      b)
 在扫描过程中如果存在重名的函数声明,那么后面的会覆盖前面的声明,函数声明与变量声明有冲突时,会忽略(以函数声明为主)

3、 扫描该执行上下文中的var变量声明

      a)
 找到所有的变量声明,将变量名当做属性创建,值初始为undefined

      b)  在扫描过程中如果存在重名的变量声明以及重名的函数声明,会忽略;

如下代码:

1     function foo(name) {
2         var age = 20;
3         function run() {}
4         var say = function() {};
5         age = 22;
6     }
7     foo('Joel');

创建执行环境时初始化的变量对象(vo)如下:

 1 foo.EC.VO = {
 2     arguments: {
 3         0: 'Joel',
 4         length: 1
 5     },
 6     name: 'Joel',//参数
 7     age: undefined,
 8     run: reference to function run(){},
 9     say: undefined    
10 }

2、ECS—执行上下文栈

一系列活动的执行上下文从逻辑上形成一个栈。栈底总是全局上下文,栈顶是当前(活动的)执行上下文。当在不同的执行上下文间切换(退出的而进入新的执行上下文)的时候,栈会被修改(通过压栈或者退栈的形式)。

压栈:全局EC—>局部EC1—>局部EC2—>当前EC
出栈:全局EC<—局部EC1<—局部EC2<—当前EC

我们可以用数组的形式来表示环境栈:

ECS=[局部EC,全局EC];

每次控制器进入一个函数(哪怕该函数被递归调用或者作为构造器),都会发生压栈的操作。过程类似javascript数组的push和pop操作。

浏览器里的JavaScript解释器被实现为单线程。这意味着同一时间只能发生一件事情,其他的行文或事件将会被放在叫做执行栈里面排队。下面的图是单线程栈的抽象视图:
图片 2

我们已经知道,当浏览器首次载入你的脚本,它将默认进入全局执行上下文。如果,你在你的全局代码中调用一个函数,你程序的时序将进入被调用的函数,并穿件一个新的执行上下文,并将新创建的上下文压入执行栈的顶部。

如果你调用当前函数内部的其他函数,相同的事情会在此上演。代码的执行流程进入内部函数,创建一个新的执行上下文并把它压入执行栈的顶部。浏览器将总会执行栈顶的执行上下文,一旦当前上下文函数执行结束,它将被从栈顶弹出,并将上下文控制权交给当前的栈。下面的例子显示递归函数的执行栈调用过程:

(function foo(i) {
    if (i === 3) {
        return;
    }
    else {
        foo(++i);
    }
}(0));

图片 3

这代码调用自己三次,每次给i的值加一。每次foo函数被调用,将创建一个新的执行上下文。一旦上下文执行完毕,它将被从栈顶弹出,并将控制权返回给下面的上下文,直到只剩全局上下文能为止。

有5个需要记住的关键点,关于执行栈(调用栈):

单线程。 同步执行。 一个全局上下文。 无限制函数上下文。
每次函数被调用创建新的执行上下文,包括调用自己。

执行阶段

在代码执行阶段,会顺序执行代码,根据代码执行顺序,修改AO(执行阶段执行环境被推入执行环境栈
VO 被激活成为AO)中变量的值  如:

 1 foo.EC.VO = {
 2       arguments: {
 3           0: 'Joel',
 4           length: 1
 5       },
 6       name: 'Joel',//形参
 7       age: 20,
 8       run: reference to function run(){},
 9       say: reference to FunctionExpression say
10  }

3、VO—变量对象

每一个EC都对应一个变量对象VO,在该EC中定义的所有变量和函数都存放在其对应的VO中。

VO分为全局上下文VO(全局对象,Global
object,我们通常说的global对象)和函数上下文的AO。

VO: {
  // 上下文中的数据 ( 函数形参(function arguments), 函数声明(FD),变量声明(var))
}

1. 进入执行上下文时,VO的初始化过程具体如下:

函数的形参(当进入函数执行上下文时)——
变量对象的一个属性,其属性名就是形参的名字,其值就是实参的值;对于没有传递的参数,其值为undefined;

函数声明(FunctionDeclaration, FD) ——
变量对象的一个属性,其属性名和值都是函数对象创建出来的;如果变量对象已经包含了相同名字的属性,则替换它的值;

变量声明(var,VariableDeclaration) ——
变量对象的一个属性,其属性名即为变量名,其值为undefined;如果变量名和已经声明的函数名或者函数的参数名相同,则不会影响已经存在的属性。
注意:该过程是有先后顺序的。

2. 执行代码阶段时,VO中的一些属性undefined值将会确定。

通过VO创建过程来看变量提升(Hoisting)

变量提升的本质就是函数在创建执行环境时变量对象初始化下了形参、函数声明、var
声明的变量;

 1 <script>
 2   function run(){
 3       console.log(name);
 4       console.log(say);
 5       var name='Joel';
 6       function say(){
 7           console.log('say');
 8       }
 9   }
10     run();
11 </script>

 

图片 4

如上代码可以理解为这样:

 1   function run(){
 2     function say(){  //Hoisting
 3           console.log('say'); 
 4       }
 5      var name=undefined; //Hoisting
 6 
 7       console.log(name);
 8       console.log(say);
 9       name='Joel';
10       
11   }
12     run();

4、AO活动对象

在函数的执行上下文中,VO是不能直接访问的。它主要扮演被称作活跃对象(activation
object)(简称:AO)的角色。
这句话怎么理解呢,就是当EC环境为函数时,我们访问的是AO,而不是VO。

VO(functionContext) === AO;

AO是在进入函数的执行上下文时创建的,并为该对象初始化一个arguments属性,该属性的值为Arguments对象。

AO = {
  arguments: {
    callee:,
    length:,
    properties-indexes: //函数传参参数值
  }
};

FD的形式只能是如下这样:

function f(){

}

当函数被调用是executionContextObj被创建,但在实际函数执行之前。这是我们上面提到的第一阶段,创建阶段。在此阶段,解释器扫描传递给函数的参数或arguments,本地函数声明和本地变量声明,并创建executionContextObj对象。扫描的结果将完成变量对象的创建。

内部的执行顺序如下:

1、查找调用函数的代码。

2、执行函数代码之前,先创建执行上下文。
3、进入创建阶段:

初始化作用域链: 创建变量对象:
创建arguments对象,检查上下文,初始化参数名称和值并创建引用的复制。
扫描上下文的函数声明:为发现的每一个函数,在变量对象上创建一个属性(确切的说是函数的名字),其有一个指向函数在内存中的引用。如果函数的名字已经存在,引用指针将被重写。
扫面上下文的变量声明:为发现的每个变量声明,在变量对象上创建一个属性——就是变量的名字,并且将变量的值初始化为undefined,如果变量的名字已经在变量对象里存在,将不会进行任何操作并继续扫描。
求出上下文内部“this”的值。

4、激活/代码执行阶段:
在当前上下文上运行/解释函数代码,并随着代码一行行执行指派变量的值。

示例

1、具体实例

function foo(i) {
    var a = ‘hello‘;
    var b = function privateB() {

    };
    function c() {

    }
}

foo(22);

当调用foo(22)时,创建状态像下面这样:

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: undefined,
        b: undefined
    },
    this: { ... }
}

真如你看到的,创建状态负责处理定义属性的名字,不为他们指派具体的值,以及形参/实参的处理。一旦创建阶段完成,执行流进入函数并且激活/代码执行阶段,看下函数执行完成后的样子:

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: ‘hello‘,
        b: pointer to function privateB()
    },
    this: { ... }
}

2、VO示例:

alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20

进入执行上下文时,

ECObject={
  VO:{
    x:
  }
};

执行代码时:

ECObject={
  VO:{
    x:20 //与函数x同名,替换掉,先是10,后变成20
  }
};

对于以上的过程,我们详细解释下。

在进入上下文的时候,VO会被填充函数声明;
同一阶段,还有变量声明“x”,但是,正如此前提到的,变量声明是在函数声明和函数形参之后,并且,变量声明不会对已经存在的同样名字的函数声明和函数形参发生冲突。因此,在进入上下文的阶段,VO填充为如下形式:

VO = {};

VO['x'] = <引用了函数声明'x'>

// 发现var x = 10;
// 如果函数“x”还未定义
// 则 x 为undefined, 但是,在我们的例子中
// 变量声明并不会影响同名的函数值

VO['x'] = <值不受影响,仍是函数>

执行代码阶段,VO被修改如下:

VO['x'] = 10;
VO['x'] = 20;

如下例子再次看到在进入上下文阶段,变量存储在VO中(因此,尽管else的代码块永远都不会执行到,而“b”却仍然在VO中)

if (true) {
   var a = 1;
} else {
   var b = 2;
}

alert(a); // 1
alert(b); // undefined, but not b is not defined

3、AO示例:

function test(a, b) {
   var c = 10;
   function d() {}
   var e = function _e() {};
   (function x() {});
}

test(10); // call

当进入test(10)的执行上下文时,它的AO为:

testEC={
    AO:{
            arguments:{
            callee:test
            length:1,
            0:10
       },
        a:10,
        c:undefined,
        d:,
        e:undefined
    }
};

由此可见,在建立阶段,VO除了arguments,函数的声明,以及参数被赋予了具体的属性值,其它的变量属性默认的都是undefined。函数表达式不会对VO造成影响,因此,(function
x() {})并不会存在于VO中。

执行 test(10)时,它的AO为:

testEC={
    AO:{
        arguments:{
            callee:test,
            length:1,
            0:10
        },
        a:10,
        c:10,
        d:,
        e:
    }
};

可见,只有在这个阶段,变量属性才会被赋具体的值。

思考题

5、提升(Hoisting)解密

在之前的JavaScript
Item中降到了变量和函数声明被提升到函数作用域的顶部。然而,没有人解释为什么会发生这种情况的细节,学习了上面关于解释器如何创建active活动对象的新知识,很容易明白为什么。看下面的例子:

(function() {

    console.log(typeof foo); // 函数指针
    console.log(typeof bar); // undefined

    var foo = ‘hello‘,
        bar = function() {
            return ‘world‘;
        };

    function foo() {
        return ‘hello‘;
    }

}());

我们能回答下面的问题:

1、为什么我们能在foo声明之前访问它?
如果我们跟随创建阶段,我们知道变量在激活/代码执行阶段已经被创建。所以在函数开始执行之前,foo已经在活动对象里面被定义了。

2、foo被声明了两次,为什么foo显示为函数而不是undefined或字符串?
尽管foo被声明了两次,我们知道从创建阶段函数已经在活动对象里面被创建,这一过程发生在变量创建之前,并且如果属性名已经在活动对象上存在,我们仅仅更新引用。
因此,对foo()函数的引用首先被创建在活动对象里,并且当我们解释到var
foo时,我们看见foo属性名已经存在,所以代码什么都不做并继续执行。

3、为什么bar的值是undefined?
bar实际上是一个变量,但变量的值是函数,并且我们知道变量在创建阶段被创建但他们被初始化为undefined。

 

执行上下文(execution context)
在这篇文章里,我将深入研究JavaScript中最基本的部分执行上下文(execution
context)。…

第一题

 1 <script>
 2     function run() {
 3         console.log(a);
 4         a = 1;
 5     }
 6     run(); // ?
 7     function say() {
 8         a = 1;
 9         console.log(a);
10     }
11     say(); // ?
12 </script>

第一段会报错:Uncaught ReferenceError: a is not defined。第二段会打印:1

1     function foo(name) {
2 
3         console.log(run);// 输出run 函数定义
4         console.log(say); //undefined
5         function run() {}
6         var say = function () {};
7     }
8     foo('Joel');

函数表达式会当做一个var 变量来处理

第二题

1     console.log(run)
2     function run() {
3         console.log(a);
4         a = 1;
5     }
6   var run=1;

输出: ƒ run() {
            console.log(a);
             a = 1;
         }

当声明的变量与函数重名时,声明的变量会忽略;

如果在第6行代码后面添加 console.log(run),那么run
值会被重置为1,因为在上下文对象创建阶段发现已经存在run的函数声明,var
变量会被忽略,当代码在真正执行到6行时run的值被改变了;

1     console.log(run)
2     function run() {
3         console.log(a);
4         a = 1;
5     }
6   var run=1;
7     console.log(run)

图片 5

全局上下文中的VO

上篇中说到执行环境分为全局执行环境,函数执行环境,在本文开篇说到每个执行环境对应一个变量对象:

每个执行环境(执行上下文)都有一个对应的变量对象(variable
object),环境中(执行上下文中)定义的所有形参、变量、函数都保存在这个对象中,那么全局执行环境是不是可以理解为也存在一个全局变量对象。

我们先了解一个概念,什么叫叫全局对象。在 W3School 中也有介绍:

全局对象是预定义的对象,作为 JavaScript
的全局函数和全局属性的占位符。通过使用全局对象,可以访问所有其他所有预定义的对象、函数和属性。

在顶层 JavaScript 代码中,可以用关键字 this
引用全局对象。但通常不必用这种方式引用全局对象,因为全局对象是作用域链的头,这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。

例如,当JavaScript 代码引用 parseInt() 函数时,它引用的是全局对象的
parseInt 属性。全局对象是作用域链的头,还意味着在顶层 JavaScript
代码中声明的所有变量都将成为全局对象的属性。

1.可以通过 this 引用,在客户端 JavaScript 中,全局对象就是 Window 对象。

console.log(this);

2.全局对象是由 Object 构造函数实例化的一个对象。

console.log(this instanceof Object);

3.预定义了一大堆函数和属性。

// 都生效
console.log(Math.random());
console.log(this.Math.random());

4.作为全局变量的宿主。

var a = 1;
console.log(this.a);

5.客户端 JavaScript 中,全局对象有 window 属性指向自身。

var a = 1;
console.log(window.a);

this.window.b = 2;
console.log(this.b);

写了这么多介绍全局对象,其实就是想说:全局上下文中的变量对象就是window

活动对象(AO)与变量对象(VO)区别

它们其实都是同一个对象,只是处于执行上下文的不同生命周期。未进入执行阶段之前,变量对象(VO)中的属性都不能访问,但是进入执行阶段之后,执行环境被压入执行环境栈变量对象(VO)转变为了活动对象(AO),里面的属性都能被访问了,然后开始进行执行阶段的操作。

总结

  1. 全局上下文的变量对象是全局对象
  2. 函数上下文的变量对象初始化,最开始只包括 arguments 对象
  3. 在创建执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
  4. 在代码执行阶段,会再次修改变量对象的属性值
  5. 创建执行环境—-》初始化变量对象(AO)(参数、函数声明、var
    变量)—》执行环境被推入栈—-》执行代码—–》VO 激活为AO
    ——》改变AO 的值

 

相关文章