js 闭包

js 闭包

一：什么是闭包？？

闭包 ： 有权访问另一个函数作用域中的变量的函数

简单理解就是：

1. 一个作用域可以访问另一个函数内部的局部变量
2. 这个被访问的变量所在的函数就是闭包函数 闭包可以让作用域外部访问作用域内部的变量
3. 闭包就是一个函数

function fn() {   
    var name= "小郭";
    function fun() {
        console.log(name);    
    }
    fun()
}
fn()  

上面的代码中：fun() 能访问到另一个函数 fn() 里面的局部变量name，那name所在的函数fn() 就是一个闭包函数。

二：闭包能干啥？
闭包可以让fn()外部的作用域访问fn()内部的局部变量。
稍微修改下上面的代码来看看

function fn() { 
    var name= "小郭";
    return function fun() {
        console.log(name);    
    }
}
var f = fn()   
f();

把 fun()给return出去就相当于：

f = function fun() {
        console.log(name);    
    }

调用f() 此时在全局作用域下就访问到局部变量name了，
可以看出：闭包延伸了变量的作用范围 （闭包的作用）

最后举两个利用闭包的简单例子：
1 点击每一个li的时候打印出他的索引来：

<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
    <li>菠萝</li>
</ul>

var lis =document.querySelector("ul").querySelectorAll("li");
for(var i=0;i<lis.length;i++) {
   (function(i){   //立即执行函数
       lis[i].onclick = function() {
           console.log(i);        
       } 
   })(i)
}

2 打车起步价10元（3公里以内），之后每多一公里增加5元，用户输入公里数，就可以计算打车的价格
如果有拥堵的情况，总价格多收10元拥堵费

var Car = (function() {   //立即执行函数
  var start = 10; //起步价
  var total = 0; // 总价
  return {
    //不拥堵的正常价格
    price: function(n) {   //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));   //20
console.log(Car.yd(true));   //30

console.log(Car.price(2));  //10
console.log(Car.yd(false));  //10

对闭包一直理解的很模糊，后面有深入理解的话还会回头补充下这篇文章。。。