JavaScript Execution Context

[wangjing013]

JavaScript Execution Context

在这篇文章中, 你会学习关于 JavaScript 执行上下文, 并帮助深入理解 JavaScript 代码的执行过程.

思考下面的代码:

let x = 10;

function timesTen(a){
    return a * 10;
}

let y = timesTen(x);

console.log(y); // 100

在这段代码中:

• 首先, 赋值 10给 x 变量.
• 第二, 声明一个函数 timesTen()
• 第三, 调用 timesTen() 函数并传入参数 x, 并将返回结果存储在 y 变量中.
• 最后, 输出变量 y 的值

上面代码非常直截了当. 然而,在背后 JavaScript 做了很多事情. 在这篇文章中,我们将聚焦在执行上下文上.

当 JavaScript 引擎执行脚本时, 它将创建执行上下文. 每个执行上下文包含两个阶段:

• 创建阶段
• 执行阶段

创建阶段

当脚本执行时, JavaScript 引擎将创建全局上下文. 在创建阶段,它执行如下任务:

• 创建一个全局对象 例如: 浏览器中 window 或 Node 中的global
• 创建一个 this 指向上面定义全局对象
• 设置内存堆来储存变量 和 函数引用
• 将函数声明存储在内存堆中，并将变量存储在全局执行上下文中，初始值 undefined

在我们案例中, 在创建阶段, JavaScript 引擎将变量x、y和 timesTen() 函数声明存储在全局执行上下文中. 此外,它将变量 x 和 y 初始化为 undefined.

在创建阶段之后, 全局执行上下文进入到执行阶段.

执行阶段

在执行阶段, JavaScript 引擎逐行执行代码. 在这个阶段, 它为变量赋值并执行函数调用.

对于函数调用, JavaScript 引擎将创建一个函数执行上下文(Function Execution Context).

函数执行上下文有点类似全局上下文,但它不是创建全局对象, 而是创建包含对传递给函数的所有参数的引用的参数对象.

在我们这个案例中, 在函数执行上下文中创建了引用传递给函数的所有参数的 arguments对象, 设置 this 值为 global object 并且初始化参数 a 值为 undefined.

在函数执行上下文的执行阶段，它给参数 a 赋值 10，并将结果（100）返回给全局执行上下文:

为了跟踪所有执行上下文, 包括全局执行上下文和函数执行上下文, JavaScript 引擎使用名为调用堆栈的数据结构，您将在下一个文章中学习.