JavaScript 核心原理剖析（一）：变量作用域

在计算机编程中，作用域（Scope）是指变量、常量或函数的可见性，即变量或函数的作用范围。作用域通常与块相关，例如函数内部、循环内部等，当离开该块时，这些变量或函数便不再可见。

JavaScript 作为一种脚本语言，变量的作用域也具有非常重要的意义。本文将详细介绍 JavaScript 中变量的作用域，帮助读者深入理解 JavaScript 变量的声明、提升、使用及其内存中的存储和访问机制。

变量声明与提升

在 JavaScript 中，变量声明可以通过两种方式：

• 使用 var 声明，例如：

var name = 'John Doe';

• 使用 let 关键字声明，例如：

let age = 30;

var 关键字声明的变量具有全局作用域，这意味着它们在整个程序中都可以被访问。let 关键字声明的变量具有局部作用域，这意味着它们只能在其所在的块内被访问。

需要注意的是，JavaScript 中存在变量提升（Variable Hoisting）的现象。这意味着在 JavaScript 引擎执行代码之前，所有变量声明都会被提升到脚本的最顶端。因此，即使变量声明在某个块的内部，但它仍然可以在该块之前被访问。

全局变量与局部变量

全局变量是指在脚本的最顶端声明的变量，或者使用 var 关键字声明的变量。全局变量在整个程序中都可以被访问。

局部变量是指在函数内部声明的变量，或者使用 let 关键字声明的变量。局部变量只能在其所在的函数内被访问。

例如，以下代码定义了一个全局变量 name 和一个局部变量 age：

var name = 'John Doe';

function sayHello() {
  let age = 30;
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

sayHello();

在上面的代码中，变量 name 是全局变量，可以在 sayHello() 函数内被访问。变量 age 是局部变量，只能在 sayHello() 函数内被访问。

作用域链与作用域闭包

作用域链（Scope Chain）是指变量在内存中存储和访问的路径。当一个函数被调用时，它会创建一个新的作用域，该作用域的作用域链包括该函数的局部作用域以及其父函数的作用域链。

例如，以下代码定义了一个函数 outerFunction() 和一个嵌套函数 innerFunction()：

function outerFunction() {
  let name = 'John Doe';

  function innerFunction() {
    console.log(`Hello, ${name}!`);
  }

  innerFunction();
}

outerFunction();

在上面的代码中，当 outerFunction() 被调用时，它会创建一个新的作用域，该作用域的作用域链包括 outerFunction() 的局部作用域和全局作用域。当 innerFunction() 被调用时，它也会创建一个新的作用域，该作用域的作用域链包括 innerFunction() 的局部作用域、outerFunction() 的局部作用域和全局作用域。

由于 innerFunction() 的作用域链中包含 outerFunction() 的局部作用域，因此它可以访问 outerFunction() 中声明的变量 name。

作用域闭包（Closure）是指在函数执行完毕后，函数内部的变量仍然可以被访问。这可以通过使用嵌套函数实现。例如，以下代码定义了一个函数 outerFunction() 和一个嵌套函数 innerFunction()：

function outerFunction() {
  let name = 'John Doe';

  function innerFunction() {
    return `Hello, ${name}!`;
  }

  return innerFunction;
}

const helloFunction = outerFunction();

console.log(helloFunction());

在上面的代码中，当 outerFunction() 被调用时，它会创建一个新的作用域，该作用域的作用域链包括 outerFunction() 的局部作用域和全局作用域。当 innerFunction() 被调用时，它也会创建一个新的作用域，该作用域的作用域链包括 innerFunction() 的局部作用域、outerFunction() 的局部作用域和全局作用域。

由于 innerFunction() 的作用域链中包含 outerFunction() 的局部作用域，因此它可以访问 outerFunction() 中声明的变量 name。当 outerFunction() 执行完毕后，它的局部作用域被销毁，但 innerFunction() 仍然可以在 helloFunction 函数中被访问，这是因为 innerFunction() 已经形成了一个闭包。

总结

变量的作用域是 JavaScript 中的一个重要概念，掌握变量的作用域对于编写可靠、健壮的 JavaScript 程序非常重要。在本文中，我们详细介绍了 JavaScript 中变量的作用域及其在内存中的存储和访问机制。我们还介绍了全局变量、局部变量、作用域链和作用域闭包等概念。希望读者能够通过本文对 JavaScript 中的变量作用域有更深入的了解。