高阶函数和闭包 - 码农教程

1、高阶函数

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

此时fn 就是一个高阶函数

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

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

2、闭包

2.1变量的作用域复习

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

函数内部可以使用全局变量。
函数外部不可以使用局部变量。
当函数执行完毕，本作用域内的局部变量会销毁。

2.2什么是闭包

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

<script>
    function fnl() {
        // fn1就是闭包函数
        var num = 10;
        function fn2() {
            console.1og (num); // 10
        }
        fn2()
    }
    fn1();
</script>

2.3闭包的作用

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

 function fn() {
            var num = 10;

            /* function fun() {
                console.log(num);
            }
            return fun; */
            return function () {
                console.log(num);
            }
        }
        var f = fn();
        f();
        // 类似于
        // var f = function fun() {
        //     console.log(num);
        // }

2.4闭包的案例

利用闭包的方式得到当前li 的索引号（循环注册点击事件）（经典面试题）

for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也称为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
(function(i) {
    lis[i].onclick = function() {
      console.log(i);
    }
 })(i);
}

闭包应用-循环中的setTimeout() 3秒钟之后,打印所有li元素的内容

 for (var i = 0; i < lis.length; i++) {
   (function(i) {
     setTimeout(function() {
     console.log(lis[i].innerHTML);
     }, 3000)
   })(i);
}

闭包应用-计算打车价格

/*需求分析
打车起步价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
console.log(car.price(2)); //13
console.log(car.yd(false)); //13

2.5案例分析题

 var name = "The Window";
   var object = {
     name: "My Object",
     getNameFunc: function() {
     return function() {
     return this.name;
     };
   }
 };
console.log(object.getNameFunc()()) //The window
// var f = object.getNameFunc();
// //类似于
// var f = function() {
//      return this.name;
// }
// f();
//f= function() {}()  立即执行函数 this指向window

-----------------------------------------------------------------------------------
var name = "The Window";　　
  var object = {　　　　
    name: "My Object",
    getNameFunc: function() {
    var that = this;
    return function() {
    return that.name;
    };
  }
};
console.log(object.getNameFunc()()) // My object
//getNameFunc 中this指向调用者object，调用getNameFunc函数就把this赋值给that，所以此时that指向getNameFunc