JS如何实现词法作用域？作用域链

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

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

解决方案

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

举个例子，你有一个外部函数

outer

x

outer

inner

inner

x

outer

inner

outer

x

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]]

[[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();

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

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

30

查看详情

词法作用域如何实现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如何实现词法作用域？作用域链的详细内容，更多请关注php中文网其它相关文章！