JavaScript内部原理系列－执行上下文（Execution Context）

imingyu 发布于2019-08-21 10:23 / 2439人阅读

摘要：一系列活动的执行上下文从逻辑上形成一个栈。栈底总是全局上下文，栈顶是当前活动的执行上下文。同样的，当抛出未捕获的异常时，也会退出一个或者多个执行上下文，也会做相应的退栈操作。

概要

本文将向大家介绍ECMAScript的执行上下文以及相关的可执行代码类型。

定义

每当控制器到达ECMAScript可执行代码的时候，控制器就进入了一个执行上下文。
执行上下文（简称：EC）是个抽象的概念，ECMA-262标准中用它来区分不同类型的可执行代码。

标准中并没有从技术实现的角度来定义执行上下文的具体结构和类型；这是实现标准的ECMAScript引擎所要考虑的问题。

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

可执行代码类型

可执行代码类型和执行上下文相关。有的时候，当提到代码类型的时候，其实就是在说执行上下文。

举个例子，我们将执行上下文的栈以数组的形式来表示：

ECStask = [ ];

每次控制器进入一个函数（哪怕该函数被递归调用或者作为构造器），都会发生压栈的操作。内置eval函数工作的时候也不例外。

全局代码

这类代码是在“程序”级别上被处理的：比如，加载一个外部的js文件或者内联的js代码（被包含在标签内）。全局代码不包含任何函数体内的代码。

在初始化的时候（程序开始），ECStack如下所示：

ECStack = [
    globalContext
];

函数代码

一旦控制器进入函数代码（各类函数），就会有新的元素会被压栈到ECStack。要注意的是：实体函数代码并不包括内部函数的代码。如下所示，我们调用一个函数，该函数递归调用自己一次：

(function foo(bar){
    if (bar){

    return;

}

foo(true);
})();

之后，ECStack就被修改成如下所示:

//首先激活foo函数
ECStack = [
     functionContext
    globalContext
];
//递归激活foo函数
ECStack = [
     functionContext - recursively
     functionContext
    globalContext
];

每次函数返回，退出当前活动的执行上下文时，ECStack就会被执行对应的退栈操作——先进后出——和传统的栈实现一致。同样的，当抛出未捕获的异常时，也会退出一个或者多个执行上下文，ECStack也会做相应的退栈操作。待这些代码完成之后，ECStack中就只剩下一个执行上下文（globalContext）——直到整个程序结束。

Eval代码

说到eval代码就比较有意思了。这里要提到一个叫做调用上下文的概念，比如：调用eval函数时候的上下文，就是一个调用上下文，eval函数中执行的动作（例如：变量声明或者函数声明）会影响整个调用上下文：

eval(‘var x = 10’);
(function foo(){
    eval(‘ var y = 20’);
})();
alert(x); // 10
alert(y); // ”y” is not defined

ECStack会被修改为：

ECStack = [
    globalContext
];
//eval(‘var x = 10’);
ECStack.push(
    evalContext,
    callingContext: globalContext
);

// eval exited context
ECStack.pop();

//foo function call
ECStack.push( functionContext);

//eval(‘ var y = 20’);
ECStack.push(
    evalContext,
    callingContext:  functionContext
);

//return from eval
ECStack.pop();

//return from foo
ECStack.pop();

在1.7以上版本SpiderMonkey的实现中（Firefox，Thunderbird浏览器内置的JS引擎），允许在调用eval函数的时候，将调用上下文作为第二个参数传递给eval函数。因此，如果传入的调用上下文存在的话，就有可能会影响该上下文中原有的私有变量（在该上下文中声明的变量）：

function foo(){
    var x = 1;
    return function() { alert(x); }
};

var bar = foo();

bar(); // 1
eval(‘x = 2’, bar); //传递上下文，影响了内部变量“var x”
bar(); // 2

总结

这些基本理论对于后面执行上下文相关的细节（诸如变量对象、作用域链等等）分析是非常必要的。

扩展阅读

ECMA-363-3标准文档的对应的章节—— 10. 执行上下文

via 前端翻译小站
赵静（goddyzhao）译自 Dmitry A.Soshnikov的文章Execution Context

云服务器 GPU云服务器执行上下文内部原理 javascript专题系列 javascript深入系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85448.html

js运行机制及异步编程（一）

摘要：引擎的运行原理引擎也是程序，是属于浏览器的一部分，由浏览器厂商自行开发。为了提高运行速度，现代浏览器一般采用即时编译即字节码只在运行时编译，用到哪一行就编译哪一行，并且把编译结果缓存这样整个程序的运行速度能得到显著提升。相信大家在面试的过程中经常遇到查看执行顺序的问题，如setTimeout,promise,async await等等，各种组合，是不是感觉头都要晕掉了，其实这些问题最...

happen 2019-08-23 14:06 评论0 收藏0
js运行机制及异步编程（一）

摘要：引擎的运行原理引擎也是程序，是属于浏览器的一部分，由浏览器厂商自行开发。为了提高运行速度，现代浏览器一般采用即时编译即字节码只在运行时编译，用到哪一行就编译哪一行，并且把编译结果缓存这样整个程序的运行速度能得到显著提升。相信大家在面试的过程中经常遇到查看执行顺序的问题，如setTimeout,promise,async await等等，各种组合，是不是感觉头都要晕掉了，其实这些问题最...

wudengzan 2019-08-02 16:07 评论0 收藏0
JavaScript基础系列---执行环境与作用域链

摘要：延长作用域链下面两种语句可以在作用域链的前端临时增加一个变量对象以延长作用域链，问题今天看笔记发现自己之前记了一个关于同名标识符优先级的内容，具体是下面这样的：形参优先级高于当前函数名，低于内部函数名形参优先级高于arguments 形参优先级高于只声明却未赋值的局部变量，但是低于声明且赋值的局部变量函数和变量都会声明提升，函数名和变量名同名时，函数名的优先级要高。执行代...

J4ck_Chan 2019-08-22 17:19 评论0 收藏0
javascript系列--javascript引擎执行的过程的理解--语法分析和预编译阶段

摘要：所以觉得把这个执行的详细过程整理一下，帮助更好的理解。类似的语法报错的如下图所示三预编译阶段代码块通过语法分析阶段之后，语法都正确的下回进入预编译阶段。另开出新文章详细分析，主要介绍执行阶段中的同步任务执行和异步任务执行机制事件循环。一、概述 js是一种非常灵活的语言，理解js引擎的执行过程对于我们学习js是非常有必要的。看了很多这方便文章，大多数是讲的是事件循环（event loo...

malakashi 2019-08-26 13:52 评论0 收藏0
理解JavaScript的核心知识点：This

摘要：关键字计算为当前执行上下文的属性的值。毫无疑问它将指向了这个前置的对象。构造函数也是同理。严格模式无论调用位置，只取显式给定的上下文绑定的，通过方法传入的第一参数，否则是。其实并不属于特殊规则，是由于各种事件监听定义方式本身造成的。 this 是 JavaScript 中非常重要且使用最广的一个关键字，它的值指向了一个对象的引用。这个引用的结果非常容易引起开发者的误判，所以必须对这个关...

TerryCai 2019-08-23 17:00 评论0 收藏0