持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

引入

假设现在我们有一个需求：网页中有三个按钮，我们想要点击一个按钮的时候，网页会显示他是第几个按钮。

思路：遍历+ 监听

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

如果写成for (var i = 0; i < btns.length; i++)，那么在每次循环的时候都会计算一遍btn.length会影响代码效率

这么写是错误的，因为这个程序会用循环为每一个按钮绑定事件，而再去用鼠标点击去触发这个事件的时候，其实循环早已经执行完毕了。而执行完毕就意味着这个i就是2(这个i是全局变量)。也就是说不管你点击的哪个按钮，网页都会显示它是第3个按钮。

我们可以使用添加属性的办法，去记录他的下标：

for (var i = 0,length=btns.length; i < length; i++) {
    var btn = btns[i]
    //将btn所对应的下标保存在btn上
    btn.index = i
    btn.onclick = function () {
      alert('第'+(this.index+1)+'个')
    }

我们也可以用闭包的原理来做：

for (var i = 0,length=btns.length; i < length; i++) {
    (function (j) {
      var btn = btns[j]
      btn.onclick = function () {
        alert('第'+(j+1)+'个')
      }
    })(i)
  }

什么是闭包

首先我们来看一段代码：

function fn1 () {
    var a = 2
    var b = 'abc'
    function fn2 () { //执行函数定义就会产生闭包(不用调用内部函数)
      console.log(a)
    }
  }
  fn1()

如何产生闭包?

当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包

闭包到底是什么?

使用chrome调试查看
理解一: 闭包是嵌套的内部函数
理解二: 包含被引用变量(函数)的对象
注意: 闭包存在于嵌套的内部函数中

产生闭包的条件?

函数嵌套
内部函数引用了外部函数的数据(变量/函数)
调用了外部函数

在这里插入图片描述理解一就是把红色部分当作闭包理解二就是把绿色部分当作闭包(Closure就是闭包的意思)

常见的闭包

常见的闭包有两种情景：

将函数作为另一个函数的返回值
将函数作为实参传递给另一个函数调用

①将函数作为另一个函数的返回值

// 1. 将函数作为另一个函数的返回值
  function fn1() {
    var a = 2
    function fn2() {
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4

注意：

整个过程只产生了一个闭包
闭包个数与产生内部对象有关，所以我们可以通过调用了几次外部函数来判断闭包个数。
当执行到var a=2的时候闭包就已经产生了，因为函数声明会提升。

②将函数作为实参传递给另一个函数调用

// 2. 将函数作为实参传递给另一个函数调用
  function showDelay(msg, time) {
    setTimeout(function () {
      alert(msg)
    }, time)
  }
  showDelay('NEFU', 2000)

注意：

msg是被引用对象，也就是说msg是闭包，而time不是
因为内部的嵌套函数时function{}那个括号里的，而time不在里面

闭包的作用

闭包的两大作用：

使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
让函数外部可以操作(读写)到函数内部的数据(变量/函数)

我们可以分析以下代码：

function fn1() {
    var a = 2
    function fn2() {
      a++
      console.log(a)
      // return a
    }
    function fn3() {
      a--
      console.log(a)
    }
    return fn3
  }
  var f = fn1()
  f() // 1
  f() // 0

问题一：函数执行完后, 函数内部声明的局部变量是否还存在? 答：一般是不存在的，存在于闭包中的变量才可能存在。就如同上面的代码因为有var f = fn1()这一句话，使对象(原来被fn3指着的对象)没有因为函数的执行结束而被销毁(因为现在有f指着他，导致他不会被销毁)。

问题二：在函数外部能直接访问函数内部的局部变量吗? 答：不能, 但我们可以通过闭包让外部操作它

闭包的作用有点类似于java中的对象的封装性。你可以将fn1当作类，将a、fn2、fn3当作对象的属性和方法。只不过这里是通过return来暴露内部方法，而java是通过权限修饰符来进行暴露。

闭包的生命周期

产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
死亡: 在嵌套的内部函数成为垃圾对象时

例如以下代码：

function fn1() {
    //此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
    var a = 2
    function fn2 () {
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4
  f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

如果换一种声明方式：

function fn1() {
    var a = 2
    //如果这样声明，则此时才会产生闭包
    var fn2 = function fn2 () {
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4
  f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

闭包的应用 -- 自定义JS模块

JS模块的本质就是js文件

我们可以将所有的数据和功能都封装在一个函数内部(私有的)，只向外暴露一个包含n个方法的对象或函数(一个容器),模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能即可

实现一：

通过return一个容器来进行暴露。

模块：

function myModule() {
  //私有数据
  var msg = 'My NEFU'
  //操作数据的函数
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }

  //向外暴露对象(给外部使用的方法)
  return {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
}

使用端：

<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript">
  var module = myModule()
  module.doSomething()
  module.doOtherthing()
</script>

实现二：

通过立即执行函数，将方法变成为window的属性，使用的时候可以省略window

模块：

(function () {
  //私有数据
  var msg = 'My NEFU'
  //操作数据的函数
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }

  //向外暴露对象(给外部使用的方法)
  window.myModule2 = {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
})()

使用端：

<script type="text/javascript" src="myModule2.js"></script>
<script type="text/javascript">
  myModule2.doSomething()
  myModule2.doOtherthing()
</script>

注：将模块的代码这样写更好：

(function (window) {
  //私有数据
  var msg = 'My NEFU'
  //操作数据的函数
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }

  //向外暴露对象(给外部使用的方法)
  window.myModule2 = {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
})(window)

如此在压缩代码的时候，会将所有window替换为单个字母，而原来的代码则会原模原样的进行存储。

闭包的缺点以及解决

缺点：

函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长
容易造成内存泄露

解决：

能不用闭包就不用
及时释放(让其指向null)

例如：

<script type="text/javascript">
  function fn1() {
    var arr = new Array[100000]
    function fn2() {
      console.log(arr.length)
    }
    return fn2
  }
  var f = fn1()
  f()

  f = null //让内部函数成为垃圾对象-->回收闭包
</script>

闭包的面试题

<script type="text/javascript">
  //代码片段一
  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;
      };
    }
  };
  alert(object.getNameFunc()());  //?  


  //代码片段二
  var name2 = "The Window";
  var object2 = {
    name2 : "My Object",
    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name2;
      };
    }
  };
  alert(object2.getNameFunc()()); //?  
</script>

答案：第一个问号处：the window 第二个问号处： my object

要注意：片段一没有形成闭包，片段二是有闭包的。此处涉及前面的一个知识点this：在这里插入图片描述

JavaScript闭包

引入