JavaScript闭包原理与五种经典应用场景解析

作者:异步漫步

时间:2026-10-22

浏览:175

本文深入解析JavaScript中闭包的定义与核心作用,即读取函数内部变量并使变量始终保持在内存中。通过五个具体代码示例,演示了闭包在计数器、参数传递、异步循环控制等场景下的实际应用,帮助开发者理解闭包的运行机制与常见用法。

文章目录

闭包的基本概念与原理

闭包的基本概念

在JavaScript语言中,如果内部函数被外部函数的变量所引用,便构成了闭包。通俗而言,闭包是指那些有权访问另一个函数作用域中变量的函数。

闭包的核心作用

闭包的主要功能包括:

第一,它能够访问函数内部的局部变量;第二,它能使这些变量的值一直保留在内存中,不会随函数执行结束而被销毁。

闭包的五个经典代码示例

以下是闭包的具体应用示例:


function a() { 
  var i = 0; 
 function b() {
  console.log(++i);
 } 
 return b;
}      
var c = a();  //执行完var c=a()后,变量c指向了函数b,再执行c()后就会显示i的值(为1)。
c();    //输出1

示例二展示了自执行函数的写法。通过立即执行函数表达式(IIFE)创建私有变量i,并返回一个内部函数,每次调用该内部函数时,变量i的值会递增并输出。


(function() { 
var i = 0; 
 return function(){
   console.log(++i);
  }
})()();     //输出1

示例三演示了通过参数传递初始化值。外部函数接收参数i,内部函数引用该参数并递增输出。这种方式同样实现了状态的保持。


(function(i) { 
 return function(){
   console.log(++i);
  }
})(0)();     //输出1

示例四涉及异步操作中的闭包应用。在for循环中使用setTimeout时,通过立即执行函数将当前迭代变量i的值传递给内部函数,确保异步回调能正确输出0、1、2,而非循环结束后的最终值。


for (var i = 0; i < 3; i++) {
 setTimeout((function(i) {    
  return function() {
   console.log(i);
  };
 })(i), 2000);
 console.log(i+10);
}      //输出 10 11 12 (隔两秒后)0 1 2

示例五展示了另一种异步场景下的写法差异。若未在setTimeout中正确封装闭包,可能导致同步输出与异步输出的顺序混乱,执行结果可能立即输出0、10、1、11等,随后在两秒后输出最终结果,这通常是由于变量作用域处理不当导致的。


for (var i = 0; i < 3; i++) {
 setTimeout((function(i) {
  return function() {
   console.log(i);
  };
 })(i)(), 2000);
 console.log(i+10);
}      //立即输出 0 10 1 11 2 12 ,(两秒后运行程序结束)

以上内容涵盖了闭包的核心概念与典型代码案例,希望能为读者提供清晰的理解与实用的参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章