函数的闭包优势:
①局部当全局使用;
②互不影响
③延长了生命周期(内部变量可以多次调用)
<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>