JavaScript闭包详解：作用域、原理及经典场景解决方案

一、JavaScript作用域的演变

理解闭包的基础在于掌握JavaScript的作用域机制。在ES6标准引入之前，JavaScript仅具备全局作用域和函数作用域；ES6的出台新增了块级作用域，这极大地改变了变量的生命周期与管理方式。

第1步：全局作用域的特征

全局变量挂载在 window 对象下，可在网页任意位置访问。定义过多全局变量易导致命名冲突，需注意作用域隔离。

var globalName = 'global';
function getName() {
  console.log(globalName); // global
  var name = 'inner';
  console.log(name); // inner
}
getName();
console.log(name); // ReferenceError: name is not defined (局部变量不可访问)
console.log(globalName); // global

// 注意：省略var声明会污染全局
function setName() {
  vName = 'setName'; // 隐含全局变量
}
setName();
console.log(vName); // setName

第2步：函数作用域的限制

在函数内部定义的变量仅在该函数内部有效。当函数执行完毕后，其内部局部变量通常会被销毁（除非被闭包引用）。

function getName() {
  var name = 'inner';
  console.log(name); // inner
}
getName();
console.log(name); // ReferenceError: name is not defined

第3步：块级作用域与let

ES6引入了 let 关键字，定义了块级作用域（如 if 或 for 语句后的 {...} 区域）。let 声明的变量存在“暂时性死区”，即变量必须在声明后才能使用。

console.log(a); // ReferenceError: a is not defined
if (true) {
  let a = '123';
  console.log(a); // 123
}
console.log(a); // ReferenceError: a is not defined

二、闭包的核心概念与原理

MDN对闭包的定义为：“一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包。”简单来说，闭包使得内层函数可以访问外层函数的作用域。

第1步：闭包的基本表现

通过返回内部函数或保持对外部变量的引用，闭包可以让原本应被销毁的局部变量保存在内存中。

function fun1() {
  var a = 1;
  return function () { // 返回内部匿名函数，形成闭包
    console.log(a);   // 访问外层变量a
  };
}
var result = fun1();
result(); // 输出 1

第2步：作用域链与产生原因

当访问变量时，JS引擎会沿着作用域链向上查找：当前作用域 -> 父级作用域 -> ... -> 全局作用域(window)。只要代码环境中存在指向父级作用域的引用，闭包即产生。

• 返回函数： 最常见的形式，如上述示例。
• 外部引用： 将内部函数赋值给外部变量，使父级作用域不被GC回收。

// 外部引用形式
var fun3;
function fun1() {
  var a = 2;
  fun3 = function () { // 内部函数被赋给外部变量fun3
    console.log(a);     // 依然能访问a
  };
}
fun1();
fun3(); // 输出 2

第3步：常见应用场景

除了显式返回函数，许多异步操作天然包含闭包：

1. 定时器与事件监听： 回调函数捕获了创建时的上下文。

setTimeout(function handler() {
  console.log('1'); // 闭包捕获上下文
}, 1000);
$('#app').click(function () {
  console.log('Event Listener');
});

• 作为函数参数： 高阶函数常接收回调函数，从而形成闭包。

function foo() {
  var a = 2;
  function baz() {
    console.log(a); // 访问foo内部的a
  }
  bar(baz); // 将baz传给bar
}
function bar(fn) {
  fn(); // 执行fn
}
foo(); // 输出 2

• IIFE（立即执行函数表达式）： 创建独立作用域，既保护变量又不污染全局。

var a = 2;
(function IIFE() {
  console.log(a); // 输出 2，利用闭包访问全局a
})();

三、经典难点：循环输出问题的解决

在处理循环定时器时，开发者常遇到输出结果不符预期的问题。这是理解闭包与执行机制的关键实战。

for (var i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i); 
  }, 0);
}
// 依次输出 6个6

原理解析： var 声明的 i 是全局变量（或函数级变量）。由于JS单线程模型，setTimeout 是宏任务，需等待主线程同步任务（for循环）结束后才执行。此时 i 已自增为6，所有回调打印的都是同一个全局变量 i 的最终值。

解决方案1：利用IIFE捕获变量

通过IIFE创建一个新的作用域，将当前的 i 值传递给新作用域的参数并保存，从而切断对循环变量的直接引用。

for (var i = 1; i <= 5; i++) {
  (function (j) { // j捕获当前i的值
    setTimeout(function timer() {
      console.log(j); // 输出各自的 i 值
    }, 0);
  })(i);
}

解决方案2：使用ES6 let

let 具有块级作用域，每次循环都会创建一个独立的 i 绑定。这使得每个定时器回调都能正确访问对应迭代期的变量副本。

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

解决方案3：定时器传入第三个参数

setTimeout 支持在延迟时间后传入额外参数，这些参数会传递给回调函数。这相当于在每个时间点手动传入了当时的 i 值。

for(var i=1; i<=5; i++) {
  setTimeout(function(j) { // j接收传入的i
    console.log(j);        // 输出 1, 2, 3, 4, 5
  }, 0, i);                 // i作为第三个参数传入
}

以上就是JavaScript中关于作用域与闭包机制的详细解析，包括经典问题的多种解决思路，更多关于JavaScript进阶技巧的资料请关注本站其它相关文章！