深入学习JavaScript执行上下文

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

什么是执行上下文

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

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

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

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

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

创建阶段：在这个阶段，变量对象被创建，但未被初始化，函数声明也会被初始化；
执行阶段：在这个阶段，变量对象被初始化，非函数声明语句也被执行。
确定作用域链（Scope Chain）：函数执行上下文中会创建一个作用域链，用来解析变量和函数的声明。作用域链的头部是当前执行上下文的变量对象（VO，Variable Object），尾部是全局执行上下文的变量对象。从头部到尾部依次搜索变量对象，如果找到了需要的变量，那么停止搜索，如果没有，则继续沿着作用域链向上搜索。
确定 this 值：在函数执行上下文中，this 的值是在函数调用的时候确定的。

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

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

var a = 10;

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

foo(); // 30

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

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

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

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

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

var a = 10;

function foo() {
  var a = 20;

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

  bar();
}

foo(); // 20

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

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

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

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

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

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

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：深入学习JavaScript执行上下文 - Python技术站