閉包

1. 變量的做用域複習

變量根據做用域的不一樣分爲兩種:全局變量和局部變量。閉包

  1. 函數內部能夠使用全局變量。函數

  2. 函數外部不能夠使用局部變量。this

  3. 當函數執行完畢,本做用域內的局部變量會銷燬。atom

2. 什麼是閉包

閉包(closure)指有權訪問另外一個函數做用域中變量的函數。簡單理解就是 ,一個做用域能夠訪問另一個函數內部的局部變量。 spa

 

 

3. 閉包的做用

做用:延伸變量的做用範圍。blog

 function fn() {
  var num = 10;
  function fun() {
      console.log(num);
}
   return fun;
}
var f = fn();
f();

4. 閉包的案例

  1. 利用閉包的方式獲得當前li 的索引號索引

for (var i = 0; i < lis.length; i++) {
// 利用for循環建立了4個當即執行函數
// 當即執行函數也成爲小閉包由於當即執行函數裏面的任何一個函數均可以使用它的i這變量
(function(i) {
   lis[i].onclick = function() {
     console.log(i);
  }
})(i);
}
  1. 閉包應用-3秒鐘以後,打印全部li元素的內容作用域

 for (var i = 0; i < lis.length; i++) {
  (function(i) {
    setTimeout(function() {
    console.log(lis[i].innerHTML);
    }, 3000)
  })(i);
}
  1. 閉包應用-計算打車價格 get

/*需求分析
打車起步價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. 案例

 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()())
相關文章
相關標籤/搜索