深入理解 JavaScript 闭包与作用域：从困惑到精通

yuki_uix
0 阅读14分钟

在学习 JavaScript 的过程中，闭包一直是让我既着迷又困惑的概念。第一次遇到"循环中的 setTimeout"问题时，我完全不理解为什么所有输出都是同一个值。后来深入学习了作用域和闭包，才恍然大悟：原来闭包不仅仅是"函数能访问外部变量"这么简单，它背后有着深刻的设计思想。这篇文章是我的学习总结，希望能帮你彻底理解闭包和作用域的本质。

从一个经典 Bug 说起

先看一个让无数开发者困惑的经典问题：

// 环境：浏览器 / Node.js 18+
// 场景：循环中的 setTimeout

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

// 期望输出：0, 1, 2, 3, 4 (每秒一个)
// 实际输出：5, 5, 5, 5, 5 (每秒一个)

为什么会这样？这个问题的答案就藏在作用域和闭包的机制中。

作用域基础

什么是作用域

我的理解是，作用域（Scope）就是变量的可访问范围。它决定了代码中哪些地方可以访问某个变量。

JavaScript 有三种作用域：

// 环境：浏览器 / Node.js 18+
// 场景：三种作用域演示

// 1. 全局作用域
var globalVar = 'global';

function foo() {
  // 2. 函数作用域
  var functionVar = 'function';
  
  if (true) {
    // 3. 块级作用域（ES6+）
    let blockVar = 'block';
    const blockConst = 'const';
    
    console.log(globalVar);    // ✅ 'global'
    console.log(functionVar);  // ✅ 'function'
    console.log(blockVar);     // ✅ 'block'
  }
  
  console.log(blockVar); // ❌ ReferenceError: blockVar is not defined
}

foo();
console.log(functionVar); // ❌ ReferenceError: functionVar is not defined

词法作用域（静态作用域）

JavaScript 采用词法作用域（Lexical Scope），也叫静态作用域。这意味着：

函数的作用域在 函数定义时 就确定了，而不是在调用时确定。

// 环境：浏览器 / Node.js 18+
// 场景：词法作用域 vs 动态作用域

var name = 'global';

function foo() {
  console.log(name);
}

function bar() {
  var name = 'bar';
  foo(); // 在 bar 内部调用 foo
}

bar(); // 输出什么？

答案：'global'

为什么？因为 JavaScript 是词法作用域（静态作用域）：

  • foo 函数在全局作用域中定义
  • 它的作用域链是：foo 作用域 → 全局作用域
  • 无论在哪里调用，都会在全局作用域中查找 name

如果是动态作用域（假设）：

  • foo 在 bar 中调用
  • 会先在 bar 的作用域中查找 name
  • 输出会是 'bar'

为什么 JavaScript 选择词法作用域（静态作用域）？

  1. 可预测性：代码行为只取决于代码结构，不取决于调用路径
  2. 性能优化：编译器可以在编译时确定变量位置
  3. 安全性：避免外部调用影响内部变量

作用域链

当访问一个变量时，JavaScript 会沿着作用域链向上查找：

graph BT
    Inner[内层作用域] --> Middle[中层作用域]
    Middle --> Outer[外层作用域]
    Outer --> Global[全局作用域]
    Global --> Null[查找结束]
    
    style Inner fill:#FFE4B5
    style Middle fill:#FFB6C1
    style Outer fill:#87CEEB
    style Global fill:#90EE90

// 环境：浏览器 / Node.js 18+
// 场景：作用域链查找

var a = 'global a';

function outer() {
  var b = 'outer b';
  
  function middle() {
    var c = 'middle c';
    
    function inner() {
      var d = 'inner d';
      
      // 查找过程：
      console.log(d); // inner 作用域找到
      console.log(c); // inner → middle 找到
      console.log(b); // inner → middle → outer 找到
      console.log(a); // inner → middle → outer → global 找到
      console.log(e); // inner → middle → outer → global → 未找到 → ReferenceError
    }
    
    inner();
  }
  
  middle();
}

outer();

var、let、const 的区别

作用域差异

// 环境：浏览器 / Node.js 18+
// 场景：var vs let/const 的作用域

// var：函数作用域
function testVar() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1 - var 不受 if 块限制
}

// let/const：块级作用域
function testLet() {
  if (true) {
    let y = 1;
    const z = 2;
  }
  console.log(y); // ReferenceError - let 受块级作用域限制
}

变量提升（Hoisting）

// 环境：浏览器 / Node.js 18+
// 场景：变量提升

// var 的提升
console.log(a); // undefined (声明被提升，赋值未提升)
var a = 1;

// 等价于：
var a;
console.log(a); // undefined
a = 1;

// let/const 的提升
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 2;

// 函数声明的提升
foo(); // 'foo' - 函数声明会被完整提升
function foo() {
  console.log('foo');
}

// 函数表达式不会提升
bar(); // TypeError: bar is not a function
var bar = function() {
  console.log('bar');
};

暂时性死区（TDZ）

// 环境：浏览器 / Node.js 18+
// 场景：暂时性死区

var x = 'outer';

function test() {
  // TDZ 开始
  console.log(x); // ReferenceError (不是 'outer'!)
  
  let x = 'inner'; // TDZ 结束
  console.log(x); // 'inner'
}

test();

为什么要有 TDZ？

  1. 更容易发现错误：在声明前访问变量会报错，而不是返回 undefined
  2. const 语义：const 必须在声明时初始化，TDZ 保证了这一点
  3. 一致性：let 和 const 保持一致的行为

实际应用场景

// 环境：浏览器 / Node.js 18+
// 场景：何时用 var/let/const

// ✅ 优先使用 const（不会重新赋值的变量）
const API_URL = 'https://api.example.com';
const user = { name: 'Alice' }; // 对象本身不变，属性可变

// ✅ 需要重新赋值时使用 let
let count = 0;
for (let i = 0; i < 10; i++) {
  count += i;
}

// ❌ 避免使用 var（除非需要兼容老版本浏览器）
var oldStyle = 'not recommended';

闭包深入理解

闭包的本质

闭包 = 函数 + 词法环境

我的理解是，闭包是指能够访问外部函数作用域中变量的函数，即使外部函数已经执行完毕。

// 环境：浏览器 / Node.js 18+
// 场景：闭包的基本形式

function outer() {
  const name = 'outer';
  
  function inner() {
    console.log(name); // 访问外部变量
  }
  
  return inner;
}

const fn = outer(); // outer 执行完毕
fn(); // 'outer' - 但 inner 仍能访问 name

关键理解：

  1. outer 执行完毕后，正常情况下它的作用域应该被销毁
  2. 但因为 inner 函数仍然引用着 name 变量
  3. JavaScript 引擎会保留这个词法环境
  4. 这就是闭包

如何识别闭包

判断标准：

  1. 函数嵌套
  2. 内部函数引用外部函数的变量
  3. 内部函数被返回或在外部使用
// 环境：浏览器 / Node.js 18+
// 场景：识别闭包

// ✅ 例子 1：这是闭包
function createCounter() {
  let count = 0; // 外部变量
  return function() {
    return ++count; // 内部函数引用外部变量
  };
}

// ✅ 例子 2：这也是闭包
function outer() {
  const name = 'outer';
  setTimeout(function() {
    console.log(name); // setTimeout 的回调引用外部变量
  }, 100);
}

// ❌ 例子 3：这不是闭包
function outer() {
  const name = 'outer';
  function inner() {
    console.log('hello'); // 没有引用外部变量
  }
  return inner;
}

// ❌ 例子 4：这不是闭包（this 不是闭包变量）
const obj = {
  name: 'obj',
  getName: function() {
    return this.name; // this 是动态的，不是闭包
  }
};

闭包的生命周期

// 环境：浏览器 / Node.js 18+
// 场景：闭包的生命周期

function createClosure() {
  let data = 'sensitive data';
  
  return {
    getData: function() {
      return data;
    },
    setData: function(newData) {
      data = newData;
    }
  };
}

const closure1 = createClosure(); // 创建闭包 1
const closure2 = createClosure(); // 创建闭包 2

closure1.setData('new data 1');
closure2.setData('new data 2');

console.log(closure1.getData()); // 'new data 1'
console.log(closure2.getData()); // 'new data 2'

// 每次调用 createClosure 都创建独立的闭包
// 它们有各自独立的词法环境

闭包的经典案例

循环中的闭包问题

回到开头的问题：

// 环境：浏览器 / Node.js 18+
// 场景：循环中的闭包问题

// ❌ 问题代码
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 所有输出都是 5
  }, i * 1000);
}

// 为什么？
// 1. var 是函数作用域，所有循环共享同一个 i
// 2. setTimeout 的回调是闭包，引用了变量 i
// 3. 等到回调执行时，循环已经结束，i 已经是 5

解决方案 1：使用 let（最简单）

// 环境：浏览器 / Node.js 18+
// 场景：使用 let 解决

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 0, 1, 2, 3, 4
  }, i * 1000);
}

// 为什么有效？
// let 是块级作用域，每次循环创建新的 i
// 每个闭包捕获的是不同的 i

解决方案 2：使用 IIFE（立即执行函数）

// 环境：浏览器 / Node.js 18+
// 场景：使用 IIFE 创建独立作用域

for (var i = 0; i < 5; i++) {
  (function(j) { // IIFE 创建独立作用域
    setTimeout(function() {
      console.log(j); // 0, 1, 2, 3, 4
    }, j * 1000);
  })(i); // 立即执行，传入当前 i 的值
}

解决方案 3：使用额外的闭包函数

// 环境：浏览器 / Node.js 18+
// 场景：创建闭包工厂函数

function createLogger(value) {
  return function() {
    console.log(value);
  };
}

for (var i = 0; i < 5; i++) {
  setTimeout(createLogger(i), i * 1000);
}

数据私有化

闭包最常见的应用是实现数据私有化：

// 环境：浏览器 / Node.js 18+
// 场景：使用闭包实现私有变量

function createBankAccount(initialBalance) {
  // 私有变量
  let balance = initialBalance;
  
  // 公共接口
  return {
    deposit: function(amount) {
      if (amount > 0) {
        balance += amount;
        return balance;
      }
    },
    
    withdraw: function(amount) {
      if (amount > 0 && amount <= balance) {
        balance -= amount;
        return balance;
      }
    },
    
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(1000);
console.log(account.getBalance()); // 1000
account.deposit(500);
console.log(account.getBalance()); // 1500

// ❌ 无法直接访问私有变量
console.log(account.balance); // undefined

模块模式

// 环境：浏览器 / Node.js 18+
// 场景：使用闭包实现模块模式

const Calculator = (function() {
  // 私有变量和方法
  let result = 0;
  
  function validate(value) {
    return typeof value === 'number' && !isNaN(value);
  }
  
  // 公共 API
  return {
    add: function(n) {
      if (validate(n)) {
        result += n;
      }
      return this; // 支持链式调用
    },
    
    subtract: function(n) {
      if (validate(n)) {
        result -= n;
      }
      return this;
    },
    
    multiply: function(n) {
      if (validate(n)) {
        result *= n;
      }
      return this;
    },
    
    getResult: function() {
      return result;
    },
    
    reset: function() {
      result = 0;
      return this;
    }
  };
})();

// 使用
const value = Calculator
  .add(10)
  .multiply(2)
  .subtract(5)
  .getResult();

console.log(value); // 15

闭包的实践应用

防抖（Debounce）

// 环境：浏览器 / Node.js 18+
// 场景：使用闭包实现防抖

function debounce(fn, delay) {
  let timer = null; // 闭包变量
  
  return function(...args) {
    // 清除之前的定时器
    if (timer) {
      clearTimeout(timer);
    }
    
    // 设置新的定时器
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 使用示例
const handleInput = debounce(function(e) {
  console.log('Input value:', e.target.value);
}, 500);

// input.addEventListener('input', handleInput);

节流（Throttle）

// 环境：浏览器 / Node.js 18+
// 场景：使用闭包实现节流

function throttle(fn, delay) {
  let lastTime = 0; // 闭包变量
  
  return function(...args) {
    const now = Date.now();
    
    if (now - lastTime >= delay) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

// 使用示例
const handleScroll = throttle(function() {
  console.log('Scroll position:', window.scrollY);
}, 1000);

// window.addEventListener('scroll', handleScroll);

单例模式

// 环境：浏览器 / Node.js 18+
// 场景：使用闭包实现单例模式

const Singleton = (function() {
  let instance = null; // 闭包变量，存储唯一实例
  
  function createInstance() {
    return {
      name: 'Singleton',
      getData: function() {
        return 'Singleton data';
      }
    };
  }
  
  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const obj1 = Singleton.getInstance();
const obj2 = Singleton.getInstance();

console.log(obj1 === obj2); // true - 同一个实例

闭包与其他概念的关系

闭包 vs this

// 环境：浏览器 / Node.js 18+
// 场景：闭包和 this 的组合

const obj = {
  name: 'obj',
  
  // 方式 1：普通函数 + 闭包
  getNameClosure: function() {
    const self = this; // 保存 this 的引用
    return function() {
      return self.name; // 通过闭包访问
    };
  },
  
  // 方式 2：箭头函数（本质也是闭包）
  getNameArrow: function() {
    return () => {
      return this.name; // 箭头函数的 this 继承自外层
    };
  }
};

const fn1 = obj.getNameClosure();
const fn2 = obj.getNameArrow();

console.log(fn1()); // 'obj'
console.log(fn2()); // 'obj'

闭包 vs 原型

两种不同的数据组织方式：

// 环境：浏览器 / Node.js 18+
// 场景：闭包 vs 原型

// 方案 1：使用闭包（数据私有，每个实例都有副本）
function createPersonWithClosure(name) {
  let _name = name; // 私有变量
  
  return {
    getName: function() {
      return _name;
    },
    setName: function(newName) {
      _name = newName;
    }
  };
}

// 方案 2：使用原型（数据公开，方法共享）
function PersonWithPrototype(name) {
  this.name = name; // 公开属性
}

PersonWithPrototype.prototype.getName = function() {
  return this.name;
};

PersonWithPrototype.prototype.setName = function(newName) {
  this.name = newName;
};

// 对比
const p1 = createPersonWithClosure('Alice');
const p2 = createPersonWithClosure('Bob');
console.log(p1.getName === p2.getName); // false - 每个实例都有方法副本

const p3 = new PersonWithPrototype('Alice');
const p4 = new PersonWithPrototype('Bob');
console.log(p3.getName === p4.getName); // true - 共享原型上的方法

何时用闭包，何时用原型？

特性闭包原型
数据私有✅ 天然支持❌ 需要其他手段
内存占用⚠️ 每个实例都有方法副本✅ 所有实例共享方法
性能⚠️ 闭包查找稍慢✅ 原型链查找快
适用场景单例、模块、私有数据多实例、方法共享

闭包 vs 类私有字段

// 环境：浏览器 / Node.js 18+ (支持私有字段)
// 场景：闭包 vs 类私有字段

// 方案 1：闭包实现私有
function createCounter() {
  let count = 0;
  
  return {
    increment: () => ++count,
    getCount: () => count
  };
}

// 方案 2：类私有字段（ES2022）
class Counter {
  #count = 0; // 私有字段
  
  increment() {
    return ++this.#count;
  }
  
  getCount() {
    return this.#count;
  }
}

// 使用
const counter1 = createCounter();
const counter2 = new Counter();

counter1.increment();
counter2.increment();

console.log(counter1.getCount()); // 1
console.log(counter2.getCount()); // 1

区别：

  • 语法：类私有字段语法更清晰
  • 性能：类私有字段性能更好
  • 兼容性：闭包支持更广泛
  • 灵活性：闭包更灵活（可以动态创建）

内存管理

内存泄漏的识别

// 环境：浏览器 / Node.js 18+
// 场景：常见的内存泄漏

// ❌ 内存泄漏 1：意外的全局变量
function createLeak() {
  leaked = 'I am a global variable'; // 忘记 var/let/const
}

// ❌ 内存泄漏 2：被遗忘的定时器
function setupTimer() {
  const data = new Array(1000000).fill('data');
  
  setInterval(function() {
    console.log(data.length); // data 永远不会被回收
  }, 1000);
}

// ❌ 内存泄漏 3：循环引用（老版本 IE）
function createCircularRef() {
  const element = document.getElementById('myElement');
  
  element.onclick = function() {
    console.log(element.id); // element 和 onclick 互相引用
  };
}

// ✅ 解决方案：及时清理
function setupTimerCorrectly() {
  const data = new Array(1000000).fill('data');
  
  const timer = setInterval(function() {
    console.log(data.length);
  }, 1000);
  
  // 在适当的时候清理
  setTimeout(() => {
    clearInterval(timer);
  }, 10000);
}

内存优化建议

// 环境：浏览器 / Node.js 18+
// 场景：闭包的内存优化

// ❌ 不好：闭包引用了不必要的大对象
function createClosure() {
  const hugeData = {
    array: new Array(1000000).fill('data'),
    metadata: { size: 1000000 }
  };
  
  return function() {
    return hugeData.metadata.size; // 只需要 size，但整个 hugeData 都不能回收
  };
}

// ✅ 优化：只保留需要的数据
function createOptimizedClosure() {
  const hugeData = {
    array: new Array(1000000).fill('data'),
    metadata: { size: 1000000 }
  };
  
  const size = hugeData.metadata.size; // 提取需要的数据
  
  return function() {
    return size; // 只引用 size，hugeData 可以被回收
  };
}

ES6+ 的演进

IIFE 的历史作用

// 环境：浏览器（ES5 时代）
// 场景：IIFE 创建独立作用域

// ES5: 使用 IIFE 避免全局污染
(function() {
  var privateVar = 'private';
  
  window.myModule = {
    getPrivate: function() {
      return privateVar;
    }
  };
})();

// ES6+: 使用模块
// module.js
const privateVar = 'private';

export function getPrivate() {
  return privateVar;
}

块级作用域的引入

// 环境：浏览器 / Node.js 18+
// 场景：块级作用域的应用

// ES5: 需要 IIFE
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 100);
  })(i);
}

// ES6+: 直接用 let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

常见陷阱与最佳实践

陷阱 1：循环中创建闭包

// 环境：浏览器 / Node.js 18+
// 场景：循环中创建多个闭包

function createFunctions() {
  const result = [];
  
  // ❌ 错误
  for (var i = 0; i < 3; i++) {
    result[i] = function() {
      return i; // 所有函数都引用同一个 i
    };
  }
  
  return result;
}

const fns = createFunctions();
console.log(fns[0]()); // 3
console.log(fns[1]()); // 3
console.log(fns[2]()); // 3

// ✅ 修复
function createFunctionsCorrect() {
  const result = [];
  
  for (let i = 0; i < 3; i++) { // 使用 let
    result[i] = function() {
      return i;
    };
  }
  
  return result;
}

陷阱 2：React Hooks 中的闭包陷阱

// 环境：React
// 场景：useEffect 中的闭包陷阱

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // ❌ 闭包陷阱：这个定时器始终引用初始的 count (0)
    const timer = setInterval(() => {
      console.log(count); // 始终输出 0
    }, 1000);
    
    return () => clearInterval(timer);
  }, []); // 空依赖数组
  
  // ✅ 修复方案 1：添加依赖
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 正确的 count
    }, 1000);
    
    return () => clearInterval(timer);
  }, [count]); // 依赖 count
  
  // ✅ 修复方案 2：使用函数式更新
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => {
        console.log(c); // 最新的 count
        return c;
      });
    }, 1000);
    
    return () => clearInterval(timer);
  }, []);
  
  return <div>{count}</div>;
}

最佳实践总结

// 环境：浏览器 / Node.js 18+
// 场景：闭包使用的最佳实践

// ✅ 1. 优先使用 const 和 let
const createCounter = () => {
  let count = 0;
  return () => ++count;
};

// ✅ 2. 及时清理不需要的闭包
function setupEvent() {
  const handler = () => console.log('click');
  element.addEventListener('click', handler);
  
  // 清理
  return () => {
    element.removeEventListener('click', handler);
  };
}

// ✅ 3. 避免在闭包中保留不必要的大对象
function createOptimized() {
  const data = fetchLargeData();
  const summary = processSummary(data);
  
  // 只返回需要的数据
  return () => summary;
}

// ✅ 4. 使用模块化替代 IIFE
// 现代开发中，优先使用 ES Module

// ✅ 5. 注意异步操作中的闭包
async function processItems(items) {
  for (let item of items) { // 使用 let
    await processItem(item);
  }
}

设计思想

为什么 JavaScript 需要闭包

闭包不是 JavaScript 独有的，但 JavaScript 把闭包发挥到了极致：

  1. 函数是一等公民：函数可以作为值传递、返回
  2. 词法作用域：函数记住定义时的环境
  3. 垃圾回收机制：自动管理内存，闭包变量不会被随意回收

延伸思考

在 AI 辅助编程时代的意义

理解闭包在 AI 时代仍然重要：

1. 识别 AI 代码中的问题

AI 可能生成这样的代码：

function setupHandlers(items) {
  for (var i = 0; i < items.length; i++) {
    items[i].onclick = function() {
      console.log(i); // ❌ 闭包陷阱
    };
  }
}

如果你理解闭包，就会知道这有问题。

2. 向 AI 提出更精准的问题

  • 含糊：❌ "为什么这个循环有问题？"
  • 精准：✅ "为什么循环中的闭包都引用同一个变量？如何修复？"

3. 内存优化的判断

AI 生成的闭包代码可能有内存泄漏，你需要有能力识别和优化。

待探索的问题

在研究闭包的过程中，我产生了一些新的疑问：

  1. 闭包在 V8 引擎中是如何实现的？ 词法环境的数据结构是什么样的？
  2. 不同浏览器的闭包实现有差异吗？ 性能表现有什么不同？
  3. WebAssembly 如何处理闭包？ 没有垃圾回收的语言如何实现类似特性？
  4. 未来的 JavaScript 会如何改进闭包？ 有没有更好的私有化方案？

小结

闭包是 JavaScript 最强大也最容易误用的特性。理解闭包的关键是：

  1. 理解作用域链：词法作用域、作用域链查找
  2. 理解闭包本质：函数 + 词法环境
  3. 掌握常见模式：循环、私有数据、模块、柯里化
  4. 注意内存管理：避免泄漏、及时清理
  5. 知道何时使用：闭包 vs 原型 vs 类私有字段

闭包虽然有坑，但理解了它的机制后，就能写出更优雅、更安全的代码。

这篇文章是我的学习总结，而非权威教程。如果你有不同的看法或补充，欢迎交流讨论。

最后留一个开放性问题：在你的实际开发中，遇到过哪些闭包相关的坑？你是如何解决的？

参考资料

avatar
文章
阅读
粉丝