通过示例彻底搞懂js闭包

作者：木棉时间：2026-10-22 06:57:11浏览：591

本文通过六个具体示例深入解析JavaScript闭包机制。从基础变量访问到循环中的变量捕获问题，再到独立闭包与全局闭包的对比，详细阐述闭包如何保存函数作用域内的局部变量及其对内存引用的影响，帮助开发者理解并正确应用闭包。

闭包基础概念与变量访问

示例1


function sayHello(name) 
{
 var text = 'Hello ' + name;
 var sayAlert = function() { console.log(text); }
 sayAlert();
}

sayHello("Bob") // 输出"Hello Bob"

在sayHello()函数内部定义并立即调用了sayAlert()函数。此时，作为内层函数的sayAlert()能够直接访问外层函数sayHello()中定义的text变量。

示例2


function sayHello2(name) 
{
 var text = 'Hello ' + name; // 局部变量
 var sayAlert = function() { console.log(text); }
 return sayAlert;
}

var say2 = sayHello2("Jane");
say2(); // 输出"Hello Jane"

循环中的闭包陷阱与解决方案

示例3


function buildList(list) {
 var result = [];
 for(var i = 0; i < list.length; i++) {
  var item = 'item' + list[i];
  result.push( 
    function() {
      console.log(item + ' ' + list[i]);
    } 
   );
 }
 return result;
}

var fnlist = buildList([1,2,3]);
for (var j = 0; j < fnlist.length; j++) {
  fnlist[j](); 
}

运行结果：连续输出3次"item3 undefined"

解析：执行buildList函数后返回一个result数组，其中存放了3个匿名函数。这3个匿名函数实际上构成了3个闭包，因为它们都能访问父函数的局部变量。由于循环结束后变量i的最终值为3，因此闭包内保留的i值也为3，导致访问list[3]时返回undefined，而item变量的值为"item3"。

修改代码如下：


function buildList(list) {
 var result = [];
 for(var i = 0; i < list.length; i++) {
  var item = 'item' + list[i];
  result.push( 
    (function(i) {
      console.log(item + ' ' + list[i]);
    })(i)
   );
 }
 return result;
}

var fnlist = buildList([1,2,3]);

运行结果：


item1 1
item2 2
item3 3

解释：虽然此处传递了一个数组作为参数，但返回的是三个自执行函数。

独立闭包的变量隔离

示例4


function newClosure(someNum, someRef) 
{
 var anArray = [1,2,3];
 var num = someNum;
 var ref = someRef;
 return function(x) 
 {
 num += x;
 anArray.push(num);
 console.log('num: ' + num + "; " + 'anArray ' + anArray.toString() + "; " + 'ref.someVar ' + ref.someVar);
 }
}
closure1 = newClosure(40, {someVar: "closure 1"}); 
closure2 = newClosure(1000, {someVar: "closure 2"}); 
closure1(5); // 打印"num: 45; anArray 1,2,3,45; ref.someVar closure 1"
closure2(-10); // 打印"num: 990; anArray 1,2,3,990; ref.someVar closure 2"

每次调用newClosure()都会创建独立的闭包，它们各自持有的局部变量num与ref的值互不相同。

变量声明顺序对闭包的影响

示例5


function sayAlice() 
{
 var sayAlert = function() { console.log(alice); }
 var alice = 'Hello Alice';
 return sayAlert;
}

var sayAlice2 = sayAlice();
sayAlice2(); // 输出"Hello Alice"

alice变量虽然在sayAlert函数定义之后才声明，但这并不影响代码执行。因为返回的函数sayAlice2所指向的闭包包含了sayAlice()函数中的所有局部变量，自然也包括alice变量，因此可以正常打印出"Hello Alice"。

全局变量与闭包的内存共享

示例6


function setupSomeGlobals() {
 var num = 666;
 gAlertNumber = function() { console.log(num); }
 gIncreaseNumber = function() { num++; }
 gSetNumber = function(x) { num = x; }
}
setupSomeGlobals();
gAlertNumber(); // 输出666
gIncreaseNumber();
gAlertNumber(); // 输出667
gSetNumber(5);
gAlertNumber(); // 输出5

解释：首先gAlertNumber、gIncreaseNumber、gSetNumber是三个全局变量，且它们的值均为匿名函数，而这三个匿名函数本身都是闭包。它们操作的num变量都指向保存在内存中的同一个num，因此会得出上述结果。

以上这篇通过示例彻底搞懂js闭包就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。

作者最新文章

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01

为什么JS中typeof []返回object：数组类型检测误区解析

2026-11-04 19:50:47