【前端精进之路】JS篇：第3期 执行上下文

文章目录

• • 写在前面
  • 什么是执行上下文、执行栈？
  • 创建一个执行上下文
  • • 创建阶段
    • • this绑定
      • 词法环境
      • 变量环境
    • 执行阶段
  • 完整的demo
  • ES5 执行上下文总结
  • ES3的执行上下文
  • • ES3执行上下文的内容
    • • 变量对象(VO)
      • 活动对象(AO)
      • 作用域链
    • ES3执行上下文伪代码
    • ES3上下文创建阶段
    • 执行阶段
    • 销毁阶段

写在前面

这里是小飞侠Pan??，立志成为一名优秀的前端程序媛！！！

本篇文章收录于我的专栏：前端精进之路

同时收录于我的github前端笔记仓库中，持续更新中，欢迎star~

??https://github.com/mengqiuleo/myNote

---

什么是执行上下文、执行栈？

执行上下文（简称 EC）是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。

执行上下文 为我们的可执行代码块提供了执行前的必要准备工作，例如变量对象的定义、作用域链的扩展、提供调用者的对象引用等信息。

JavaScript 中有三种执行上下文类型。

• 全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。
• 函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。
• Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文，但由于 JavaScript 开发者并不经常使用 eval，所以在这里我不会讨论它。

执行上下文栈，也就是在其它编程语言中所说的“调用栈”，是一种拥有 LIFO（后进先出）数据结构的栈，被用来存储代码运行时创建的所有执行上下文。

当 JavaScript 引擎第一次遇到你的脚本时，它会创建一个全局的执行上下文并且压入当前执行栈。每当引擎遇到一个函数调用，它会为该函数创建一个新的执行上下文并压入栈的顶部。

引擎会执行那些执行上下文位于栈顶的函数。当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。

注意：

• 执行上下文是被调用时生效
• 作用域是在编写时就已经被确定好的

一个demo

let a = 'Hello World!';

function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}

function second() {
  console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');

解释如下：

• 当上述代码在浏览器加载时，JavaScript 引擎创建了一个全局执行上下文并把它压入当前执行栈。当遇到 first() 函数调用时，JavaScript 引擎为该函数创建一个新的执行上下文并把它压入当前执行栈的顶部。

• 当从 first() 函数内部调用 second() 函数时，JavaScript 引擎为 second() 函数创建了一个新的执行上下文并把它压入当前执行栈的顶部。当 second() 函数执行完毕，它的执行上下文会从当前栈弹出，并且控制流