前端JavaScript篇之对执行上下文的理解

---

对执行上下文的理解

当我们在执行JavaScript代码时，JavaScript引擎会创建并维护一个执行上下文栈来管理执行上下文。执行上下文有三种类型：全局执行上下文、函数执行上下文和eval函数执行上下文。

在写代码的时候，我们首先会定义全局变量，这些变量会被放在全局执行上下文中。全局执行上下文在代码执行之前就已经存在，并且是整个程序的起点。在全局执行上下文中，JavaScript引擎会创建一个全局对象（通常是window对象）作为变量对象，同时将this指向该全局对象。举个例子：

var globalVariable = 'I am a global variable'

function globalFunction() {
  console.log('I am a global function')
}

console.log(globalVariable) // 输出：I am a global variable
globalFunction() // 输出：I am a global function

在这个例子中，变量globalVariable和函数globalFunction被定义在全局上下文中。我们可以在全局上下文中直接访问和使用它们。

当我们调用一个函数时，会创建一个新的函数执行上下文。函数执行上下文与全局执行上下文类似，但有一些差异。函数执行上下文除了包含变量对象和this指向，还包括函数的参数和内部声明的变量和函数。举个例子：

function outer() {
  var outerVariable = 'I am an outer variable'

  function inner() {
    var innerVariable = 'I am an inner variable'
    console.log(outerVariable) // 可以访问外部函数的变量
    console.log(innerVariable) // 可以访问自己的变量
  }

  inner()
}

outer()

在这个例子中，outer函数内部定义了一个变量outerVariable，并声明了一个内部函数inner。当我们调用outer函数时，会创建outer函数的执行上下文。其中的变量outerVariable和函数inner都属于该执行上下文。在inner函数中，我们可以通过作用域链访问到它们。

需要注意的是，每个函数调用都会创建一个新的函数执行上下文，它们是独立的，拥有自己的变量和参数。当函数执行完毕后，它所在的函数执行上下文会从执行上下文栈中被弹出。

总结一下：

• 执行上下文是用来管理和维护JavaScript代码执行时的环境。
• 有三种类型的执行上下文：全局执行上下文、函数执行上下文和eval函数执行上下文（不常用）。
• 执行上下文栈用来记录各个执行上下文的顺序和层级关系。
• 在创建阶段，会创建和初始化执行上下文，并将变量对象、this值和作用域链等相关信息设置好。
• 在执行阶段，会执行具体的代码，并处理变量赋值、函数调用等操作。

在编写代码时，了解执行上下文的概念可以帮助我们理解变量的作用域、函数的闭包以及代码的执行顺序。它是理解JavaScript代码执行原理的关键之一。

创建执行上下文

var x = 10

function foo(y) {
  var z = 20
  console.log(x + y + z)
}

foo(5)

让我们一步一步地创建执行上下文。

1. 全局执行上下文的创建：

   • 在全局上下文中，JavaScript引擎会创建一个全局变量对象，这里我们将它称为Global_VO（Variable Object）。
   • 将全局上下文中的变量和函数声明添加到Global_VO。
   • 在这个例子中，我们声明了一个变量x，并将其值设为10。
   • 我们还声明了一个函数foo，它也会被添加到Global_VO中。
   • 最后，JavaScript引擎会将this关键字指向全局对象（通常是window对象）。

2. 函数执行上下文的创建：

   • 当我们调用foo函数时，JavaScript引擎创建一个新的执行上下文，称为Function_Context。
   • 在Function_Context中，JavaScript引擎会创建一个空的变量对象，我们将它称为Function_VO。
   • 将函数的参数和内部声明的变量添加到Function_VO。
   • 在这个例子中，我们有一个参数y和一个变量z。
   • 参数y的值是通过函数调用传递的，这里是5。
   • 变量z被声明但还未被赋值，所以它的值是undefined。

3. 执行阶段：

   • 在执行阶段，JavaScript引擎会为变量对象中的变量赋值。
   • 在全局上下文中，将变量x的值设为10。
   • 在函数执行上下文Function_Context中，将变量z的值设为20。

输出结果为35，这是因为在函数foo的执行上下文中，可以访问到全局上下文中的变量x，以及函数的参数y和内部变量z。将它们相加并输出结果。

需要注意的是，创建执行上下文的过程分为两个阶段：创建阶段和执行阶段。在创建阶段，会创建相应的变量对象，并进行变量声明和函数声明。在执行阶段，会对变量进行赋值和执行具体的代码逻辑。

总结：

• 全局执行上下文是代码执行的起点，它包括全局变量和函数的声明，并且this指向全局对象（通常是window对象）。
• 函数执行上下文是每次函数调用时创建的，它包括函数的参数、内部变量等，并且可以访问上层执行上下文中的变量。
• 在执行阶段，实际的代码逻辑被执行，变量被赋值，并得到最终的结果。

在JavaScript中，每当函数被调用时，都会创建一个新的函数执行上下文。与全局执行上下文类似，函数执行上下文也有自己的变量定义和函数声明。但是与全局执行上下文不同，函数执行上下文会额外包含this、arguments和函数的参数

在理解执行上下文的过程中，对于创建阶段和执行阶段的区分是很关键的。这有助于我们理解变量的作用域、函数的闭包以及代码的执行顺序。

持续学习总结记录中，回顾一下上面的内容：
执行上下文是JavaScript中的一个概念，用于描述代码在运行时的环境和上下文信息。它可以理解为代码执行时的“现场”，包含了变量、函数、参数以及其他相关的执行信息。
在JavaScript中，我们有全局执行上下文和函数执行上下文。全局执行上下文是整个程序的起点，包含了全局变量和函数的声明。而函数执行上下文是每次函数调用时创建的，包含了函数内部的变量、函数声明以及特殊的关键字（如this、arguments）。
执行上下文的创建分为两个阶段：创建阶段和执行阶段。在创建阶段，JavaScript引擎会创建变量对象，存储变量和函数的声明，并设置上下文相关的信息。在执行阶段，代码会被逐行执行，变量被赋值和计算，函数被调用。
执行上下文的概念帮助我们理解JavaScript中的作用域、闭包和函数调用等机制。它决定了变量的可见性和生命周期，以及函数内部对外部变量的访问。
通过深入理解执行上下文，我们能够更好地理解和调试JavaScript代码，写出更清晰和可靠的程序。