JS中的执行上下文(Execution Context)和栈(stack)

本文翻译之 http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/

在这篇文章中,我将深入探讨JavaScript中一个最基本的部分,即Execution Context。 在本文结束时,您应该更清楚地知道解释器是怎么工作的,为什么某些函数/变量在声明之前就可以使用以及它们的值是如何确定的。

一:什么是执行上下文?

当JavaScript代码运行的时候,确定它运行所在的环境是非常重要的。运行环境由下面三种不同的代码类型确定

  • 全局代码(Global Code):代码首次执行时候的默认环境
  • 函数代码(Function Code):每当执行流程进入到一个函数体内部的时候
  • Eval代码(Eval Code):当eval函数内部的文本执行的时候

您可以在网上找到大量关于scope的参考资料。为了更易于理解,我们将execution context简单视为运行当前代码的environment/scope。好了,话不多说,先让我们看个例子,其中包含了global context和function/local context 代码。

Example 1

在上图中,我们有1个全局上下文(Global Context),使用紫色边框表示;有3个不同的函数上下文(Function Context)由绿色,蓝色,和橙色边框表示。注意!全局上下文有且只有一个,程序中其他任意的上下文都可以访问全局上下文。
你可以拥有任意数量的函数上下文。每一次函数调用都会创建一个新的上下文,它会创建一个私有域,函数内部做出的所有声明都会放在这个私有域中,并且这些声明在当前函数作用域外无法直接访问。在上面的例子中,一个函数可以访问它所在的上下文尾部的变量,但是一个外部的上下文无法访问内部函数内部声明的变量/函数。为什么会发生这样的情况?代码究竟是如何被解析的呢?

二:执行上下文栈

浏览器中的JS解释器是单线程的。也就是说在浏览器中同一时间只能做一个事情,其他的action和event都会被排队放入到执行栈中(Execution Stack)。下图表示了一个单线程栈的抽象视图


Execution Context Stack

如我们所知,当一个浏览器第一次load你的代码的时候,首先它会进入到一个全局执行上下文中。如果在你的全局代码中,你调用了一个函数,那么程序的执行流程会进入到被调用的函数中,并创建一个新的执行上下文,并将这个上下文推入到执行栈顶。
如果在当前的函数中,你由调用了一个函数,那么也会执行同样的操作。执行流程计入到刚被调用的函数内部,重新创建一个新的执行上下文,并再次推入到执行栈顶。浏览器会一直执行当前栈顶的执行上下文,一旦函数执行完毕,该上下文就会被推出执行栈。下面的例子展示了一个递归函数以及该程序的执行栈:

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

这个代码循环调用了三次,每次对i累加1。每次函数foo调用的时候,都会有一个创建新的执行上下文。一旦上下文完成了执行,就会推出栈,将控制流返回给它下面的执行上下文,这样一直到全局上下文。
关于执行栈,有5点需要记住:

  • 单线程
  • 同步执行
  • 一个全局上下文
  • 无数的函数上下文
  • 每次函数调用都会床架一个新的执行上下文,即使是调用自身

三:执行上下文详解

我们已经知道每当一个函数调用发生,都会创建一个新的执行上下文。但是在JS解释器内部,每次调用一个执行上下文都分为两个步骤

  1. 创建阶段[在函数被调用,但还未执行任何代码之前]
  1. 激活/代码执行阶段
  • 分配变量,以及到函数的引用,然后解析/执行代码

一个执行上下文从概念上可以视为一个包含三个property的Object

executionContextObj = {
    'scopeChain': { /* variableObject + all parent execution context's variableObject */ },
    'variableObject': { /* function arguments / parameters, inner variable and function declarations */ },
    'this': {}
}

四: Activation / Variable Object [AO/VO]

当调用函数的时候,就会创建executionContextObj对象,此时真正的函数逻辑还未执行。这就是第一阶段---创建阶段。在这里,解释器会扫描函数,根据获取到的参数/传参内部函数声明/内部变量声明,来创建executionContextObj对象。扫描的结果存放在executionContextObj对象的variableObject属性中。

下面是解释器解析代码的流程概述:

  1. 找到被调用函数的代码内容
  2. 在执行function代码前,先创建执行上下文execution context
  3. 进入创建阶段
    • 初始化 作用域链.
    • 创建 variable object:
      • 创建 arguments object;检查上下文获取入参,初始化形参名称和数值,并创建一个引用拷贝
      • 扫描上下文获取内部函数声明:
        • 对发现的每一个内部函数,都在variable object中创建一个和函数名一样的property,该property作为一个引用指针指向函数代码在内存中的地址
        • 如果在variable object中已经存在相同名称的property,那么相应的property会被重写
      • 扫描上下文获取内部变量声明:
        • 对发现的每一个内部变量声明,都在variable object中创建一个和变量名一样的property,并且将其初始化为 undefined
        • 如果在variable object中已经存在相同变量名称的property,那么就跳过,不做任何动作,继续扫描
    • 决定在上下文中"this" 的值
  4. 激活/代码执行阶段:
    • 执行上下文中的函数代码,逐行运行JS代码,并给变量赋值

让我们看个例子

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,  // 检查上下文,发现内部声明变量a,初始化为undefined
        b: undefined   // 检查上下文,发现内部声明变量b,初始化为undefined,此时并不赋值,右侧的函数作为赋值语句,在代码未执行前,并不存在
    },
    this: { ... }
}

参见代码中的备注,在创建阶段除了形参参数进行了定义和赋值外,其他只定义了property的名称,并没有赋值。一旦创建阶段完成,执行流程就进入到函数内部进入激活/代码执行阶段。在执行完后的上下文大致如下:

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

五:关于提升(Hoisting)

网上有很多资源会提到JS特有的变量提升(Hoisting),其中会解释说JS会将变量和函数声明提升到函数作用域的顶部。但是,并没有人详细解释为什么会出现这种情况。在掌握了关于解释器如何创建上下文的知识后,这就非常容易解释了。看下面的代码:

​(function() {

    console.log(typeof foo); // function pointer
    console.log(typeof bar); // undefined

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

    function foo() {
        return 'hello';
    }
    console.log(typeof foo); // string
}());​

我们现在可以回答的问题是:

  • 为什么我们可以在声明foo之前就访问它?

    • 如果我们遵循creation stage,我们知道变量在activation / code execution stage之前就创建了。所以当功能流程开始执行时,在上下文中,foo已经做了定义。
  • foo是声明了两次,为什么显示foo的是 function ,不 undefined 还是 string

    • 即使foo声明了两次,我们也知道在creation stage阶段,在上下文中,函数是在变量之前创建的,并且如果上下文中一个变量名称的属性名已经存在,我们就会忽略掉这个变量声明。
    • 因此,function foo()首先在上下文中创建一个名为foo的引用property,当解释器到达时var foo时,我们看到属性名称foo已经存在,所以代码什么都不做并继续执行。
  • 为什么bar是 undefined

    • bar实际上是一个具有函数赋值的变量,我们知道变量是在creation stage阶段创建的,但它们是用值会被初始化为undefined
  • 为什么最后foo是string

    • foo在创造阶段按照规则被赋予了function的类型,但在执行阶段,随着var foo = 'hello'的执行,将其变为了String类型,下面的函数声明在创造阶段已经执行,因此跳过后,foo还是String类型

六:总结

希望到现在您已经很好地掌握了JavaScript中解释器是如何处理您的代码的。理解执行上下文和栈可以让您了解为什么代码运行的结果和你最初预期的不同的原因。

进一步阅读:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,928评论 6 509
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,748评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,282评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,065评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,101评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,855评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,521评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,414评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,931评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,053评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,191评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,873评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,529评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,074评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,188评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,491评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,173评论 2 357

推荐阅读更多精彩内容