深入学习JavaScript执行上下文

下面我将给出一份完整的攻略，帮助大家深入学习 JavaScript 执行上下文。

下面我将给出一份完整的攻略，帮助大家深入学习 JavaScript 执行上下文。

什么是执行上下文

在讲解如何深入学习 JavaScript 执行上下文之前，我们先来介绍一下什么是执行上下文。

在 JavaScript 中，每当代码运行到一个函数或者全局代码块的时候，都会创建一个执行上下文，用于存储当前代码执行的状态。执行上下文包含了当前环境中的变量、函数、对象等信息。 可以将其看成是一个容器，用来存储当前代码块中的所有变量、函数等信息。

JavaScript 中的执行上下文分为三种类型：

• 全局执行上下文：当 JavaScript 代码第一次执行的时候，会创建一个全局执行上下文，它对应了整个脚本的执行环境；
• 函数执行上下文：每当一个函数被调用的时候，都会创建一个新的函数执行上下文，它会包含这个函数中定义的所有变量、函数等信息；
• Eval 函数执行上下文：在 eval 函数内部执行代码的时候，也会创建一个新的执行上下文。

执行上下文创建流程

当 JavaScript 代码运行到一个函数或者全局代码块的时候，会经历以下步骤来创建执行上下文：

1. 创建变量对象（Variable Object）：在函数/全局代码块中第一个被执行的操作是创建变量对象。变量对象包含了当前执行上下文中定义的所有变量和函数。

全局执行上下文中的变量对象是全局对象（即window对象），但在函数执行上下文中，变量对象是会被分成两个阶段的：

• 创建阶段：在这个阶段，变量对象被创建，但未被初始化，函数声明也会被初始化；

• 执行阶段：在这个阶段，变量对象被初始化，非函数声明语句也被执行。

• 确定作用域链（Scope Chain）：函数执行上下文中会创建一个作用域链，用来解析变量和函数的声明。作用域链的头部是当前执行上下文的变量对象（VO，Variable Object），尾部是全局执行上下文的变量对象。从头部到尾部依次搜索变量对象，如果找到了需要的变量，那么停止搜索，如果没有，则继续沿着作用域链向上搜索。

• 确定 this 值：在函数执行上下文中，this 的值是在函数调用的时候确定的。

以上就是执行上下文创建的流程。

示例说明

下面来看两个示例，深入理解执行上下文的创建过程。

示例 1

var a = 10;

function foo() {
  var b = 20;
  console.log(a + b);
}

foo(); // 30

当 foo() 函数被调用时，会经历以下步骤来创建执行上下文：

1. 创建变量对象（Variable Object）

js
{
arguments: {
length: 0
},
b: undefined,
this: window,
}

1. 确定作用域链（Scope Chain）

js
Scope Chain: [VO(foo), VO(global)]

其中 VO(foo) 表示 foo() 函数执行上下文中的变量对象，VO(global) 表示全局执行上下文中的变量对象。

1. 确定 this 值

this 的值是在执行函数时动态确定。在这个例子中，因为 foo() 函数是作为普通函数进行调用的，所以 this 的值是全局对象（即 window）。

示例 2

var a = 10;

function foo() {
  var a = 20;

  function bar() {
    console.log(a);
  }

  bar();
}

foo(); // 20

当 foo() 函数被调用时，会经历以下步骤来创建执行上下文：

1. 创建变量对象（Variable Object）

js
{
arguments: {
length: 0
},
a: undefined,
bar: function() {...},
this: window
}

1. 确定作用域链（Scope Chain）

js
Scope Chain: [VO(bar), VO(foo), VO(global)]

其中 VO(bar) 表示 bar() 函数执行上下文中的变量对象，VO(foo) 表示 foo() 函数执行上下文中的变量对象，VO(global) 表示全局执行上下文中的变量对象。

1. 确定 this 值

this 的值是在执行函数时动态确定。在这个例子中，因为 foo() 函数是作为普通函数进行调用的，所以 this 的值是全局对象（即 window）。

以上就是两个示例对执行上下文创建流程的说明，希望对大家有所帮助。