闭包

最新推荐文章于 2024-03-06 16:30:00 发布

大小小丹

最新推荐文章于 2024-03-06 16:30:00 发布

阅读量135

点赞数 1

分类专栏：设计模式文章标签：闭包

本文链接：https://blog.csdn.net/baidu_30907803/article/details/116158480

版权

设计模式专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的闭包概念，包括变量作用域、生存周期和闭包的作用。通过示例解释了闭包如何维持局部变量的寿命，以及在解决循环中变量共享问题上的应用。同时，讨论了闭包在封装变量、缓存优化等方面的功能，并提醒了使用闭包可能带来的内存泄漏问题及解决方案。

摘要由CSDN通过智能技术生成

一、闭包

1、变量的作用域：var声明的变量会局限于函数中，如果变量没有会往外层逐层收缩，一直搜索到全局变量为止。

2、变量的生存周期：一般变量会随着函数的调用完，退出函数则会销毁，但是函数内还有函数，并给外部调用了，造成闭包，则变量不会销毁

来个简单的闭包例子：

var func2 = function(){
  var a = 1;
  a++;
  console.log('1111',a);
  return function(){
      a++;
     console.log(a);
  }
  a = null; // 添加这一句防止闭包导致内存泄漏
}

var f2 = func2(); // 这里造成了一个闭包
f2(); //  输出 3
f2(); // 输出 4
func2(); // 输出 1111 2 以及 f () {a++; console.log(a)}
func2(); // 输出 1111 2 以及 f () {a++; console.log(a)}

上面的结果不同，是因为当执行var f = func2()时，f返回了一个匿名函数的引用，它可以访问到 func() 被调用时产生的环境，而局部变量 a 一直处在这个环境里。既然局部变量所在的环境还能被外界访问，这个局部变量就有了不被销毁的理由。在这里产生了一个闭包结构，局部变量的生命看起来被延续了。因此func2里面的a变量不会被用完即销毁，想func2()的调用一样，每次调用都是a = 1初始化的结果。历史var f = func2()声明，则a变量不会被销毁，因此每次调用都会累加。

3、闭包的作用
如下：无论点击那个div都是返回5

<html> 
 <body> 
 <div>1</div> 
 <div>2</div> 
 <div>3</div> 
 <div>4</div> 
 <div>5</div> 
 <script> 
 var nodes = document.getElementsByTagName( 'div' ); 
 for ( var i = 0, len = nodes.length; i < len; i++ ){ 
 nodes[ i ].onclick = function(){ 
 alert ( i ); 
 } 
 }; 
 </script> 
 </body> 
</html>

解决方式：使用闭包，把每次循环的 i 值都封闭起来。当在事件函数中顺着作用域链中从内到外查找变量 i 时，会先找到被封闭在闭包环境中的 i，点击时就返回对应正确的i

<html>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <script>
    var nodes = document.getElementsByTagName('div');
    for (var i = 0, len = nodes.length; i < len; i++) {
      (function (i) {   //  创建闭包
        nodes[i].onclick = function () {
          alert(i);
        }
      })(i)
    };
  </script>
</body>

</html>

其他作用：

（1）封装变量：闭包可以帮助把一些不需要暴露在全局的变量封装成“私有变量”。假设有一个计算乘积的简单函数：

var mult = function(){ 
 var a = 1; 
 for ( var i = 0, l = arguments.length; i < l; i++ ){ 
 a = a * arguments[i]; 
 } 
 return a; 
};

mult 函数接受一些 number 类型的参数，并返回这些参数的乘积。现在我们觉得对于那些相同的参数来说，每次都进行计算是一种浪费，我们可以加入缓存机制来提高这个函数的性能：

var cache = {}; 
var mult = function(){ 
   var args = Array.prototype.join.call( arguments, ',' ); 
   if ( cache[ args ] ){ 
     return cache[ args ]; 
   } 
   var a = 1; 
   for ( var i = 0, l = arguments.length; i < l; i++ ){ 
     a = a * arguments[i]; 
   } 
   return cache[ args ] = a; 
}; 
alert ( mult( 1,2,3 ) ); // 输出：6 
alert ( mult( 1,2,3 ) ); // 输出：6

我们看到 cache 这个变量仅仅在 mult 函数中被使用，与其让 cache 变量跟 mult 函数一起平行地暴露在全局作用域下，不如把它封闭在 mult 函数内部，这样可以减少页面中的全局变量，以避免这个变量在其他地方被不小心修改而引发错误。代码如下：

var mult = (function(){ 
   var cache = {}; 
   var calculate = function(){ // 封闭 calculate 函数
     var a = 1; 
     for ( var i = 0, l = arguments.length; i < l; i++ ){ 
        a = a * arguments[i]; 
     } 
     return a; 
   }; 
   return function(){ 
   var args = Array.prototype.join.call( arguments, ',' ); 
   if ( args in cache ){ 
      return cache[ args ]; 
   } 
    return cache[ args ] = calculate.apply( null, arguments ); 
   } 
})();

（2）延续局部变量的寿命

img 对象经常用于进行数据上报，如下所示：
var report = function( src ){ 
 var img = new Image(); 
 img.src = src; 
}; 
report( 'http://xxx.com/getUserInfo' );

但是通过查询后台的记录我们得知，因为一些低版本浏览器的实现存在 bug，在这些浏览器下使用 report 函数进行数据上报会丢失 30%左右的数据，也就是说，report 函数并不是每一次都成功发起了 HTTP 请求。丢失数据的原因是 img 是 report 函数中的局部变量，当 report 函数的调用结束后，img 局部变量随即被销毁，而此时或许还没来得及发出 HTTP 请求，所以此次请求就会丢失掉。现在我们把 img 变量用闭包封闭起来，便能解决请求丢失的问题：

 var report = (function(){ 
   var imgs = []; 
   return function( src ){ 
     var img = new Image(); 
     imgs.push( img ); 
     img.src = src; 
   } 
})();

注意：闭包和内存管理，使用闭包会使一些数据无法被即时销毁，造成内存泄漏，因此我们需要手动把这些变量设为null。如上面第一个例子中的a变量使用完，手动置空：

  a = null; // 添加这一句防止闭包导致内存泄漏

大小小丹

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录