【Day5】ES5（高阶函数，匿名函数，作用域，闭包）

日期：2月4日

---

1.高阶函数

        什么是函数： 函数就是一个数据类型[Function] 函数可以用表达式去定义

        高阶函数： 由于函数是一种类型 函数可以作为另一个函数的 参数 或者是 返回值 那么该函 数就称之为高阶函数 （简单的说就是函数调用函数）

案例：

        // 函数的声明式   myFunction02表示函数的名字  表示函数本身 
        function myFunction02() {
            console.log("xxxx");
        }

        console.log(myFunction02);  // 打印函数本身
        myFunction02()  // 函数的调用 执行

        console.log("------------------------------");

        function fn() {
            console.log("我是一个函数，我想作为另一个函数的参数");
        }

        /**
         *  a 普通的参数 
         *  cb 函数
         * 
         * fn02 是一个高阶函数 另一个函数作为了它的参数
         */
        function fn02(a,cb) {
           // console.log(cb);
          console.log(a);
          cb()

        }

        fn02(1,fn)  // 1

        console.log("------------------------------");

        // 函数可以作为另一个函数的返回值
        /*
        需求： 
          求 10 + 100
             10 + 1000
             10+ 10000
             10+n
        
        */

        function getSum(a) {
            // 后面这个函数 是 前面getSum 函数的返回值
            return function(b) {
               return a + b;
            }
        }

        var callback = getSum(10)  

        /*
        
        callback =  function(b) {
               return  10 + b;
            }
        
        */

        var r1 =  callback(100)
        var r2 =  callback(1000)
        console.log(r1);  // 110
        console.log(r2);  // 1010

2.匿名函数

      1.匿名函数：匿名函数【立即执行函数】：  没有名字的函数

      2.特点： 只能使用一次  并且需要立刻调用【立刻执行】

案例：

        // 无参数 无返回值的匿名函数
         (function() {
             console.log("xxxxx");
         })()
         console.log("---------------------");
         // 有参数无返回值的匿名函数 

         (function(a,b) {
             console.log(a,b,"######");
         })(1,2)


         // 有参有返回值的匿名函数
         var result =  (function(a,b) {
             return a + b
         })(1,2)

         console.log(result);

3.作用域，闭包

        1.作用域：变量可以起作用的范围

        2.全局变量：在任意位置都可以访问到的变量

        3.局部变量：只有在固定代码片段内可以访问到的变量

        4.作用域：

                   块级作用域：es5 没有块级作用域，  {} ；if() {} ； for() {} ； while() {}

                   函数作用域：es5 中唯一的作用域 ，由于es5中存在函数作用域 函数中的变量就是局              部变量

        5.作用域链：函数内指向函数外的链式结构，内部作用域 去访问外部作用域  就会产生作用                域，链【将这种访问方式 称之为闭包】        

        6.闭包：内部作用域访问到外部作用域，访问变量的规律： 就近原则

        7. 闭包的作用： 保护当前的变量不受全局污染， 可以使得局部的变量的作用范围得到延展              【体现在返回值是函数的高阶函数中】

案例：

        function myFunc() {
            // 当前这个变量b 只能在当前这个函数中使用 所以 函数外面就无法访问到这个变量了
            // var 表示定义了函数中的局部变量
            var b = 20;
            // 如果将var 去掉 那么这个变量就是全局变量
            c = 100;
            console.log(b);  // 10  打印的数值可以访问当前函数中的变量b
        }
        myFunc()
        //console.log(b);
        console.log(c);

        console.log("-----------------------");
     
        function func01() {
              var  a = 10;
              func02();
             function func02() {
                 // 内部作用域有这个变量  外部作用域也有该变量   优先访问内部作用域的 【就近原则】
                 var a = 20;
                 console.log(a);  // 内部作用域访问到了 外部作用域
             }
        }
        func01()

     

案例：（闭包）   

        /*
        1. 遍历1-4  
        2. 没个值都+5  并且打印 

           6
           7
           8
           9
        
        */

        function fn() {
            for(var i = 1;i<=4;i++) {
                (function(a) {
                    a+=5
                    console.log(a);

                })(i)
 
            }
            // p(i)     使用普通函数调用
            // function p(a) {
            //     a+=5
            //          console.log(a);
            // }
        }

        fn()

         

4.变量在作用域中的特点

        1. 变量

                1.1 第一种  普通变量  var a = 10

                1.2 第二种  函数     function a() {}       

        2.变量在作用中的特点：

                2.1 函数可以自动提升到当前作用域的最前面     

                2.2 普通变量的变量名可以 自动提升到当前作用域的最前面 但是 值不可以

案例：

    // 面试题


       var a = 10;

       function fn() {
       // var a;
           console.log(a);
           var a = 20;
       }

       fn(); //undefined

       function fn2(a) {
        console.log(a);
        var a = 20;
       }

       fn2(30)