闭包

学习闭包之前，先来看一段代码。

var btns = document.getElementsByTagName('button')
// var length = btns.length 
// 也可以把 length 写在 for 循环中
for (var i = 0,length = btns.length; i < length; i++) {
  btns[i].index = i;
  btns[i].onclick = function() {
    console.log(this.index + 1)
  }
}

上面的代码其实很简单，就是为每一个按钮添加了一个点击事件。相应的按钮被点击时，输出它是第几个按钮。改进如下：

var btns = document.getElementsByTagName('button')
for (var i = 0,length = btns.length; i < length; i++) {
  (function(i) {
    btns[i].onclick = function() {
    console.log(i + 1)
  }
  })(i)
}

这就用到了闭包，下面，我们就来解释一下什么是闭包。

概述

什么是闭包？

理解一：闭包就是嵌套的内部函数
理解二：包含被引用变量（或函数）的对象

但是，无论怎么理解，闭包就是存在于内部函数中（前提是必须调用外部函数）。

function a() {
  var x = 2;
  var y = 3;
  function b() {
    console.log(x)
  }
}
a()
// 其中就产生了闭包, 因为函数 b 使用了函数 a 中的变量 x
// 外部函数 a 被调用, 所以产生了闭包

原理

那么，什么时候才会产生闭包呢？当一个嵌套的内部（子）函数使用了父函数的变量（或函数），内部函数有定义（或声明），且外部函数被执行时，就产生了闭包。闭包中存放的是内部函数使用的变量（或函数）。

function a() {
  var x = 2;
  var y = 3;
  function b() {
    console.log(x)
  }
}
a()
// 其中就产生了闭包, 因为函数 b 使用了函数 a 中的变量 x
// 如果内部函数 b 没有使用 x 和 y, 那么, 不会产生闭包

外部函数每被调用一次，就产生一个闭包。外部函数被调用，且内部函数有定义（声明）时，闭包才产生。上述代码在 var x = 2 时就产生了闭包（因为函数声明会被提前）。

作用

function f1() {
  var a = 1;
  function f2() {
    a++
    console.log(a)
  }
  return f2
}
var f = f1()
f() // 输出2
f() // 输出3

上面的示例中是否有矛盾的地方呢，a 是局部变量，当函数 f1 被执行完成后就应该消失，但是为什么第二次的输出是 3，这就是闭包的作用。闭包能延长局部变量的生命周期，外部函数使用完后，它的局部变量仍存在于内存中。闭包能使函数外部可以操作函数内部的变量（或函数）。

生命周期

示例一

function f1() {
  var a = 1;
  function f2() {
    a++
    console.log(a)
  }
  return f2
}
var f = f1()
f() // 输出 2
f() // 输出 3

外部函数 f1 被调用时，产生闭包（在 var a = 1 时就产生），当 f=null 时，闭包被消除。

示例二
```
function f1() {
  var a = 1;
  var f2 = function () {
    a++
    console.log(a)
  }
  return f2
}
var f = f1()
f() // 输出 2
f() // 输出 3
```
外部函数 f1 被调用时，产生闭包（在 var f2 = function() {} 被执行完成后才产生闭包，因为此时才有内部函数的声明），当 f=null 时，闭包被消除。

自定义 JS 模块

使用闭包来向外暴露我们的接口。

myModule.js

function f () {
  var msg = 'hello'
  function f1() {
    console.log('f1()=>'+msg.toUpperCase())
  }
  function f2() {
    console.log('f2()=>'+msg.toLowerCase())
  }
  return {
    f1:f1
    f2:f2
  }
}

// 引入 myModule.js
// ...
// 然后使用
var module = f();
module.f1()
module.f2()

myModule2.js

(function (){
  var msg = 'hello'
  function f1() {
    console.log('f1()=>'+msg.toUpperCase())
  }
  function f2() {
    console.log('f2()=>'+msg.toLowerCase())
  }
  window.myModules = {
    f1:f1
    f2:f2
  }
})()

// 引入 myModule2.js
// ...
// 然后使用
myModules.f1()
myModules.f2()

缺点

使用闭包可能会使变量一直占用内存，从而造成内存泄露。因此，能不使用闭包时，就不使用；或者及时释放内存。

示例

示例一

var name = 'The Window'
var obj = {
  name: 'The Obj'
  fun: function() {
    return function() {
      return this.name
    }
  }
}
console.log(obj.fun()()) // The Window

此示例中没有闭包。

示例二

var name = 'The Window'
var obj = {
  name: 'The Obj'
  fun: function() {
    var that = this
    return function() {
      return that.name
    }
  }
}
console.log(obj.fun()()) // The Obj

此示例中含有闭包。

# 闭包

# 概述

# 原理

# 作用

# 生命周期

# 自定义 JS 模块

# 缺点

# 示例

闭包

概述

原理

作用

生命周期

自定义 JS 模块

缺点

示例