JavaScript的执行上下文

在JavaScript的运行过程中,经常会遇到一些"奇怪"的行为,不理解为什么JavaScript会这么工作。

这时候可能就需要了解一下JavaScript执行过程中的相关内容了。

执行上下文

在JavaScript中有三种代码运行环境:

  • Global Code

    • JavaScript代码开始运行的默认环境
  • Function Code
    • 代码进入一个JavaScript函数
  • Eval Code
    • 使用eval()执行代码

为了表示不同的运行环境,JavaScript中有一个执行上下文(Execution context,EC)的概念。也就是说,当JavaScript代码执行的时候,会进入不同的执行上下文,这些执行上下文就构成了一个执行上下文栈(Execution context stack,ECS)

例如对如下面的JavaScript代码:

var a = "global var";

function foo(){
    console.log(a);
}

function outerFunc(){
    var b = "var in outerFunc";
    console.log(b);

    function innerFunc(){
        var c = "var in innerFunc";
        console.log(c);
        foo();
    }

    innerFunc();
}

outerFunc()

代码首先进入Global Execution Context,然后依次进入outerFunc,innerFunc和foo的执行上下文,执行上下文栈就可以表示为:

当JavaScript代码执行的时候,第一个进入的总是默认的Global Execution Context,所以说它总是在ECS的最底部。

对于每个Execution Context都有三个重要的属性,变量对象(Variable object,VO),作用域链(Scope chain)和this。这三个属性跟代码运行的行为有很重要的关系,下面会一一介绍。

当然,除了这三个属性之外,根据实现的需要,Execution Context还可以有一些附加属性。

VO和AO

从上面看到,在Execution Context中,会保存变量对象(Variable object,VO),下面就看看变量对象是什么。

变量对象(Variable object)

变量对象是与执行上下文相关的数据作用域。它是一个与上下文相关的特殊对象,其中存储了在上下文中定义的变量和函数声明。也就是说,一般VO中会包含以下信息:

  • 变量 (var, Variable Declaration);
  • 函数声明 (Function Declaration, FD);
  • 函数的形参

当JavaScript代码运行中,如果试图寻找一个变量的时候,就会首先查找VO。对于前面例子中的代码,Global Execution Context中的VO就可以表示如下:

注意,假如上面的例子代码中有下面两个语句,Global VO仍将不变。

(function bar(){}) // function expression, FE
baz = "property of global object"

也就是说,对于VO,是有下面两种特殊情况的:

  • 函数表达式(与函数声明相对)不包含在VO之中
  • 没有使用var声明的变量(这种变量是,"全局"的声明方式,只是给Global添加了一个属性,并不在VO中)

活动对象(Activation object)

只有全局上下文的变量对象允许通过VO的属性名称间接访问;在函数执行上下文中,VO是不能直接访问的,此时由激活对象(Activation Object,缩写为AO)扮演VO的角色。激活对象 是在进入函数上下文时刻被创建的,它通过函数的arguments属性初始化。

Arguments Objects 是函数上下文里的激活对象AO中的内部对象,它包括下列属性:

  1. callee:指向当前函数的引用
  2. length: 真正传递的参数的个数
  3. properties-indexes:就是函数的参数值(按参数列表从左到右排列)

对于VO和AO的关系可以理解为,VO在不同的Execution Context中会有不同的表现:当在Global Execution Context中,可以直接使用VO;但是,在函数Execution Context中,AO就会被创建。

当上面的例子开始执行outerFunc的时候,就会有一个outerFunc的AO被创建:

通过上面的介绍,我们现在了解了VO和AO是什么,以及他们之间的关系了。下面就需要看看JavaScript解释器是怎么执行一段代码,以及设置VO和AO了。

细看Execution Context

当一段JavaScript代码执行的时候,JavaScript解释器会创建Execution Context,其实这里会有两个阶段:

  • 创建阶段(当函数被调用,但是开始执行函数内部代码之前)

    • 创建Scope chain
    • 创建VO/AO(variables, functions and arguments)
    • 设置this的值
  • 激活/代码执行阶段
    • 设置变量的值、函数的引用,然后解释/执行代码

这里想要详细介绍一下"创建VO/AO"中的一些细节,因为这些内容将直接影响代码运行的行为。

对于"创建VO/AO"这一步,JavaScript解释器主要做了下面的事情:

  • 根据函数的参数,创建并初始化arguments object
  • 扫描函数内部代码,查找函数声明(Function declaration)
    • 对于所有找到的函数声明,将函数名和函数引用存入VO/AO中
    • 如果VO/AO中已经有同名的函数,那么就进行覆盖
  • 扫描函数内部代码,查找变量声明(Variable declaration)
    • 对于所有找到的变量声明,将变量名存入VO/AO中,并初始化为"undefined"
    • 如果VO/AO中已经存在同名的变量,就什么也不做,继续扫描

看下面的例子:

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

    };
    function c() {

    }
}

foo(22);

对于上面的代码,在"创建阶段",可以得到下面的Execution Context object:

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

在"激活/代码执行阶段",Execution Context object就被更新为:

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

例子分析

前面介绍了Execution Context,VO/AO等这么多的理论知识,当然是为了方便我们去分析代码中的一些行为。这里,就通过几个简单的例子,结合上面的概念来分析结果。

Example 1

首先看第一个例子:

(function(){
    console.log(bar);
    console.log(baz);

    var bar = 20;

    function baz(){
        console.log("baz");
    }

})()

在Chrome中运行代码运行后将输出:

代码解释:匿名函数会首先进入"创建结果",JavaScript解释器会创建一个"Function Execution Context",然后创建Scope chain,VO/AO和this。根据前面的介绍,解释器会扫描函数和变量声明,如下的AO会被创建:

所以,对于bar,我们会得到"undefined"这个输出,表现的行为就是,我们在声明一个变量之前就访问了这个变量。这个就是JavaScript中"Hoisting"。

Example 2

接着上面的例子,进行一些修改:

(function(){
    console.log(bar);
    console.log(baz);

    bar = 20;
    console.log(window.bar);
    console.log(bar);

    function baz(){
        console.log("baz");
    }

})()

运行这段代码会得到"bar is not defined(…)"错误。当代码执行到"console.log(bar);"的时候,会去AO中查找"bar"。但是,根据前面的解释,函数中的"bar"并没有通过var关键字声明,所有不会被存放在AO中,也就有了这个错误。

注释掉"console.log(bar);",再次运行代码,可以得到下面结果。"bar"在"激活/代码执行阶段"被创建。

Example 3

现在来看最后一个例子:

(function(){
    console.log(foo);
    console.log(bar);
    console.log(baz);

    var foo = function(){};

    function bar(){
        console.log("bar");
    }

    var bar = 20;
    console.log(bar);

    function baz(){
        console.log("baz");
    }

})()

代码的运行结果为:

代码中,最"奇怪"的地方应该就是"bar"的输出了,第一次是一个函数,第二次是"20"。

其实也很好解释,回到前面对"创建VO/AO"的介绍,在创建VO/AO过程中,解释器会先扫描函数声明,然后"foo: <function>"就被保存在了AO中;但解释器扫描变量声明的时候,虽然发现"var bar = 20;",但是因为"foo"在AO中已经存在,所以就没有任何操作了。

但是,当代码执行到第二句"console.log(bar);"的时候,"激活/代码执行阶段"已经把AO中的"bar"重新设置了。

总结

本文介绍了JavaScript中的执行上下文(Execution Context),以及VO/AO等概念,最后通过几个例子展示了这几个概念对我们了解JavaScript代码运行的重要性。

通过对VO/AO在"创建阶段"的具体细节,如何扫描函数声明和变量声明,就可以对JavaScript中的"Hoisting"有清晰的认识。所以说,了解JavaScript解释器的行为,以及相关的概念,对理解JavaScript代码的行为是很有帮助的。

后面会对Execution Context中的Scope chain和this进行介绍。

时间: 2024-10-07 05:06:48

JavaScript的执行上下文的相关文章

了解JavaScript的执行上下文

转自http://www.cnblogs.com/yanhaijing/p/3685310.html 什么是执行上下文? 当JavaScript代码运行,执行环境非常重要,有下面几种不同的情况: 全局代码--你的代码首次执行的默认环境. 函数代码--每当进入一个函数内部. Eval代码--eval内部的文本被执行时. 在网上你能读到许多关于作用域(scope)的资源,本文的目的是让事情变得更简单,让我们将术语执行上下文想象为当前被执行代码的环境/作用域.说的够多了,现在让我们看一个包含全局和函数

深入理解JavaScript系列+ 深入理解javascript之执行上下文

http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/details/37761919    深入理解javascript之执行上下文(execution context)

深入理解Javascript之执行上下文(Execution Context)

在这篇文章中,将比较深入地阐述下执行上下文 - Javascript中最基础也是最重要的一个概念.相信读完这篇文章后,你就会明白javascript引擎内部在执行代码以前到底做了些什么,为什么某些函数以及变量在没有被声明以前就可以被使用,以及它们的最终的值是怎样被定义的.什么是执行上下文 Javascript中代码的运行环境分为以下三种: 全局级别的代码 - 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境. 函数级别的代码 - 当执行一个函数时,运行函数体中的代码. Eva

【深入理解javascript】执行上下文

参考原文:执行上下文 1.每一个执行上下文,工作分为三个阶段: 准备阶段–>执行阶段–>调用阶段 准备阶段:代码执行之前,设置数据,相当于初始化. 执行阶段:开始执行每一行代码. 调用阶段:可能没有.如果有函数调用,产生新的执行上下文.函数每被调用一次,都会产生一个新的执行上下文环境. 2.代码段 javascript在执行一个代码段之前,都会进行"准备工作"来生成执行上下文.这个"代码段"其实分三种情况--全局代码,函数体,eval代码. 全局代码是一

理解Javascript之执行上下文(Execution Context)

1>什么是执行上下文 Javascript中代码的运行环境分为以下三种: 全局级别的代码 - 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境. 函数级别的代码 - 当执行一个函数时,运行函数体中的代码. Eval的代码 - 在Eval函数内运行的代码. javascript是一个单线程语言,这意味着在浏览器中同时只能做一件事情.当javascript解释器初始执行代码,它首先默认进入全局上下文.每次调用一个函数将会创建一个新的执行上下文. 每次新创建的一个执行上下文会被添加

javascript之执行上下文

执行上下文 一个执行上下文可以抽象成一个简单对象.每个执行上下文有系列的属性(我们可以叫做上下文的状态)来跟踪关联代码的处理. 下面的图是一个上下文的结构: 除了这三个必须的属性(变量对象,this对象和作用域链),一个执行上下文可能有其他的附加状态依赖于实现.

javascript之执行上下文堆栈

执行上下文堆栈 有三种类型的ECMAScript代码:全局代码,函数代码和eval代码.代码执行在它的执行上下文里. 有唯一的全局上下文,以及可能有多个函数和eval上下文.每一个函数调用,进入到函数的执行上 下文,执行函数的代码.当调用到 eval 函数, 进入到 eval 执行上下文,执行它的代码. 注意到,一个函数或许产生有限个上下文集合,因为每调用一个函数(甚至自身调用)产生一个 新的上下文,并伴随着新的上下文状态: function foo( bar ){} //调用同一函数 //生成

Javascript学习-执行上下文(Execution Contexts)

一.ECStack 执行上下文是一个堆栈,每次进入function时,则会将该function context压入栈,当从function 退出时候,则会从ECStack弹出该Function context. 二.Global Contexts 在程序初始化时候,则会压入到ECStacks中,例如: ECStack = [ globalContext ]; 三.Function Code 当执行进入Function时,ECStack 将会push 进一个新的Item,需要注意的是,该新的Ite

javascript执行上下文环境

今天,想对javascript的执行上下文环境做一个深入的理解.之前一直都有这打算的,但无奈忙着忙着就忘记了.今天看了一篇博客,对执行上下文环境的理解可以说是醍醐灌顶. 一.对一段代码的理解开始 在浏览器的控制台输入以下代码段: 这个结果说明,代码在一句句执行之前,浏览器已经做了一些准备工作,所以,后面两个都没有报错.下面再看一段代码: 这个结果说明,函数声明时,把整个函数赋值了,而函数表达式和变量一样,只是申明. 我们总结一下,在"准备工作"中完成了哪些工作: 变量.函数表达式--变