深入学习JavaScript系列（二）——作用域和作用域链

2024-01-23 23:53:39

在深入探索JavaScript系列的第一篇文章中，我们探讨了JavaScript的变量类型与运算符的使用。本文将继续深入学习JavaScript中的作用域和作用域链的概念，揭秘函数如何形成作用域链并影响变量访问规则，同时探讨闭包的本质与应用，帮助开发者理解JavaScript的运行机制，提升编码水平。

1. 作用域（Scope）

作用域是指变量或函数的有效范围，即在程序中哪些部分可以访问和使用该变量或函数。在JavaScript中，作用域有两种类型：全局作用域和局部作用域。

全局作用域是指在程序的任何地方都可以访问的变量或函数。全局作用域中的变量或函数通常在脚本的最前面定义，或者使用var显式声明。例如：

var globalVariable = 10;

function globalFunction() {
  console.log(globalVariable);
}

在这个例子中，globalVariable和globalFunction都是全局变量和全局函数，可以在脚本的任何地方访问和使用。

局部作用域是指只在函数体内可访问的变量或函数。局部作用域中的变量或函数通常使用let或const关键字显式声明。例如：

function localFunction() {
  let localVariable = 20;

  if (true) {
    const nestedLocalVariable = 30;

    console.log(localVariable); // 20
    console.log(nestedLocalVariable); // 30
  }

  console.log(localVariable); // 20
  console.log(nestedLocalVariable); // ReferenceError: nestedLocalVariable is not defined
}

localFunction();

在这个例子中，localVariable和nestedLocalVariable都是局部变量。localVariable可以在localFunction函数的任何地方访问，而nestedLocalVariable只能在if块内访问。

2. 作用域链（Scope Chain）

作用域链是指在函数调用时形成的一系列作用域，这些作用域决定了函数可以访问的变量和函数。作用域链的形成是由执行上下文的嵌套关系决定的。在函数定义时，就已经确定了该函数的作用域链。当函数被调用时，会创建一个新的执行上下文，并将该执行上下文的变量对象添加到作用域链的顶端，从而形成新的作用域链。

例如，考虑以下代码：

var globalVariable = 10;

function outerFunction() {
  var outerVariable = 20;

  function innerFunction() {
    var innerVariable = 30;

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

  innerFunction();
}

outerFunction();

在这个例子中，globalVariable、outerVariable和innerVariable分别属于全局作用域、局部作用域和嵌套局部作用域。当outerFunction被调用时，会创建一个新的执行上下文，并将outerFunction的变量对象添加到作用域链的顶端。当innerFunction被调用时，又会创建一个新的执行上下文，并将innerFunction的变量对象添加到作用域链的顶端。这样，就形成了一个作用域链：

globalVariable -> outerVariable -> innerVariable

在innerFunction中，可以通过作用域链访问globalVariable和outerVariable。这是因为作用域链允许函数访问其父级作用域中的变量和函数。

3. 闭包（Closure）

闭包是指能够访问其父级作用域中变量的函数。闭包的形成是由于作用域链的存在。当一个函数被定义在一个父级作用域中时，该函数就可以访问父级作用域中的变量。即使父级作用域已经结束，但只要该函数还存在，它就可以继续访问父级作用域中的变量。

例如，考虑以下代码：

function createCounter() {
  var counter = 0;

  return function() {
    counter++;
    console.log(counter);
  };
}

var counterFunction = createCounter();

counterFunction(); // 1
counterFunction(); // 2
counterFunction(); // 3