洞见 JavaScript 执行上下文：解析代码运行机制

前端

2023-09-29 10:27:13

JavaScript 执行上下文：JavaScript 世界的运行机制

在 JavaScript 的天地里，执行上下文扮演着至关重要的角色，它定义了代码执行的环境，让 JavaScript 能够大显身手。那么，让我们踏上探索 JavaScript 执行上下文的旅程，了解它如何让代码栩栩如生。

执行上下文：幕后指挥家

想象一个舞台，上面有演员、道具和布景，而执行上下文就是控制着这场演出的导演。它决定了代码执行时可用的变量、函数和作用域，为 JavaScript 的运作提供了一个框架。

全局执行上下文：大幕开启

当 JavaScript 代码开始运行时，第一个诞生的就是全局执行上下文。它扮演着总指挥的角色，容纳着所有未声明在函数内部的全局变量和函数。这些全局成员就像舞台上的常驻演员，始终可以在脚本的任何部分被访问。

函数执行上下文：场景变换

当一个函数被调用时，就会创建一个新的执行上下文，称为函数执行上下文。它为函数的局部变量和参数提供了暂时的住所。这些局部成员就像在舞台上只登场一次的演员，只在函数执行期间存在。

作用域链：家族树

执行上下文之间存在着一种叫做作用域链的关系。它就像一张家族树，记录了当前执行上下文中所有变量和函数的来源。作用域链允许函数访问外层函数的变量和函数，就好像它们属于同一个家族一样。

this：幕后主角

JavaScript 中的 this 扮演着幕后主角的角色。它指向当前执行上下文的 this 对象，通常是当前正在执行的函数所属的对象。在全局函数中，this 指向 window 对象，而在方法中，它指向方法所属的对象。

闭包：舞台上的秘密盟友

闭包是 JavaScript 中的一个幕后英雄，它是一种将函数与其执行上下文关联在一起的技术。即使函数执行完毕，闭包仍然允许函数访问其执行上下文中的变量和函数。闭包就像舞台上与主角有深厚友谊的配角，即使主角退场，他们仍然默默支持着演出。

代码示例：舞台上的演出

var globalVariable = 10;

function outerFunction() {
  var localVariable = 20;

  function innerFunction() {
    var innerVariable = 30;

    console.log(globalVariable); // 10
    console.log(localVariable); // 20
    console.log(innerVariable); // 30
  }

  innerFunction();
}

outerFunction();