什么是闭包

  • 函数嵌套函数
  • 内部函数可以引用外部函数的参数和变量

  • 参数和变量不会被垃圾回收机制所回收

    1. <script>
    2.       function aaa(b){
    3.           var a = 10;
    4.           console.log(a, b);
    5.           function bbb(){
    6.               console.log(a,b);
    7.           }
    8.           return bbb;
    9.       }
    10.       var res = aaa(20);//10 20
    11.       console.log(res);//ƒ bbb(){console.log(a,b);}(res代表嵌套函数bbb)
    12.       res();
    13. </script>

    垃圾回收机制

  • 垃圾回收机制是指函数内部的形参和变量随着函数的调用被创建，随着函数调用结束而被销毁。

    闭包的好处

  • 希望一个变量常驻内存当中

  • 避免全局变量污染

    1. //闭包函数的美化，函数声明以后立即调用的写法，叫做立即执行函数。
    2. var ccc = (function(){
    3.   var a = 2;
    4. return function(){
    5.   a++;
    6.   console.log(a);
    7. }
    8. })();
    9. ccc();
    10. ccc();

  • 可以声明私有成员 ```javascript //A同学 var moduleA = (function(){

    1. var count = 0; //私有变量  只能被私有方法访问
    3. function showA(){ //私有方法
    4.   count += 20;
    5.   console.log(count);
    6. }
    8. function showB(){
    9.   count += 10;
    10.   console.log(count);
    11. }
    13. return {
    14.   outA: showA,
    15.   outB: showB
    16. }

    })();

    moduleA.outA(); moduleA.outB(); // console.log(count);报错 // console.log(showA);报错

  1. //B同学
  2. var moduleB = (function(){
  3.   var count = 1000; //私有变量  只能被私有方法访问
  5.   function showA(){ //私有方法
  6.     count += 200;
  7.     console.log(count);
  8.   }
  10.   function showB(){
  11.     count -= 100;
  12.     console.log(count);
  13.   }
  15.   return {
  16.     outA: showA,
  17.     outB: showB
  18.   }
  19. })();
  21. moduleB.outA();
  22. moduleB.outB();
  1. <a name="3kTp5"></a>
  2. ## 给每个按钮添加点击
  3. ```javascript
  4. //闭包方法
  5. window.onload = function(){
  6.       var aBtns = document.getElementsByTagName("button");
  7.       //通过循环给每一个按钮添加点击
  8.       for(var i = 0; i < aBtns.length; i++){
  9.         aBtns[i].onclick = (function(index){
  10.           return function(){
  11.             alert(index);
  12.           }
  13.         })(i);
  14.       }
  15.  }
  16. <body>
  17.   <button>按钮1</button>
  18.   <button>按钮2</button>
  19.   <button>按钮3</button>
  20. </body>
  21. //this方法
  22. window.onload = function(){
  23.       var aBtns = document.getElementsByTagName("button");
  24.       //通过循环给每一个按钮添加点击
  25.       for(var i = 0; i < aBtns.length; i++){
  26.         aBtns[i].index = this;
  27.         aBtns[i].onclick = function(){
  28.           console.log(this.index);
  29.       }
  30.  }
  31.  还有就是把var改为this

启动延时器

  1. for(let i = 0; i < 5; i++){
  2.       setTimeout(function(){
  3.         console.log(i);
  4.       }, 4000);
  5.     }
  8.     for(var i = 0; i < 5; i++){
  9.       setTimeout((function(index){
  10.         return function(){
  11.           console.log(index);
  12.         }
  13.       })(i), 4000);
  14. }

函数的防抖

  1. window.onload = function(){
  2.       var oBtn = document.getElementById("btn1");
  3.       var i = 0;
  4.     function antiShake(funcName, delay){
  5.       var timer = null;
  6.       return function(){
  7.         var argus = [...arguments];
  8.         var _this = this;
  9.         clearTimeout(timer);
  10.         timer = setTimeout(function(){
  11.           //this指向  参数
  12.           funcName.apply(_this, argus)
  13.         }, delay);
  14.       }
  15.  }
  16.   function show(ev){
  17.         console.log(i++, ev);
  18.       }
  20.       show = antiShake(show, 500);
  22.       oBtn.onclick = show;
  23. }
  24. ////////////
  25. function antiShake(funcName, delay){
  26.                 var timer = null;
  27.                 return function(){
  28.                     // var argus = [arguments];
  29.                     // var _this =this;
  30.                     clearTimeout(timer);
  31.                     timer = setTimeout(() =>{
  32.                         funcName();
  33.                     },delay)
  34.                 }
  35.             }

函数的节流

  1.  window.onload = function(){
  2.       var node = document.getElementById("div1");
  3.       var i = 0;
  4.       //函数调用频率太快了  降频率
  5.       // var timer = null;
  6.       // node.onmousemove = function(){
  7.       //   if(!timer){
  8.       //     timer = setInterval(function(){
  9.       //       node.innerHTML = i++;
  10.       //       clearInterval(timer);
  11.       //       timer = null;
  12.       //     }, 500);
  13.       //   }
  14.       // }
  16.       function show(){
  17.         node.innerHTML = i++;
  18.       }
  20.       show = throttle(show, 2000);
  22.       node.onmousemove = show;
  23.     }
  27.     function throttle(funcName, delay){
  28.       var timer = null;
  29.       return function(){
  30.         var argus = [...arguments];
  31.         var _this = this;
  32.         if(!timer){
  33.           timer = setInterval(function(){
  34.             funcName.apply(_this, argus);
  35.             clearInterval(timer);
  36.             timer = null;
  37.           }, delay)
  38.         }
  39.       }
  40.     }

闭包的缺点

  • 闭包会导致内存泄漏（由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除）

    1.           window.onload = function(){
    2.           var node = document.getElementById('div1');
    3.           var id = node.id;//不要在闭包中直接传入对象，借用上面函数的变量，缓解内存泄漏
    4.           node.onclick = function(){
    5.               alert(id);
    6.           }
    7.           node.onclick = null;//取消闭包
    8.           node = null;//取消对象
    9.       }
    10. //IE浏览器
    11.       window.onload = function(){
    12.     var node = document.getElementById("div1");
    13.     node.onclick = function(){
    14.       alert(node.id);
    15.     }
    16.     window.onunload = function(){
    17.       //页面解构的时候执行
    18.       node.onclick = null;
    19.       node = null;
    21.     }
    22.   }

    观察者模式

    1. <script>
    2.   function Observer(){
    3.     this.users = [];
    4.   }
    5.   Observer.prototype.subscibe = function(user){
    6.     this.users.push(user);
    7.   }
    8.   Observer.prototype.unsubscibe = function(user){
    9.     this.users = this.users.filter(item => item != user);
    10.   }
    11.   //msg 广播的数据
    12.   Observer.prototype.broadcast = function(msg){
    13.     //遍历所有的用户，进行广播
    14.     for(var i in this.users){
    15.       this.users[i](msg);
    16.     }
    17.   }
    19.   //实战：
    20.   var kai55 = new Observer();
    21.   function xiaoming(msg){
    22.     console.log("您好，您有一条新消息：" + msg + ", 小明说：五五开绝对没有开挂");
    23.   }
    24.   function xiaohua(msg){
    25.     console.log("您好，您有一条新消息：" + msg + ", 小花说：五五真帅");
    26.   }
    28.   kai55.subscibe(xiaoming);
    29.   kai55.subscibe(xiaohua);
    31.   kai55.broadcast("五五开要开播了，我55开，绝对没有开挂");
    33.   kai55.unsubscibe(xiaoming);
    35.   kai55.broadcast("道歉");
    36. </script>