什么是闭包：

• 闭包是函数和函数声明所在其词法作用域的组合(MDN)
• 函数连同它作用域链上的要找的这个变量，共同构成闭包

看懂之前博客

理解作用域

• 函数在执行的过程中，先从自己内部找变量
• 如果找不到，再从创建当前函数所在的作用域(词法作用域)去找, 以此往上
• 注意找的是变量的当前的状态
  列如：

function init() {
    var name = xiaohui"; // name 是一个被 init 创建的局部变量
    function displayName() { // displayName() 是内部函数,一个闭包
        alert(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

这就是一个闭包

函数模型方式

function fn1(){
    let i = 1;
    return function(){
        i+=1;
        console.log(i);
    }
}
let add=fn1();
add();//2
add();//3
add();//4

对象模型方式

function createNumber(){
  let num= 1;
  return {
    getnum:()=>{
      return num;
    },
    setnum:(value)=>{
      num = value;
    }
  }
}
var n = createNumber();
n.setnum(2);
console.log(n.getnum())

一般情况下使用闭包主要是为了

• 封装数据
• 暂存数据`

案例

理解了下面几个案例，你就能熟练理解运用闭包了

如下代码输出多少？如果想输出3，那如何改造代码？

var fnArr = [];
for (var i = 0; i < 10; i ++) {
  fnArr[i] =  function(){
    return i
  };
}
console.log( fnArr[3]() )  //10

闭包

var fnArr = [];
for(var i=0 ;i<10;i++){
    fnArr[i]=(function(j){
        return function(){
            return j;
        }
    }(i));
}
console.log(fnArr[3]());

立即执行函数

var fnArr = [];
for(var i=0;i<10;i++){
    (   function(i){
        fnArr[i]= function(){
            return i;
        }
    }(i))
}
console.log(fnArr[3]());

es6

var fnArr = [];
for(let i = 0;i<10;i++){
    fnArr[i]=function(){
        return i;
    }
}
console.log(fnArr[3]());

封装一个 Car 对象。

var Car = (function(){
    var speed = 0;
    function set(s){
        speed=s;
    }
    function get(){
        return speed;
    }
    function speedUp(){
        speed++;
    }
    function speedDown(){
        speed--;
    }
    return {
        set: set,
        get: get,
        speedUp: speedUp,
        speedDown: speedDown
    }
})()

如下代码输出多少？如何连续输出 0,1,2,3,4？

for(var i=0; i<5; i++){
  setTimeout(function(){
    console.log('delayer:' + i )
  }, 0)
}   //5 5 5 5 5;

for(var i=0; i<5; i++){
    (function(j){
        setTimeout(function(){
            console.log('delayer:' + j )
        }, 0)
    }(i))
}

for (var i=0;i<5;i++){
    setTimeout((function (j) {
            return function(){
                console.log('delayer:'+j)
            }
        }(i))
    ,0)
}

如下代码输出多少？

function makeCounter() {
    var count = 0;
    return function() {
        return count++
    };
}
var counter = makeCounter();
console.log(counter());\\0
console.log(counter());\\1
console.log(counter());\\2
console.log(counter());\\3
var counter2 = makeCounter();
console.log(counter2());\\0
console.log(counter2());\\1
console.log(counter2());\\2
console.log(counter2());\\3

补全代码，实现数组按姓名、年纪、任意字段排序

var users = [
    { name: "John", age: 20, company: "Baidu" },
    { name: "Pete", age: 18, company: "Alibaba" },
    { name: "Ann", age: 19, company: "Tecent" }
]


function byName(v1,v2){
    return v1.name>v2.name;
}
function byAge(v1,v2){
    return v1.age>v2.age;
}
function byCompany(v1,v2){
    return v1.company>v2.company;
}
function byField(field){
    return function(v1,v2){
        return v1[field]>v2[field]
    }
}
console.log(users.sort(byName))
console.log(users.sort(byAge))
console.log(users.sort(byCompany))
console.log(users.sort(byField('age')))
console.log(users.sort(byField('company')))

写一个 sum 函数，实现如下调用方式

function sum(a){
return function(b){
return a+b;
}
}
console.log(sum(1)(2))