1、高階函式

高階函式是對其他函式進行操作的函式，它接收函式作為引數或將函式作為返回值輸出。

此時fn 就是一個高階函式

函式也是一種資料型別，同樣可以作為引數，傳遞給另外一個引數使用。最典型的就是作為回撥函式。

同理函式也可以作為返回值傳遞回來

2、閉包

2.1變數的作用域複習

變數根據作用域的不同分為兩種：全域性變數和區域性變數。

1. 函式內部可以使用全域性變數。

2. 函式外部不可以使用區域性變數。

3. 當函式執行完畢，本作用域內的區域性變數會銷燬。

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閉包的案例

1. 利用閉包的方式得到當前li 的索引號（迴圈註冊點選事件）（經典面試題）

for (var i = 0; i < lis.length; i++) {
// 利用for迴圈建立了4個立即執行函式
// 立即執行函式也稱為小閉包，因為立即執行函式裡面的任何一個函式都可以使用它的i這個變數
(function(i) {
  lis[i].onclick = function() {
   console.log(i);
   }
 })(i);
}

2. 閉包應用-迴圈中的setTimeout() 3秒鐘之後,列印所有li元素的內容

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

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
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