闭包

作者: warmT_ | 来源:发表于2017-08-13 12:48 被阅读0次

    概念:所谓闭包就是当函数执行的时候,会形成私有作用域保护里面的变量不受外界干扰,函数的这种保护机制被称之为闭包。

    • 自运行函数+行參
    • 例子:解决:点击事件中for循环的i值问题

    下面有个小例子具体说下闭包。需求:分别点击四个按钮弹出对应的索引(html部分省略);

    a. 运行代码可看到点击事件外面的alert弹出的值是正确的 ;而点击事件里面的值是4;并非我们所要的值,应为当点击事件发生函数执行,循环已经结束。

      var oBtn=document.getElementsByTagName('button');
      for(var i=0;i<oBtn.length;i++){
          alert(i)// 0 1 2 3;
          oBtn[i].onclick=function(){
              alert(i);// 4
          }
      }
    

    b. 点击事件外面的alert的i值就是我们想要的值,其实也就是一个函数执行;那么我们现在模拟一个alert函数;将循环的i值保存在myAlert的私有作用域里面

      var oBtn=document.getElementsByTagName('button');
       for (var i = 0; i < oBtn.length; i++) {
            myAlert(i)
        }
        function myAlert(i) {
            oBtn[i].onclick = function () {
                alert(i);// 0 1 2 3
            }
        }
    

    c. 代码优化

      var oBtn=document.getElementsByTagName('button');
      for(var i=0;i<oBtn.length;i++){
          (function(i){
             oBtn[i].onclick=function(){
              alert(i);// 0 1 2 3
            }
          })(i)
      }
    

    总结:闭包就是函数保护私有变量的一种保护机制。是不是很简单呀。

    相关文章

      网友评论

          本文标题:闭包

          本文链接:https://www.haomeiwen.com/subject/jyzsrxtx.html