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

词法作用域

创建当前函数所在的作用域(变量和块作用域所在位置)

闭包

函数连同函数内部能访问到的变量共同构成闭包。—— mdn

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。——《你不知道的JavaScript》

闭包作用：

读取函数内部变量
暂存变量(让这些变量始终保持在内存中)

缺点：

闭包的变量被保存在内存中，内存消耗很大
可能改变父函数的值

问题是闭包造成的
解决办法是立即执行函数

在迭代内使用IIFE会为每个迭代都生成一个新的作用域，使得作用域延迟函数的回调可以将新的作用于封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。——《你不知道的JavaScript》

原理是创建新的作用域

闭包题

function car(){
    var speed = 0
    function fn(){
        speed++
        console.log(speed)
    }
    return fn //若不return变量会被销毁掉
}

var speedUp = car() // speedUp是执行car()时创建的fn函数实例的引用，fn仍可以访问到speed值，这样speed值被传给speedUp
speedUp() //1
speedUp() //2  说明变量暂存起来不会在调用后被清除

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

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

fnArr[3]() = function(){return i}()
//此时for循环已完成

返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。

形成独立作用域

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

fnArr[3]() = (function(j){
return function(){
return j
}
})(3)

立即执行函数

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

let创建块级作用域

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

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

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

改为

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

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

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

改为倒序

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

封装一个 Car 对象,这个对象按以下方式调用

Car.set(30)
Car.get() //30
Car.speedUp()
Car.get() //31
Car.speedDown()
Car.get()  //30

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
   }
})()
Car.set(30)
Car.get() //30
Car.speedUp()
Car.get() //31
Car.speedDown()
Car.get()  //30

如下代码输出多少？

function makeCounter() {
  var count = 0

  return function() {
    return count++
  };
}

var counter = makeCounter()
var counter2 = makeCounter(); //换了一个新作用域

console.log( counter() ) // 0
console.log( counter() ) // 1

console.log( counter2() ) // 0
console.log( counter2() ) // 1

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

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

users.sort(byName) 
users.sort(byAge)
users.sort(byField('company'))

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

function byName(user1,user2){
    return user1.name > user2.name
}
function byAge(user1,user2){
    return user1.age > user2.age
}
function byField(field){
    return function(user1,user2){
        return user1[field] > user2[field]
    }
}
users.sort(byName) 
users.sort(byAge)
users.sort(byField('company'))

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

console.log( sum(1)(2) ) // 3
console.log( sum(5)(-1) ) // 4

function sum(a){
    return function(b){
        return a + b
    }
}