javaScript中的执行上下文和变量对象

2018-08-14 admin

执行上下文(Execution Context)

文章同步到github javaScript中的执行上下文和变量对象

JavaScript代码执行的过程,包括编译和执行两个阶段,编译就是通过词法分析,构建抽象抽象语法树,并编译成机器识别的指令,在JavaScript代码编译阶段,作用域规则就已经确定了;在代码执行阶段,或者函数一旦调用,便会创建执行上下文(Execution Context),也叫执行环境

在ECMA-262中有如下一段定义

当控制器转入 ECMA 脚本的可执行代码时,控制器会进入一个执行环境。当前活动的多个执行环境在逻辑上形成一个栈结构。该逻辑栈的最顶层的执行环境称为当前运行的执行环境。任何时候,当控制器从当前运行的执行环境相关的可执行代码转入与该执行环境无关的可执行代码时,会创建一个新的执行环境。新建的这个执行环境会推入栈中,成为当前运行的执行环境.

这也是一个抽象的概念,在一段JavaScript代码中,会创建多个执行上下文,执行上下文定义了变量或函数有权访问的其他数据, ,通过阅读规范及相关文档,了解到执行上下文(简称EC)主要包括三个点,用伪代码表示如下:

EC = {
    this: // 绑定this指向为当前执行上下文, 如果函数属于全局函数,则this指向window
    scopeChain: [] // 创建当前执行环境的作用域链,
    VO: {} // 当前环境的变量对象(Variable Object),每个环境都有一个与之关联的变量对象
}

看下面这一段代码:

var a = 1;
function foo() {
    var b = 2;
    function bar() {
        console.log(b)
    }
    bar()
    console.log(a);
}

foo()
  • 1.执行这段代码,首先会创建全局上下文globleEC,并推入执行上下文栈中;
  • 2.当调用foo()时便会创建foo的上下文fooEC,并推入执行上下文栈中;
  • 3.当调用bar()时便会创建bar的上下文barEC,并推入执行上下文栈中;
  • 4.当bar函数执行完,barEC便会从执行上下文栈中弹出;
  • 5.当foo函数执行完,fooEC便会从执行上下文栈中弹出;
  • 6.在浏览器窗口关闭后,全局上下文globleEC便会从执行上下文栈中弹出;

总结: 栈底永远都是全局上下文,而栈顶就是当前正在执行的上下文,只有当浏览器关闭时,全局上下文才会从执行上下文栈中弹出

变量对象(Variable Object):

每一个执行环境都有一个与之关联的变量对象,是一个抽象的概念,环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象,单解析器在处理数据时会在后台使用它们。

当浏览器第一次加载js脚本程序的时候, 默认进入全局执行环境, 此次的全局环境变量对象为window, 在代码中可以访问。

如果环境是函数, 则将此活动对象做为当前上下文的变量对象(VO = AO), 此时变量对象是不可通过代码来访问的,下面主要对活动对象进行讲解。

活动对象(Activation Object)

1.初始化活动对象(下文缩写为AO)

当函数一调用,立刻创建当前上下文的活动对象, 并将活动对象作为变量对象,通过arguments属性初始化,值为arguments对象(传入的实参集合,与形参无关,形参做为局部环境的局部变量被定义)

AO = {
  arguments: <ArgO>
};

arguments对象有以下属性:

  • length: 真正传递参数的个数;
  • callee: 指向当前函数的引用,也就是被调用的函数;
  • ‘类index’: 字符串类型的整数, 值就是arguments对象中对象下标的值,arguments对象应和数组加以区别, 它就是arguments对象,只是能和数组具有相同的length属性,和可以通过下标来访问值
function show (a, b, c) {
    // 通过Object.prototype.toString.call()精准判断类型, 证明arguments不同于数组类型
    var arr = [1, 2, 3];
    console.log(Object.prototype.toString.call(arr)); // [object Array]

    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]

    console.log(arguments.length) // 2  传递进来实参的个数

    console.log(arguments.callee === show) // true 就是被调用的函数show自身

    //参数共享

    console.log(a === arguments[0]) // true

    a = 15;

    console.log(arguments[0]) // 15

    arguments[0] = 25;

    console.log(a)  // 25;

    但是,对于没有传进来的参数c, 和arguments的第三个索引是不共享的

    c = 25;

    console.log(arguments[2]) // undefined

    argument[2] = 35;

    console.log(c) // 25

}

show(10, 20);

接着往下走,这才是关键的地方,执行环境的代码被分成两个阶段来处理:

  1. 进入执行环境
  2. 执行函数的代码

2.进入执行环境

函数如果被调用, 进入执行环境(上下文),并立即创建活动对象, 通过arguments属性初始化, 与此同时会扫描执行环境中的所有形参、所有函数声明、所有变量声明, 添加到活动对象(AO)中, 并确定this的值,然后会开始执行代码。

在进入执行环境这个阶段:

所有形参声明:

形参名称作为活动对象属性被创建, 如果传递实参, 值就为实参值, 如果没有传递参数, 值就为undefined

所有函数声明:

函数名称作为活动对象的属性被创建,值是一个指针在内存中, 指向这个函数,如果变量对象已经存在相同名称的属性, 则完全替换。

所有变量声明:

所有变量名称作为活动对象的属性被创建, 值为undefined,但是和函数声明不同的是, 如果变量名称跟已经存在的属性(形式参数和函数)相同、则不会覆盖

function foo(a, b) {
    var c = 10;
    function d() {
        console.log('d');
    }
    var e = function () {
        console.log('e');
    };
    (function f() {})
    if (true) {
        var g = 20;
    } else {
        var h = 30;
    }
}

foo(10);

此时在进入foo函数执行上下文时,foo的活动对象fooAO为:

fooAO = {
    arguments: {
        0: 10,
        length: 1
    },
    a: 10,
    b: undefined,
    c: fundefined,
    d: <d reference>  //指向d函数的指针,
    e: undefined,
    g: undefined,
    h: undefined  // 虽然else中的代码永远不会执行,但是h仍然是活动对象中的属性
}

这个例子做如下几点说明:

  • 1.关于函数,只会创建函数声明作为活动对象的属性, 而f函数作为函数表达式并不会出现在活动对象(AO)中
  • 2.e虽然值是一个函数, 但是作为变量属性被活动对象创建

3.代码执行阶段

在进入执行上下文阶段,活动对象拥有了属性,但是很多属性值为undefined, 到代码执行阶段就开始为这些属性赋值了

还是上面的代码例子, 此时活动对象如下:

fooAO = {
    arguments: {
        0: 10,
        length: 1
    },
    a: 10,
    b: undefined,
    c: 10, // 赋值为undefined
    d: <d reference>  //指向d函数的指针,
    e: <d reference>  // 指向e函数的指针
    g: 20,
    h: undefined  // 声明h变量,但是没有赋值
}

变量对象包括:{ arguments对象+函数形参+内部变量+函数声明(但不包含表达式) }

这时这个活动对象, 即作为当前执行环境的变量对象会被推到此执行环境作用域链的最前端(作用域链本篇不做介绍,会在下一篇文章中单独讲解作用域和作用域链), 假定执行环境为一个对象,则整个执行环境可以访问到的属性如下:

伪代码如下:

fooExecutionContext = {
    scopeChain: [], //fooAO +所有父执行环境的活动对象,
    fooAO: {
        arguments: {
            0: 10,
            length: 1
        },
        a: 10,
        b: undefined,
        c: 10, // 赋值为undefined
        d: <d reference>  //指向d函数的指针,
        e: <d reference>  // 指向e函数的指针
        g: 20,
        h: undefined
    },
    this: 当前执行环境的上下文指针
}

补充:

下面的例子为了说明一下变量声明的顺序及变量同名不会影响函数声明

console.log(foo); //  foo的函数体
var foo = 10;
console.log(foo) // 10
function foo() {};
foo = 20;
console.log(foo); // 20

在代码执行之前, 就会读取函数声明,变量声明的顺序在函数声明和形参声明之后, 整个流程如下:

1. 进入执行环境阶段:

1\. var VO = {}
2\. VO[foo] = 'foo函数指针'
3\. 扫描到var foo = 10,

 // 但是foo做为function已经声明,所以变量声明不会影响同名的函数声明,如果代码中没有foo函数声明的话,则foo为undefined

代码执行阶段:

1\. VO[foo] = 10;
2\. VO[foo] = 20;

解析代码完成。

以上简单总结了下对执行上下文和变量对象的理解,主要在于记录总结一下学习成果,目前文章的水平实在不敢谈分享。如有理解不对的地方还请各位大神多多指教,想了解更深可以去查看本文最后主要参考资料的链接,都是经典啊,相信看完也就理解了。

本文主要参考资料:

JavaScript高级程序设计(第3版) ECMAScript5.1中文版–执行环境 前端基础进阶(二):执行上下文详细图解 前端基础进阶(三):变量对象详解 深入理解JavaScript系列(11):执行上下文(Execution Contexts) 深入理解JavaScript系列(12):变量对象(Variable Object)

原文链接:https://segmentfault.com/a/1190000015999090

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37938.html

文章标题:javaScript中的执行上下文和变量对象

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
回到顶部