函数的闭包问题

173 阅读2分钟

函数的闭包优势:

①局部当全局使用;

②互不影响

③延长了生命周期(内部变量可以多次调用)

<script> //正常全局变量累加写法        var con=4;        function res(t){            con+=t;            return con;        }        res(2);        res(1);        console.log(res(2));  //闭包写法,把全局变量变成局部变量;从而提高性能      function res1(t) {        var con = t;        return function(s) {//定义一个匿名函数          con += s;          return con;        };      }      var arr = res1(4);      //我在res1(4)的情况下传入给第二个函数的值,目的是让外面的函数不要给我反复执行var!劳资直接跳过//,去找他底下的子函数      arr(2);      arr(1);      console.log(arr(2)); //值为undefind 如果我没有在return里面return出函数的话;    </script>

结果都为9;

意义在于,闭包写法节约了性能,同时代码名字间互不影响;


接下来,在实际过程中,我们希望在点击某一个按钮的时候触发对应的解释框,类似于京东等页面的栏目触发具体内容。

用函数的闭包来获取栏目点击事件的下标;

通过

 for (var i = 0; i < 栏目.length; i++) {//遍历给每个栏目绑定onclick事件
栏目[i].onclick=function(j){
    return function(){
        for(var z=0;z<解释区域.length;z++){//遍历给每个解释框
                首页解释框[z].style.cssText="默认样式";
            }
        点击对应解释框[j].style.cssText="点击触发的样式";//如果不使用闭包把i的值给j的话,我这个地方,无法获取到i的值undefind
    }
}(i)

*实际代码过程:

<body><p class="bossp">1</p><p class="kidp">a</p><p class="bossp">2</p><p class="kidp">b</p><p class="bossp">3</p><p class="kidp">c</p></body>

*当我点击bossp时,触发相应的kidp

<script>      var getbossP = document.getElementsByClassName("bossp");      var getkidP = document.getElementsByClassName("kidp");      for (var i = 0; i < getbossP.length; i++) {        getbossP[i].onclick = (function(j) {//固定语法对应下方(i)          return function() {            //老样子把全部样式干掉            for (var z = 0; z < getkidP.length; z++) {              getbossP[z].style.color = "yellow";              getkidP[z].style.color = "yellow";            }            //return console.log(j);//点击我可以得到j啦            //给点击p加样式            getbossP[j].style.color = "red";            getkidP[j].style.color = "red"; //根据下标我可以找到getkid的j了          };          //console.log(j);          //getkidP[j].style.color="red";//这时候J 没有受到保护,直接在onclick执行了,已经获取到j了的        })(i); //我发现我的i没有传进去,固定语法(i)      }    </script>