第66天：闭包的原理和函数传参

半指温柔乐

发布于 2018-09-11 12:00:22

5950

发布于 2018-09-11 12:00:22

文章被收录于专栏：前端知识分享

一、闭包的原理

在程序语言中，所谓闭包，是指语法域位于某个特定的区域，具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留他们在闭包最初定义(或创建)时的值。

白话：我们可以用一个函数 去访问 另外一个函数的内部变量的方式就是闭包。

测试题

function outerFun()

{

var a=0;

function innerFun()

{

a++;

alert(a);

}

return innerFun; //注意这里不加（）

}

var obj=outerFun();//必须加（）

obj(); obj();

var obj2=outerFun();

obj2(); obj2();

结果是： 1 2 1 2

闭包的优点 ：

优点：不产生全局变量，实现属性私有化。

缺点：闭包中的数据会常驻内存，在不用的时候要删掉否则会导致内存溢出。

二、闭包的函数传参

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>闭包的函数传参</title>
 6     <style>
 7         div{
 8             width: 100px;
 9             height: 100px;
10             position: absolute;
11             left:0;
12             background-color: yellow;
13         }
14     </style>
15 </head>
16 <body>
17 <button id="btn1">右走</button>
18 <button id="btn2">左走</button>
19 <div id="box"></div>
20 </body>
21 </html>
22 <script>
23     /*//闭包原理
24     function outFun(){
25         var num=10;
26         function inFun(){
27             console.log(num);
28         }
29         return inFun;//返回函数体 不带括号
30     }
31     var obj=outFun();//调用函数
32     obj();//返回函数值*/
33 
34     //函数传参
35     /*function Fun(x){
36         return function(y){
37             console.log(x+y);
38         }
39     }
40     var obj=Fun(4);//把4传给x  obj=function(){console.log(x)}
41     obj();// NaN
42     obj(2);//6*/
43 
44 
45     var btn1=document.getElementById("btn1");
46     var btn2=document.getElementById("btn2");
47     var box=document.getElementById("box");
48 
49     function move(speed){
50         return function(){
51             box.style.left=box.offsetLeft+speed+"px";
52         }
53     }
54     btn1.onclick=move(5);
55     btn2.onclick=move(-5);
56 </script>

三、实例

1、闭包版tab切换

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>闭包版tab栏切换</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         .box{
 12             width: 405px;
 13             height: 400px;
 14             border:1px solid #c1c1c1;
 15             margin: 100px auto;
 16             /*overflow: hidden;*/
 17         }
 18         .mt span{
 19             display: inline-block;
 20             width: 80px;
 21             height: 30px;
 22             text-align: center;
 23             line-height: 30px;
 24             background-color: #ff4400;
 25             border-right: 1px solid #c1c1c1;
 26             cursor: pointer;
 27         }
 28         .mt .current{
 29             background-color: #3B90CD;
 30         }
 31         .mb li{
 32             width: 100%;
 33             height: 370px;
 34             background-color: #3B90CD;
 35             list-style: none;
 36             display: none;
 37         }
 38         .mb .show{
 39             display: block;
 40         }
 41     </style>
 42     <script>
 43         window.onload=function(){
 44             function tab(obj){
 45                 //获取每个盒子的id
 46                 var target=document.getElementById(obj);
 47                 //获取对应id下的标签
 48                 var spans=target.getElementsByTagName("span");
 49                 var lis=target.getElementsByTagName("li");
 50                 for(var i=0;i<spans.length;i++) {
 51 
 52                     //function() {} ();立即执行函数
 53                     var timer=null;
 54                     spans[i].onmouseover = function (num) {//num 形参
 55                         return function () {
 56                             clearTimeout(timer);
 57                             timer = setTimeout(function () {
 58                                 for (var j = 0; j < spans.length; j++) {
 59                                     //清除所有的 类
 60                                     spans[j].className = "";
 61                                     lis[j].className = "";
 62                                 }
 63                                 //显示当前点击的类
 64                                 spans[num].className = "current";
 65                                 lis[num].className = "show";//span和li对应起来
 66                             }, 300)
 67                         }
 68                         }(i);//i传参
 69                     spans[i].onmouseout=function(){
 70                         clearTimeout(timer);
 71                     }
 72                 }
 73                 }
 74             tab("one");
 75             tab("two");
 76             tab("three");
 77         }
 78     </script>
 79 </head>
 80 <body>
 81 <div class="box" id="one">
 82     <div class="mt">
 83         <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>
 84     </div>
 85     <div class="mb">
 86         <ul>
 87             <li class="show">新闻模块</li>
 88             <li>体育模块</li>
 89             <li>娱乐模块</li>
 90             <li>科技模块</li>
 91             <li>视频模块</li>
 92         </ul>
 93     </div>
 94 </div>
 95 
 96 <div class="box" id="two">
 97     <div class="mt">
 98         <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>
 99     </div>
100     <div class="mb">
101         <ul>
102             <li class="show">新闻模块</li>
103             <li>体育模块</li>
104             <li>娱乐模块</li>
105             <li>科技模块</li>
106             <li>视频模块</li>
107         </ul>
108     </div>
109 </div>
110 
111 <div class="box" id="three">
112     <div class="mt">
113         <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>
114     </div>
115     <div class="mb">
116         <ul>
117             <li class="show">新闻模块</li>
118             <li>体育模块</li>
119             <li>娱乐模块</li>
120             <li>科技模块</li>
121             <li>视频模块</li>
122         </ul>
123     </div>
124 </div>
125 </body>
126 </html>

2、闭包版屏幕缩放事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="demo"></div>
 9 </body>
10 </html>
11 <script>
12     var num=0;
13     var demo=document.getElementById("demo");
14     window.onresize=throttle(function(){
15         demo.innerHTML=window.innerWidth||document.documentElement.clientWidth;
16         num++;
17         console.log(num);
18     },300);
19 
20     function throttle(fn,delay){//闭包  节流
21         var timer=null;
22         return function(){
23             clearTimeout(timer);
24             timer=setTimeout(fn,delay);//delay控制延迟时间
25         }
26     }
27 
28 </script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-10-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度