闭包与高阶函数

1.闭包

1.1 变量的作用域复习

变量根据作用域的不同分为两种：全局变量和局部变量。

1. 函数内部可以使用全局变量。

2. 函数外部不可以使用局部变量。

3. 当函数执行完毕，本作用域内的局部变量会销毁。

1.2 什么是闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。 

 <script>
        //闭包（closure）指有权访问另一个函数作用域中变量的函数。
        //闭包:我们fun这个函数作用域访问了另外一个函数fn里面的局部变量 num
        function fn() {
            var num = 10;
            function fun() {
                console.log(num);
            }
            fun();
        }
        fn();
    </script>

1.3 在 chrome 中调试闭包

1. 打开浏览器，按 F12 键启动 chrome 调试工具。

2. 设置断点。

3. 找到 Scope 选项（Scope 作用域的意思）。

4. 当我们重新刷新页面，会进入断点调试，Scope 里面会有两个参数（global 全局作用域、local 局部作用域）。

5. 当执行到 fn2() 时，Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包。

1.4闭包的作用

作用：延伸变量的作用范围。

提问：我们怎么能在 fn() 函数外面访问 fn() 中的局部变量 num 呢 ？

 <script>
        //我们fn外面的作用域可以访问fn内部的局部变量
        //闭包的主要作用:延伸了变量的作用范围
        //闭包（closure）指有权访问另一个函数作用域中变量的函数。
        //闭包:我们fun这个函数作用域访问了另外一个函数fn里面的局部变量 num
        function fn() {
            var num = 10;
            // function fun() {
            //     console.log(num);
            // }
            // return fun;
           return function() {
               console.log(num);
           }
        }
        var f = fn();
        f();
        // 相当于  var f = function() {
        //     console.log(num);
        // }
        // var f = fun() {
        //     console.log(num);
        // }
​
    </script>

1.5闭包的案例

1. 利用闭包的方式得到当前li 的索引号

 <ul>
        <li>苹果</li>
        <li>榴莲</li>
        <li>柠檬</li>
        <li>香蕉</li>
    </ul>
    <script>
        // 获取元素
        var lis = document.querySelectorAll('li');
        // 1．我们可以利用动态添加属性的方式
​
        // for(var i = 0;i < lis.length;i++) {
        //     lis[i].index = i;
        //     lis[i].onclick = function() {
        //         // console.log(i);
        //         console.log(this.index);
        //     }
        // }
        // 2．利用闭包的方式得到当前小li的索引号
        for(var i = 0;i < lis.length; i++) {
            //利用for循环创建了4个立即执行函数
            //立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) {
                // console.log(i);
                lis[i].onclick = function() {
                    console.log(i);
                }
            })(i)
        }
    </script>

2. 闭包应用-3秒钟之后,打印所有li元素的内容

 <script>
        // 获取元素
        var lis = document.querySelectorAll('li');
        //闭包应用-3秒钟之后，打印所有li元素的内容
        for (var i = 0; i < lis.length; i++) {
            (function (i) {
                setTimeout(function () {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
​
        }
    </script>

3. 闭包应用-计算打车价格

/*需求分析
打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费*/
​
 var car = (function() {
     var start = 13; // 起步价  局部变量
     var total = 0; // 总价  局部变量
     return {
       // 正常的总价
       price: function(n) {
         if (n <= 3) {
           total = start;
         } else {
           total = start + (n - 3) * 5
         }
         return total;
       },
       // 拥堵之后的费用
       yd: function(flag) {
         return flag ? total + 10 : total;
       }
    }
 })();
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33

5.6案例

 var name = "The Window";
   var object = {
     name: "My Object",
     getNameFunc: function() {
     return function() {
     return this.name;
     };
   }
 };
console.log(object.getNameFunc()())
-----------------------------------------------------------------------------------
var name = "The Window";　　
  var object = {　　　　
    name: "My Object",
    getNameFunc: function() {
    var that = this;
    return function() {
    return that.name;
    };
  }
};
console.log(object.getNameFunc()())

2.高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。

<script>
        // 高阶函数_函数可以作为参数传递
        function fn(a,b,callback) {
            console.log(a + b);
            callback && callback();
        }
        fn(1,2,function() {
            console.log('我是最后调用的');
        });
        $('div').animate({
            left:500
        },function() {
            $('div').css('backgroundColor','purple');
        })
    </script>

此时fn 就是一个高阶函数

函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。

同理函数也可以作为返回值传递回来