闭包--解析

最新推荐文章于 2025-03-31 11:16:00 发布

原创最新推荐文章于 2025-03-31 11:16:00 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

Js 专栏收录该内容

66 篇文章

订阅专栏

本文详细解析了JavaScript中闭包的概念及其工作原理，探讨了闭包如何帮助避免全局变量污染并提供私有成员，同时提供了实用示例来展示闭包在模块化代码和循环中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：什么是闭包？

官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
一般性理解：闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
1）函数嵌套函数；

2）内部函数可以应用外部函数的参数和变量；

3）参数和变量不会被垃圾回收机制所收回；

示例：a）；变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

 var n=1;       //全局变量
　　function f1(){
　　　　alert(n);
　　}
　　f1(); //运行结果：1

另一方面，在函数外部自然无法读取函数内的局部变量。

 function f1(){
　　　　var n=999;
　　} 
　　alert(n); // error

    b)简单闭包就是函数的嵌套；

function Out()
  {
 var a = 5;
 function Inner()
  {
    alert(a)  ;
  }  
 return Inner;  
  }
 var Link = Out();
 Link(); 

这个变量a是不会被JS中的垃圾回收机制所回收的，它会一直保存在内存当中。

二，闭包有哪些好处，应用在哪里？

希望有个变量长期驻扎在内存当中。
避免全局变量的污染；
私有成员的存在；

示例：a）：

代码一：

var a = 1;   //这个示例演示的是外部变量对函数的污染；
function outer()
  {
    function inner()
     {
        a++;
        alert(a); 
     }
    return inner; 
  }
var ss = outer();
ss();       //2
ss();       //3
ss();       //4
ss();       //5
alert(a)    //5

function outer()   //这个示例演示的将变量局部化的效果；
{
   var a = 1;
  return function()
    {
  a++;
  alert(a);
 } 
  
}
var ss = outer();
ss();      //2
ss();      //3
alert(a);  //error

闭包的用途：

 function f1(){ 
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。

这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

三，闭包的用法：

模块化代码
在循环中直接找到元素的索引；

var aaa = (function(){var a = 1; return function(){a++;alert(a)}})();//模块化代码
aaa();  //2
aaa();  //3

可以利用下面的作为练习：

下面两个函数是同一个函数，也就是函数声明改写为函数表达式： 
 //函数声明改写函数表达式
  function aaa()
{
   alert(1); 
}
   aaa();//1                          (function(){alert(1)})(); //函数表达式

模块化代码：

var aaa = (function(){
 var a = 1;
 
 function bbb(){
  a++;
  alert(a);
 }
 
 function ccc(){
  a++;
  alert(a);
 }
 
 return {
  
  b : bbb,
  c : ccc
  
 }
})();

aaa.b();  //2
aaa.c();  //3
alert(bbb);//error

实例：在循环中直接找到元素的索引，其实这种写法也可以使用其他方法，只不过这里使用的是闭包的形式写出来

 window.onload = function(){
 var aLi = document.getElementsByTagName('li');
 for(var i=0;i<aLi.length;i++){
  aLi[i].onclick = (function(i){  //外部参数穿进去
    return function()
     {
       alert(i);                  //调用外部参数
     } 
   })(i); 
 }

};
</script>
</head>
<body>
<ul>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
</ul>
还有另一种写法，其他代码就不写，只写主要部分程序；
window.onload = function(){
 var aLi = document.getElementsByTagName('li');
  for(var i=0;i<aLi.length;i++){

  (function(i){

     aLi[i].onclick = function()
      {
        alert(i);
      };

   })(i);     //自执行的时候将i传进去
  }
}; 
其实实现索引，也可以写的很简单，只不过没有闭包的高大上，让人觉得很高深，那么这就是闭包。
var aLi = document.getElementsByTagName('li');
  aLi[i].index  =i;
  for(var i=0;i<aLi.length;i++)
    {
     alert(this.index); 
    }
 


四，闭包需要注意什么：  
   IE下容易引发内存泄露；

两种解决方法：

<script>
//IE下会引发内存泄漏
/*window.onload = function(){
 var oDiv = document.getElementById('div1');  //获取DOM节点或者宿主节点的时候
 
 oDiv.onclick = function(){  //引用一个内部函数，又去调用外部的对象的时候，就会出现内存泄漏。
  alert(oDiv.id);
 };
 
 window.onunload = function(){
  oDiv.onclick = null;
 };
 //当页面跳转的时候，这个变量不会释放，直到浏览器关闭为止。
};*/
window.onload = function(){
 var oDiv = document.getElementById('div1');
 
 var id = oDiv.id;
 
 oDiv.onclick = function(){
  alert(id);
 };
 
 oDiv = null;
 
};
</script>
</head>
<body>
<div id="div1">aaaa</div>