函数的闭包

最新推荐文章于 2022-04-05 14:24:30 发布

莓莓儿～

最新推荐文章于 2022-04-05 14:24:30 发布

阅读量203

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/fanfan_h/article/details/90437549

版权

JS 专栏收录该内容

49 篇文章 10 订阅

订阅专栏

什么是闭包：使用别人的私有变量
优缺点：
缺点：会将闭包的值存在内存里面，会占用内存 ----网页的内存泄露
优点：1、可以使用局部变量，
2、JavaScript 变量可以是局部变量或全局变量
3、私有变量可以用到闭包。
说明：在做开发的时候尽量避免使用闭包

（一）闭包的形式

 function f1(b){
            var a=12;
            function f2(){
                alert(a);  //12
                alert (b); //24
            }
            return f2;
        }
        var f3=f1(24); //f3==f2(), f1()的返回值为f2;
        f3();
         //上式的简写
     /*
      var f3=(function(b){   //b为形参，
          var a=12;
          function f2(){
              alert(a);
              alert (b);
          }
          return f2;
      })(24);                //24为实参;
        f3();

作用1
将一个变量长期驻扎在内存当中，用于循环中存索引值 (闭包就是函数的嵌套)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>闭包</title>
    <script>   
 window.onload=function (){
         var ali=document.getElementsByTagName ('li');  //获得每一个li
         // alert(ali.length );
         for(var i=0;i<ali.length;i++){
         (function (i){
         ali[i].onclick =function (){
         alert(i);
         }
         })(i)
         }
         };
       
    </script>
  <style>
        li{
            height:30px;
            width:100%;
            background: pink;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<ul >
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>

作用2
私有变量计数器，外部无法访问，避免全局变量的污染

 var count=(function(){
              var a=1;
              function  mm(){
                  a++;
                  return a;
              }
              return mm;
          })();
        alert(count());//2
        alert(count());//3
       var c=count ();
        alert(c); //4

分享一个面试题

var name="global";
        function foo(){
            console.log(name);  
        }
        function fooOuter1(){
            var name="local";
            foo();
        }
        fooOuter1();

        function fooOuter2(){
            var name="local";
            function foo(){
                console.log(name);
            }
            foo();
        }
        fooOuter2();

结果为：
在这里插入图片描述

 function test() {
            var value =2;
            return function (params) {
                console.log(value * params);  //2*params
                console.log(window.value * params);  //3*params
            }
        }
        value=3;
        var a = test();//后边的匿名函数
        a(2); //params=2

对1+2+3进行求和

   var m=0;
        function f2(n){
            temp=function (){
                m+=n;
            }
            temp();
            //方法的重写
            f2.toString=function (){
                return m;
            }

            return f2;
        }

        console.log(f2(1)(2)(3));  //算和  6
        var aa=123;
        console.log(typeof  aa.toString());;  //string