深刻浅出Javascript闭包

1、引子

闭包（closure）是 Javascript 语言的一个难点，面试时常被问及，也是它的特点，不少高级应用都要依靠闭包实现。本文尽量用简单易懂的话，讲清楚闭包的概念、造成条件及其常见的面试题。

咱们先来看一个例子：

var n = 999;
function f1() {
console.log(n);
}
f1() // 999

上面代码中，函数f1能够读取全局变量n。可是，函数外部没法读取函数内部声明的变量。

function f1() {
var n = 999;
}
console.log(n)
// Uncaught ReferenceError: n is not defined

上面代码中，函数f1内部声明的变量n，函数外是没法读取的。

若是有时须要获得函数内的局部变量。正常状况下，这是办不到的，只有经过变通方法才能实现。那就是在函数的内部，再定义一个函数。

function f1() {
var n = 999;
function f2() {
  console.log(n); // 999
 }
}

上面代码中，函数f2就在函数f1内部，这时f1内部的全部局部变量，对f2都是可见的。既然f2能够读取f1的局部变量，那么只要把f2做为返回值，咱们不就能够在f1外部读取它的内部变量了吗！

2、闭包是什么

咱们能够对上面代码进行以下修改：

function f1(){
   var a = 999;
   function f2(){
    console.log(a);
   }
   return f2; // f1返回了f2的引用
   }
   var result = f1(); // result就是f2函数了
   result();  // 执行result，全局做用域下没有a的定义，
         //可是函数闭包，可以把定义函数的时候的做用域一块儿记住，输出999

上面代码中，函数f1的返回值就是函数f2，因为f2能够读取f1的内部变量，因此就能够在外部得到f1的内部变量了。

闭包就是函数f2，即可以读取其余函数内部变量的函数。因为在JavaScript语言中，只有函数内部的子函数才能读取内部变量，所以能够把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特色，就是它能够“记住”诞生的环境，好比f2记住了它诞生的环境f1，因此从f2能够获得f1的内部变量。在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。

那到底什么是闭包呢？

当函数能够记住并访问所在的词法做用域，即便函数是在当前词法做用域以外执行，这就产生了闭包。 ----《你不知道的Javascript上卷》

我我的理解，闭包就是函数中的函数(其余语言不能函数再套函数),里面的函数能够访问外面函数的变量，外面的变量的是这个内部函数的一部分。

闭包造成的条件

• 函数嵌套
• 内部函数引用外部函数的局部变量

3、闭包的特性

每一个函数都是闭包，每一个函数天生都可以记忆本身定义时所处的做用域环境。把一个函数从它定义的那个做用域，挪走，运行。这个函数竟然可以记忆住定义时的那个做用域。无论函数走到哪里，定义时的做用域就带到了哪里。接下来咱们用两个例子来讲明这个问题：

//例题1
var inner;
function outer(){
var a=250;
inner=function(){
alert(a);//这个函数虽然在外面执行，但可以记忆住定义时的那个做用域，a是250
  }
}
outer();
var a=300;
inner();//一个函数在执行的时候，找闭包里面的变量，不会理会当前做用域。

//例题2
function outer(x){
  function inner(y){
  console.log(x+y);
  }
return inner;
}
var inn=outer(3);//数字3传入outer函数后，inner函数中x便会记住这个值
inn(5);//当inner函数再传入5的时候，只会对y赋值，因此最后弹出8

4、闭包的内存泄漏

栈内存提供一个执行环境，即做用域，包括全局做用域和私有做用域,那他们何时释放内存的？

• 全局做用域----只有当页面关闭的时候全局做用域才会销毁
• 私有的做用域----只有函数执行才会产生

通常状况下，函数执行会造成一个新的私有的做用域，当私有做用域中的代码执行完成后，咱们当前做用域都会主动的进行释放和销毁。但当遇到函数执行返回了一个引用数据类型的值，而且在函数的外面被一个其余的东西给接收了，这种状况下通常造成的私有做用域都不会销毁。

以下面这种状况：

function fn(){
var num=100;
return function(){
  }
}
var f=fn();//fn执行造成的这个私有的做用域就不能再销毁了

也就是像上面这段代码，fn函数内部的私有做用域会被一直占用的，发生了内存泄漏。所谓内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。闭包不能滥用，不然会致使内存泄露，影响网页的性能。闭包使用完了后，要当即释放资源，将引用变量指向null。

接下来咱们看下有关于内存泄漏的一道经典面试题：

function outer(){
  var num=0;//内部变量
  return function add(){//经过return返回add函数，就能够在outer函数外访问了
  num++;//内部函数有引用，做为add函数的一部分了
  console.log(num);
  };
 }
  var func1=outer();
  func1();//其实是调用add函数， 输出1
  func1();//输出2 由于outer函数内部的私有做用域会一直被占用
  var func2=outer();
  func2();// 输出1  每次从新引用函数的时候，闭包是全新的。
  func2();// 输出2  

5、闭包的做用

1.能够读取函数内部的变量。

2.可使变量的值长期保存在内存中，生命周期比较长。所以不能滥用闭包，不然会形成网页的性能问题

3.能够用来实现JS模块。

JS模块:具备特定功能的js文件,将全部的数据和功能都封装在一个函数内部(私有的),只向外暴露一个包信n个方法的对象或函数,模块的使用者,只须要经过模块暴露的对象调用方法来实现对应的功能。

具体请看下面的例子:

//index.html文件
<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript">
  myModule2.doSomething()
  myModule2.doOtherthing()
</script>

//myModule.js文件
(function () {
  var msg = 'Beijing'//私有数据
  //操做数据的函数
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }
  //向外暴露对象(给外部使用的两个方法)
  window.myModule2 = {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
})()

6、闭包的运用

咱们要实现这样的一个需求: 点击某个按钮, 提示"点击的是第n个按钮",此处咱们先不用事件代理:

.....
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
<script type="text/javascript">
   var btns = document.getElementsByTagName('button')
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '个')
      }
    }
</script>

万万没想到，点击任意一个按钮，后台都是弹出“第四个”,这是由于i是全局变量,执行到点击事件时，此时i的值为3。那该如何修改，最简单的是用let声明i

for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '个')
      }
    }

另外咱们能够经过闭包的方式来修改:

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

若是以为文章对你有些许帮助，欢迎在个人GitHub博客点赞和关注，感激涕零！

ps:文章于2018.11.16从新修改,但愿对大家有所收获！

参考文章

Javascript教程

你不知道的Javascript上卷