美文网首页
js-高级(闭包-递归)

js-高级(闭包-递归)

作者: Jianshu9527 | 来源:发表于2016-11-18 22:49 被阅读328次

    1 闭包(closure)

    • 在函数的外部去访问函数内部的变量,这一种机制其实就是闭包
      ※※案例说明↓
    var  a = 0;
       function f(){
          var b = 1;
          function  f1(){
              console.log(b++);
          }    
          return f1;    
      }
      var t = f();
      t();
    

    chrome下输出的结果:1
    简单分析:函数f1()本身是定义在f()函数内部 但是f1()去访问了f()里面的b的变量,此时其实就形成了一个闭包;

    1.1如何才能构成一个闭包
    1. 在函数的内部定义函数
      2)函数内部访问它外部的变量(如同上面f1()要访问f())
    1.2 闭包的优点
    • 延长变量的生命周期
      正常情况下一个函数的调用之后,它内部定义的变量就会被删除掉(被回收),但是使用闭包之后,它的生命周期就会得到延长
      ※※案例说明↓
    var  a = 0;
       function f(){
          var b = 1;
          function  f1(){
              console.log(b++);
          }    
          return f1();    
      }
      var c = f();
      c();
      c();
      c();
    

    chrome下输出的结果:1,2,3

    1.3 闭包的缺点

    闭包-内存泄漏
    ※※案例一↓

    function  f(){
      var a = 10;
      function f1(){
        console.log(a);
      }
      return  f1;
    }
    var t = f();
    t();
    

    chrome下输出的结果:10;
    案例分析:


    内存泄漏.PNG

    ※※案例二↓

    var a = [1,2,3,4];
    function f(){
      a = [];
    }
    f();
    console.log(a);
    

    chrome输出的结果为空数组
    案例分析:
    1)a的右边是一个应用数据类型,
    2)会在一个堆区里面开辟一个新的空间,用来存放数组里面的值
    3)函数里面a的右边是一个新的数组(空的数组)从而开辟了一个新的数组,使其引用地址在此时发生了改变
    4)但是此时函数外面的a此时任然保存在堆区里面

    鼠标点击案例(-闭包)

    案例-鼠标点击事件


    鼠标点击出现索引值.PNG

    方法一
    1)通过额外的添加一个自定义属性,来保存 i 的值


    添加自定义属性.PNG
    方法二
    2)使用闭包
    闭包-立即执行函数.PNG

    案例分析:
    ① : f=function(){}就是一个闭包结构;
    ② : 它是一个函数,它定义在另一个函数的内部
    ③ : 它访问的不是自己的变量-index
    ④ : 当中加入了一个立即执行函数(移步☞立即执行函数章节)
    ⑤ : 函数的返回值会保存在btns[i]这个对象中的onclick属性中

    递归

    语法结构:
    在函数的内部调用自己(自己调用自己)
    ※※案例↓

    function f(){
        console.log('f');
        f();
    }
    f();
    ````
    chrome下的结果:陷入死循环(栈溢出)
    ######递:
    递进 : 把大问题分成小问题,一层一层向我们知道的那个答案靠近
    ######归:
    回归 : 小问题都已经得到了解决,从最小的问题向最大的问题回归,一个个解决
    
    ※※案例一 >求多为数组中的元素的个数↓
    ````
    <script>
        var arr = [1,2,3,4,[56,45]];
        function count(arr){
            var sum = 0;
            for (var i = 0; i < arr.length; i++) {
                if(Array.isArray( arr[i] ) == false){
                    sum +=1;
                }
                else{
                    sum += count(arr[i]);
                }
            }
            return sum;
        }
        console.info( count(arr) ) ;
    </script>
    ````
    chrome下输出结果:6
    案例分析:
    1)递归调用的函数。
    2)Count()的功能是:你给我一个数组,我告诉你它有几个元素。
    3)如果数组中的元素就是一个普通的元素(非数组的)则sum++即可。
    4)如果数组中的元素又是一个数组,则需要递归调用count(当前元素)
    ※※案例二 >循环与递归↓
      ````
    <script>
            //用循环来做
        function f1(n){
            var sum = 1;
            for (var i = 1; i <= n; i++) {
                sum *=i;
            }
            return sum;
        }
            //递归来做
        function f2(n){
            if(1== n){
                return 1;
            }
            else
                return f2(n-1) * n;
        }
            //算计时
        function computerTime(f,n){
            var t1 = new Date();
            var result = f(n);
            var t2 = new Date();
            console.info("时间:"+ (t2-t1) + "  结果: "+result);
        }
        computerTime(f1,10000);
        computerTime(f2,10000);
    </script>
    ````
    案例分析:
    1) : 递归有最大的嵌套次数
    2) : 可用用循环就不要用递归,一般来说,循环的效率比递归的效率更高一些
    3) : 如果使用循环不能解决,再考虑用递归

    相关文章

      网友评论

          本文标题:js-高级(闭包-递归)

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