探秘JavaScript执行上下文：掌握关键要素，理解代码行为

前端

2023-09-13 12:07:27

剖析JavaScript执行上下文

在JavaScript中，执行上下文是程序执行过程中所依赖的一套环境集合，它包含了代码执行所需的信息和资源，如变量、函数和对象等。

核心组成要素

作用域: 作用域决定了变量和函数的可访问性，它可以是全局作用域或局部作用域。
变量: 执行上下文中的变量可以是全局变量或局部变量，全局变量在整个程序中都是可访问的，而局部变量只在声明它们的函数或代码块中可访问。
函数: 函数是执行上下文中的代码块，它可以被调用来执行特定的任务。
对象: 对象是执行上下文中的数据集合，它可以包含属性和方法。
this: this引用当前执行上下文的实例，它允许访问该实例的属性和方法。

作用域的奥秘

作用域是JavaScript中一个重要的概念，它决定了变量和函数的可访问性。

全局作用域

全局作用域是整个程序都可以访问的作用域，它包含了在程序任何地方声明的变量和函数。

局部作用域

局部作用域是在函数或代码块中创建的作用域，它包含了在该函数或代码块中声明的变量和函数。局部作用域只在该函数或代码块内可访问。

词法作用域

JavaScript使用词法作用域，这意味着函数的作用域是在函数定义时确定的，而不是在函数调用时确定的。这使得我们可以访问定义函数时可见的变量和函数，即使这些变量和函数是在调用函数时才被创建的。

执行上下文的切换

执行上下文会在代码执行过程中不断切换。当一个函数被调用时，一个新的执行上下文会被创建，当函数执行完毕时，该执行上下文会被销毁。全局执行上下文是第一个被创建的执行上下文，它是所有其他执行上下文的父执行上下文。

深入理解执行上下文

为了更好地理解执行上下文，我们可以通过一些例子来看它如何影响代码执行的行为。

变量声明

变量声明是在执行上下文中创建变量，变量的类型可以是全局变量或局部变量。全局变量在整个程序中都是可访问的，而局部变量只在声明它们的函数或代码块中可访问。

// 全局变量
var globalVar = 10;

// 局部变量
function myFunction() {
  var localVar = 20;
}

在这个例子中，globalVar是全局变量，可以在程序任何地方访问，而localVar是局部变量，只能在myFunction()函数中访问。

函数调用

当一个函数被调用时，一个新的执行上下文会被创建，该执行上下文包含了函数的参数和局部变量。当函数执行完毕时，该执行上下文会被销毁。

function myFunction(param1, param2) {
  // 局部变量
  var localVar = 30;

  // 函数体
}

myFunction(1, 2);

在这个例子中，当myFunction()函数被调用时，一个新的执行上下文会被创建，该执行上下文包含了函数的参数和局部变量。当函数执行完毕时，该执行上下文会被销毁。

闭包

闭包是指可以访问其创建时执行上下文中的变量的函数，即使该函数已被调用并执行完毕。

function createCounter() {
  // 局部变量
  var counter = 0;

  // 返回一个函数
  return function() {
    // 访问局部变量
    counter++;
    return counter;
  };
}

// 创建闭包
var counter = createCounter();

// 使用闭包
console.log(counter()); // 1
console.log(counter()); // 2