JS中的执行上下文

执行上下文

1. 定义

执行上下文就是js代码被解析和执行时所在环境的抽象概念,js的所有代码都是在执行上下文中运行。

2. 类型

执行上下文有三种类型:

  • 全局执行上下文:
    一个程序中只能存在一个全局执行上下文,不在任何函数中的代码都在全局执行上下文中。

  • 函数执行上下文:
    每次调用函数都会创建一个新的执行上下文,一个程序中可以包含任意多个函数执行上下文

  • eval执行上下文

3. 内容

执行上下文也是一个对象!那么这个对象中包括了哪些内容呢
每一个执行上下文都包括三个属性:

  • 活动对象(variable object)
  • 作用域链(scope chain)
  • this对象

4. 执行栈

存储执行上下文的数据结构是堆栈,它是一种先进后出的数据结构, 称其为执行栈

存储过程

1.当js引擎首次读取读取脚本时,便会创建一个全局执行上下文,并将其压入栈底,

  1. 如果执行期间碰到了函数,便会创建一个新的函数执行上下文。
  2. 在执行2中函数的时候又碰到了一个函数,便会再次创建一个新的执行上下文。。。
  3. 当某一个函数执行完毕,也将其执行上下文中堆栈中出栈,并将控制权交还给前一个执行上下文。
  4. 最终所有函数执行上下文出栈,仅剩下全局之执行上下文也出栈,程序执行完毕。应该是当浏览器被关闭,全局执行上下文才会被销毁!

5.举个例子

function f1() {
  console.log('f1')
}

function f2() {
  f1()
  console.log('f2')
}

function f3() {
  f2()
}

f3()

我们假设一开始的上下文执行栈为 []

  1. 当上例代码加载时,js引擎会创建一个全局执行上下文并压入栈底。
    更新执行栈为:
    [ [全局执行上下文]]

  2. 执行到了函数f3,创建f3的执行上下文
    [[f3的执行上下文]
    [全局执行上下文]]

  3. 执行f3的过程中,碰到了f2!赶紧创建f2的执行上下文
    [[f2的执行上下文]
    [f3的执行上下文]
    [全局执行上下文]]

  4. 执行f2的过程中,又碰到了f1!又赶紧创建f1的执行上下文
    [[f1的执行上下文]
    [f2的执行上下文]
    [f3的执行上下文]
    [全局执行上下文]]

  5. f1执行完毕了 就把f1的执行上下文出栈吧,并丢还给f2的执行上下文
    [[f1的执行上下文]
    [f2的执行上下文]
    [f3的执行上下文]
    [全局执行上下文]]、

  6. f2也执行完了, 还给f3吧
    [[f1的执行上下文]
    [f2的执行上下文]
    [f3的执行上下文]
    [全局执行上下文]]、

  7. f3委屈的将执行权还给了全局执行上下文
    [[f1的执行上下文]
    [f2的执行上下文]
    [f3的执行上下文]
    [全局执行上下文]]、

  8. 全局执行上下文结束,全部出栈 执行栈为 []
    [[f1的执行上下文]
    [f2的执行上下文]
    [f3的执行上下文]
    [全局执行上下文]]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容