创建上下文_理解JavaScript的执行上下文

2333222b25397ead086cdcec5a9bccbd.png

执行上下文

执行上下文:指当前执行环境中的变量、函数声明,参数(arguments),作用域链,this等信息。分为全局执行上下文、函数执行上下文,其区别在于全局执行上下文只有一个,函数执行上下文在每次调用函数时候会创建一个新的函数执行上下文。

执行上下文的组成代码示例:

const ExecutionContextObj = {
    VO: window, // 变量对象
    ScopeChain: {}, // 作用域链
    this: window
};

执行上下文的组成图例示例:

ccf4202c42590700a65cb6f5536c81d9.png

执行上下文生命周期

  • 创建阶段
    • 生成变量对象
      • 创建arguments
      • 扫描函数声明
      • 扫描变量声明
    • 建立作用域链
    • 确定this的指向
  • 执行阶段
    • 变量赋值
    • 函数的引用
    • 执行其他代码

bbb06c83b0fda5c82524d5c256c3000d.png

变量对象

变量对象是与执行上下文相关的数据作用域,存储了上下文中定义的变量和函数声明。

变量对象式一个抽象的概念,在不同的上下文中,表示不同的对象:

  • 全局执行上下文的变量对象
    • 全局执行上下文中,变量对象就是全局对象。
    • 在顶层js代码中,this指向全局对象,全局变量会作为该对象的属性来被查询。在浏览器中,window就是全局对象。
  • 函数执行上下文的变量对象
    • 函数上下文中,变量对象VO就是活动对象AO。
      初始化时,带有arguments属性。
      函数代码分成两个阶段执行
    • 进入执行上下文时,此时变量对象包括
      • 形参
      • 函数声明,会替换已有变量对象
      • 变量声明,不会替换形参和函数
    • 函数执行

994e8aa48300941ef342446ff8b330e9.png

执行上下文栈

执行上下文栈的作用是用来跟踪代码的,由于JS是单线程的,每次只能做一件事情,其他的事情会放在指定的上下文栈中排队等待执行。

JS解释器在初始化代码的时候,首先会创建一个新的全局执行上下文到执行上下文栈顶中,然后随着每次函数的调用都会创建一个新的执行上下文放入到栈顶中,随着函数执行完毕后被执行上下文栈顶弹出,直到回到全局的执行上下文中。(栈:一种数据结构,遵循后进先出的原则)。

代码示例:

function getName() {
    const year = getYear();

    const name = 'Lynn';
    console.log(`${name} ${year} years old this year`);
}

function getYear() {
    return 18;
}

getName(); 

执行上下文栈图例:

01d494e5c669b56e6cf8b10adff62f08.png

上面的执行上下文栈执行过程:

  1. 首先创建了全局执行上下文,当前全局执行上下文处于活跃状态。
  2. 全局代码中有2个函数 getName 和 getYear,然后调用 getName 函数,JS引擎停止执行全局执行上下文,创建了新的函数执行上下文,且把该函数上下文放入执行上下文栈顶。
  3. getName 函数里又调用了 getYear 函数,此时暂停了 getName 的执行上下文,创建了 getYear 函数的新执行上下文,且把该函数执行上下文放入执行上下文栈顶。
  4. 当 getYear 函数执行完后,其执行上下文从栈顶出栈,回到了 getName 执行上下文中继续执行。
  5. 当 getName 执行完后,其执行上下文从栈顶出栈,回到了全局执行上下文中。

参考链接

  • JavaScript 变量作用域、this、闭包, by Dongss
  • 一次搞定闭包和this, by hpoenixf
  • JS变量对象详解, by 云水

作者:梁凤波

链接:http://www.imooc.com/article/289120

来源:慕课网

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值