闭包

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分；。可以理解为所有的JavaScript函数都是属于闭包。
        闭包的作用：
                ①：封装变量，把一些不需要暴露的全局变量封装在成局部变量；
                ②：延长局部变量的寿命；        
       例子：
   var Obj=function(){
      var i=0;
      var fun=function(){
         i++;
         console.log(i);
      }
      return fun;
   }
   var obj=new Obj();
   var _obj=new Obj();
   obj();//输出1
   obj();//输出2
   _obj();//输出1
   _obj();//输出2
<!DOCTYPE html>
<html lang="ch-en">
<head>
   <meta charset="UTF-8">
   <title>闭包</title>
</head>
<body>
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
<script>
   var li=document.getElementsByTagName('li');
   for(var i=0;i<li.length;i++){
     (function(i){
       li[i].onclick=function(){
         console.log(i+1);
      }
     })(i);
   }
</script>
</body>
</html>
        用闭包的方式实现的功能用面向对象的方式也可以实现，反之亦然；
        用面向对象的方法实现一个命令模式的例子；
<!DOCTYPE html>
<html lang="ch-en">
<head>
   <meta charset="UTF-8">
   <title>闭包</title>
</head>
<body>
   <button id="open">open</button>
   <button id="close">close</button>
   <script>
      //创建一个电视机对象，该对象有2个功能，打开和关闭功能
      var Tv={
         'open':function(){
            console.log('你点击了open按钮');
         },
         'close':function(){
            console.log('你点击了close按钮');
         }
      }
      // 创建一个命令对象，参数是要被命令的对象
      var OpenAndCloseTv=function(obj){
         this.obj=obj;
      };
      //给命令对象添加一个打开电视的命令，该命令将调用对象的打开功能；
      OpenAndCloseTv.prototype.execute=function(){
         this.obj.open();
      }
      //给命令对象添加一个关闭电视的命令，该命令将调用对象的关闭功能；
      OpenAndCloseTv.prototype.undo=function(){
         this.obj.close();
      }
      // 创建一个绑定事件对象,参数是命令对象
      var setEvent=function(command){
         document.getElementById('open').onclick=function(){
            command.execute();
         }
         document.getElementById('close').onclick=function(){
            command.undo();
         }
      }
      // 开始绑定事件
      setEvent(new OpenAndCloseTv(Tv));
   </script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2020-03-21 00:16  sjzhen  阅读(81)  评论(0)    收藏  举报