Js执行上下文

更新日期: 2019-09-17阅读: 1.9k标签: 上下文

概念

执行上下文,Execution Context,下面简称EC。

函数执行时,会创建一个称为执行上下文的内部对象(可理解为作用域)。一个执行上下文定义了一个函数执行时的环境


执行栈

执行全局代码时,会产生一个 全局执行上下文环境,每次调用函数都又会产生 新的执行上下文环境。当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境。处于活动状态的执行上下文环境只有一个。

其实这是一个压栈出栈的过程——执行上下文栈。

全局执行上下文环境 一定是在 栈底,在浏览器关闭后出栈。



组成



生命周期


事例代码:

(function foo(x, y, z) {
    var a = 1;
    var b = function fb() { };
    function c() { }
})(10, 20);

1.创建阶段

发生在函数调用之后,函数体执行之前
  1. 初始化作用域链(Scope Chain)
  2. 创建变量对象(Variable Object)

    1. 创建arguments对象,检查上下文,初始化参数名称和值并创建引用的复制。
    2. 扫描上下文的函数声明
    3. 扫面上下文的变量声明
  3. 确定this指向
executionContextObj = {
    // 作用域链
    scopeChain: { ... },
    // 变量对象
    variableObject: {
        arguments: {
            x: 10,
            y: 20,
            z: undefined,
            length: 2, // 这里是实际传入参数的个数
            callee: pointer to function foo() // 指向当前函数的引用
        },
        a: undefined,
        b: undefined,
        c: pointer to function c()
    },
    // this
    this: { ... }
}

2.执行阶段

1.变量赋值
2.函数引用
3.执行其他代码

executionContextObj = {
    // 作用域链
    scopeChain: { ... },
    // 变量对象
    variableObject: {
        arguments: {
            x: 10,
            y: 20,
            z: undefined,
            length: 2, // 这里是实际传入参数的个数
            callee: pointer to function foo() // 指向当前函数的引用
        },
        a: 1,
        b: pointer to function fb(),
        c: pointer to function c()
    },
    // this
    this: { ... }
}


链接: https://fly63.com/article/detial/5363

理解js中的「上下文」

上下文是Javascript 中的一个比较重要的概念, 可能很多朋友对这个概念并不是很熟悉, 那换成「作用域」 和 「闭包」呢?是不是就很亲切了。「作用域」和「闭包」 都是和「执行上下文」密切相关的两个概念。

CSS中层叠上下文

在有些 CSS 相互影响作用下,对元素设置的 z-index 并不会按实际大小叠加,一直不明白其中的原理,最近特意查了一下相关资料,做一个小总结。层叠上下文(stacking content)是 HTML 中的三维概念,也就是元素z轴。

JavaScript中的执行上下文及调用堆栈

代码运行是在一定的环境之中运行的,这个运行环境我们就成为执行环境,也就是执行上下文,按照执行环境不同,我们可以分为三类:全局执行环境:代码首次执行时候的默认环境

理解Javascript中的执行上下文和执行栈

如果你是或者想成为一名Javascript开发者,那就必须要知道Javascript内部是如何执行的。正确的理解Javascript中的执行上下文和执行栈对于理解其它Javascript概念(比如变量提升,作用域,闭包等)至关重要。

CSS层叠上下文/层叠等级

层叠上下文(stacking context),是HTML中一个三维的概念。在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴。一般情况下,元素在页面上沿X轴Y轴

什么是执行上下文

网上关于执行上下文的文章有很多,关于什么是执行上下文,很多文章说得很清晰。我说一下自己的理解。执行上下文包含三个东西:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!