闭包

244 阅读1分钟
原文链接: aaronxue.top
  1. 常见的匿名函数累加,比如
     <input type="button" value="按钮1"    >
     <input type="button" value="按钮2"    >
     <input type="button" value="按钮3"    >
     <script type="text/javascript">
         var btns = document.getElementsByTagName("input");
         for (var i = 0; i < 3; i++) {
             btns[i].onclick = function () {
                 alert("我是第" + (i + 1) + "个按钮");
             };
         }
     </script>
    
    由于事件循环机制,无论点哪个都是弹出“我是第4个按钮”,解决这种问题,我们需要保存i的值,可以使i的值常驻内存,我们可以使用匿名函数自执行,产生闭包
     var btns = document.getElementsByTagName("input");
     for (var i = 0; i < 3; i++) {   
         //因为匿名函数已经执行了,所以会把 i 的值传入到num中,注意是i的值,所以num
         (function (num) {
             btns[i].onclick = function () {
                 alert("我是第" + (num + 1) + "个按钮");
             }
         })(i);
     }
    
  2. 模块化代码,减少全局变量污染

     var person = (function () {
         //声明一个对象,增删改查均是针对这个对象
         var personInfo = {
             name : "李四",
             age : 20
         };
         //返回一个对象,这个对象中封装了一些对personInfor操作的方法
         return {
             //根据给定的属性获取这个属性的值
             getInfo : function (property) {
                 return personInfo[property];
             },
             //修改一个属性值
             modifyInfo : function (property, newValue) {
                 personInfo[property] = newValue;
    
             },
             //添加新的属性
             addInfo : function (property, value) {
                 personInfo[property] = value;
    
             },
              //删除指定的属性
             delInfo : function (property) {
                 delete personInfo[property];
    
             }
         }
     })();
     alert(person.getInfo("name"));
     person.addInfo("sex", "男");
     alert(person.getInfo("sex"));