JS作用域解析与作用域链详解

本文深入解析了JavaScript中词法作用域与作用域链的核心概念，及其在实现闭包和变量管理中的关键作用。词法作用域决定了变量的可访问性，在函数定义时便已确定，而作用域链则是JS引擎查找变量时遵循的“路径”，它从当前作用域逐级向上查找，直至全局作用域。文章通过实例展示了词法作用域如何实现闭包，使函数能够“记住”其定义时的环境，即使外部函数执行完毕，内部函数仍能访问外部变量。此外，还详细区分了全局、函数和块级作用域，强调了`let`和`const`在ES6中引入的块级作用域对代码可维护性的提升。掌握这些概念，有助于开发者编写更健壮、可预测的JavaScript代码，并有效避免全局作用域污染等问题。

JavaScript中的词法作用域在函数定义时确定变量访问权限，作用域链则是执行时查找变量的路径，二者共同实现闭包并区分全局、函数和块级作用域，使代码行为可预测且支持精细的变量管理。

JavaScript中，词法作用域是它处理变量可见性的核心机制，简单来说，它决定了你代码里的变量在哪个地方能被访问到。而作用域链，就是JS引擎在查找变量时，沿着这个词法作用域层层往上找的一条“路径”。它不是在代码运行的时候才决定的，而是在你写代码，也就是定义函数的那一刻，就已经固定下来了。这让我们的代码行为变得非常可预测，这也是JS能构建复杂应用的基础。

解决方案

理解词法作用域和作用域链，首先得明白JS里“作用域”这个概念。它不像我们日常说话那么随意，而是代码块、函数定义时，变量可被访问的区域。词法作用域（Lexical Scope），顾名思义，就是“定义时”的作用域。当你写下一段代码，定义一个函数时，这个函数的作用域就已经确定了，它会记住自己被定义时的环境，也就是它“出生”的地方。无论这个函数将来在哪里被调用，它查找变量的“家谱”都不会变。

举个例子，你有一个外部函数 outer，里面定义了一个变量 x，然后 outer 内部又定义了一个内部函数 inner。inner 函数天生就知道 x 存在，因为它是在 outer 里面定义的。即使你把 inner 函数作为返回值，拿到 outer 外面去执行，它依然能访问到那个 x。这就是词法作用域的魅力，它让闭包（Closures）成为可能。

function outer() {
  let x = 10; // x 定义在 outer 的作用域
  function inner() { // inner 定义在 outer 的作用域内
    console.log(x); // inner 可以访问到 x
  }
  return inner; // 返回 inner 函数
}

const myInner = outer(); // myInner 现在是 inner 函数
myInner(); // 输出 10，即使 outer 已经执行完毕，inner 仍然能访问到 x

作用域链（Scope Chain）则是JS引擎在执行代码、查找某个变量时所遵循的规则。当JS引擎需要查找一个变量的值时，它会从当前执行上下文的作用域开始找。如果当前作用域找不到，它就会沿着作用域链向上，去父级作用域找，直到找到全局作用域为止。如果一直找到全局作用域都还没找到，那就会抛出一个 ReferenceError。

这个“链”是怎么形成的呢？当一个函数被创建时，它会包含一个内部属性 [[Environment]]，这个属性引用了它被创建时的那个词法环境（Lexical Environment）。这个词法环境，本质上就是它父级作用域的引用。所以，当我们执行一个函数时，它的执行上下文会创建一个新的词法环境，并把它的外部环境引用（outer environment reference）指向那个 [[Environment]] 属性所引用的词法环境。这样就形成了一个链条：当前作用域 -> 父级作用域 -> 父父级作用域 -> ... -> 全局作用域。

let globalVar = '我是全局变量';

function funcA() {
  let aVar = '我是函数A的变量';
  function funcB() {
    let bVar = '我是函数B的变量';
    console.log(bVar);   // 1. 在funcB当前作用域找到bVar
    console.log(aVar);   // 2. 在funcB作用域找不到aVar，向上到funcA作用域找到
    console.log(globalVar); // 3. 在funcA作用域找不到globalVar，向上到全局作用域找到
    // console.log(nonExistentVar); // 如果这里有，会抛出ReferenceError
  }
  funcB();
}

funcA();

这个过程，就像你在家里找东西，先在自己房间找，找不到就去客厅找，再找不到就去地下室或者阁楼找，最后如果还没找到，就只能说“没有这东西”了。

词法作用域如何实现JavaScript中的闭包？

谈到词法作用域，就不能不提闭包。可以说，闭包是词法作用域最直接、最强大的应用之一，它们俩简直是“焦不离孟，孟不离焦”。闭包的本质，就是函数和其被创建时所处的词法环境的组合。由于词法作用域的特性，当一个内部函数被定义时，它会“记住”其外部作用域的变量。即使外部函数执行完毕，其作用域理论上应该被销毁，但如果内部函数（闭包）仍然存在，并且引用了外部作用域的变量，那么这些变量就不会被垃圾回收，而是会一直被保留下来，供闭包使用。

这就像是给一个函数拍了一张“全家福”，照片里不仅有函数自己，还有它周围的环境（变量）。无论这个函数被带到哪里，这张“全家福”都会跟着它，让它随时都能回忆起并访问到那些变量。

function createCounter() {
  let count = 0; // count 定义在 createCounter 的词法作用域中
  return function() { // 这是一个匿名函数，它形成了一个闭包
    count++; // 访问并修改了外部作用域的 count 变量
    console.log(count);
  };
}

const counter1 = createCounter();
counter1(); // 输出 1
counter1(); // 输出 2

const counter2 = createCounter(); // 创建一个新的计数器，有独立的 count
counter2(); // 输出 1
counter1(); // 输出 3 (counter1 自己的 count 还在继续)

闭包在实际开发中非常有用，比如模块化、私有变量的实现、函数柯里化、事件处理等。它允许我们创建拥有“记忆”的函数，能够维护自己的状态，而不会污染全局作用域。理解了词法作用域，闭包的很多“神奇”行为就变得理所当然了。

JavaScript中的全局作用域、函数作用域与块级作用域有何区别？

在JS中，作用域的划分方式主要有三种，它们共同构成了词法作用域的不同层次，也影响着变量的作用域链：

1. 全局作用域 (Global Scope)： 这是最外层的作用域。在浏览器环境中，通常是 window 对象；在Node.js中是 global 对象。在全局作用域中声明的变量和函数，在程序的任何地方都可以被访问到。在ES6之前，使用 var 声明的变量，即使在函数内部没有使用 var 声明，也会自动成为全局变量（不推荐）。 全局作用域污染是一个常见问题，因为过多的全局变量容易导致命名冲突和难以维护的代码。

2. 函数作用域 (Function Scope)： 这是JS中最基础的作用域单元。每个函数在被定义时都会创建一个新的作用域。在函数内部使用 var 声明的变量，只在该函数内部可见，外部无法直接访问。函数作用域是隔离变量的有效手段，避免了变量的冲突。ES6之前，这是唯一一种能创建新作用域的方式（除了全局）。

   var globalMessage = "Hello from global";
   
   function greet() {
     var greeting = "Hello from function"; // 函数作用域变量
     console.log(greeting);
     console.log(globalMessage); // 可以访问全局变量
   }
   
   greet();
   // console.log(greeting); // 报错：greeting is not defined

3. 块级作用域 (Block Scope)： 这是ES6引入的重大改进，主要通过 let 和 const 关键字实现。块级作用域指的是由 {} 包裹的代码块（如 if 语句、for 循环、while 循环、甚至是一个独立的 {}）所创建的作用域。在块级作用域中声明的 let 或 const 变量，只在该代码块内部有效，外部无法访问。这极大地减少了 var 带来的变量提升（hoisting）和变量覆盖等问题，让代码的变量管理更加精细和可控。

   if (true) {
     var oldVar = "我是var，函数作用域";
     let newLet = "我是let，块级作用域";
     const newConst = "我是const，也是块级作用域";
     console.log(newLet); // 正常访问
     console.log(newConst); // 正常访问
   }
   
   console.log(oldVar); // 正常访问，因为var是函数作用域（或全局）
   // console.log(newLet); // 报错：newLet is not defined
   // console.log(newConst); // 报错：newConst is not defined
   
   for (let i = 0; i < 3; i++) {
     // i 每次循环都是一个新的块级作用域变量
     setTimeout(() => console.log(i), 100); // 正常输出 0, 1, 2
   }
   // 如果这里用 var i，会输出 3, 3, 3，因为 i 是函数作用域，循环结束后 i 变成了 3

理解这三种作用域的区别，对于编写健壮、可维护的JavaScript代码至关重要。let 和 const 的引入，让JS的变量作用域管理变得更加直观和安全，也让开发者能更好地利用词法作用域的特性来组织代码。

本篇关于《JS作用域解析与作用域链详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！