通俗易懂讲解什么是闭包

Doing
207 阅读5分钟

闭包

回答模板：理解闭包+闭包作用+闭包生命周期+闭包缺点

  1. 理解：简单说 闭包=「函数」+「函数内部能访问到的变量」，举个例子：我想实现a++的功能，但是我不想让外部直接操作a（避免外部随意修改a），所以我封装了一个内部函数来实现a++的功能，并把这个内部函数暴露出去，外部可以调用我这个内部函数来实现a++的功能，但是无法直接接触到a
  2. 闭包有两个作用，一个是延长局部变量的生命周期，一个是可以让外部函数操作函数内部方法
  3. 如果要延长局部变量的生命周期，必须定义一个变量引用(设为f)来保存这个暴露出来的内部函数
  4. 也因此闭包容易造成内存泄漏，所以闭包使用完务必记得令f=null使闭包变成垃圾对象

理解闭包

我想实现a++的功能，但是我不想让外部直接操作a（避免外部随意修改a），所以我封装了一个内部函数来实现a++的功能，并把这个内部函数暴露出去，外部可以调用我这个内部函数来实现a++的功能，但是无法直接接触到a

闭包=「函数」+「函数内部能访问到的变量」

  1. 如何产生闭包?

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

  2. 闭包到底是什么?

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

    image.png

  3. 产生闭包的条件?

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

常见的闭包

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

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

    外部函数调用几次，就产生几个闭包

    image.png

闭包的作用

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

问题: 1. 函数执行完后, 函数内部声明的局部变量是否还存在? - 一般不存在，存在于闭包中的变量才可能存在 - 如果定义了一个变量来保存，则闭包中的局部变量会存在 var f=fun1(); f();,直到f成为垃圾对象即f=null时，才不存在 - 如果直接调用，则不存在了fun1(); 1. 在函数外部能直接访问函数内部的局部变量吗? - 不能，但是可以通过闭包让外部操作局部变量(暴露函数)

image.png

闭包的生命周期

  1. 产生: 在嵌套内部函数定义完时就产生了(不是在调用)
  2. 死亡: 在嵌套的内部函数成为垃圾对象时
<script type="text/javascript">
  function fun1() {
    //问题2: 此时闭包产生了吗? --产生了（函数提升，内部函数对象已经创建了）
    var a = 3;
    function fun2() {
      a++;
      console.log(a);
    }
    return fun2;
  }
  //问题1: 此时闭包产生了吗? --产生了
  var f = fun1();
  //问题3: 此时闭包释放了吗? --没有
  f();
  f();
  //问题4: 此时闭包释放回收了吗? --没有
  //问题5: 如何让闭包释放回收呢?
  f=null; //闭包死亡（包含闭包的函数对象成为垃圾对象）
</script>
复制代码

闭包的应用

  • 定义JS模块

    • 具有特定功能的js文件
    • 将所有的数据和功能都封装在一个函数内部(私有的)
    • 只向外暴露一个包含n个方法的对象或函数
    • 模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能
    • 方法一：

    image.png

    image.png

    • 方法二：更佳

    image.png

    image.png

  • 模块化: 封装一些数据以及操作数据的函数, 向外暴露一些行为

  • 循环遍历加监听

  • JS框架(jQuery)大量使用了闭包

闭包的缺点及解决

  1. 缺点

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

  2. 解决

    • 能不用闭包就不用
    • 及时释放 : f = null; //让内部函数对象成为垃圾对象

面试题（难)

//代码片段一----有闭包吗？--没有

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
alert(object.getNameFunc()());  //The Window


//代码片段二----有闭包吗？--有

var name2 = "The Window";
var object2 = {
    name2 : "My Object",
    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name2;
        };
    }
};
alert(object2.getNameFunc()()); //My Object
复制代码

  function fun(n,o) {
        console.log(o)
        return {
            fun:function(m){
                return fun(m,n);
            }
        };
    }
    var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,0,0,0
    var b = fun(0).fun(1).fun(2).fun(3);//undefined,0,1,2
    var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,0,1,1
    
    //外部函数调用几次，就产生几个闭包
    /*
      var a = fun(0);---返回内部函数，此时闭包里的变量n=0
      a.fun(1);---会产生一个新的闭包(因为调用了外部函数)，但是该闭包立马消失了(无保存引用)，所以用的还是a中的闭包的变量n
      a.fun(2); a.fun(3);--同理
    */
    /*
      var b = fun(0).fun(1).fun(2).fun(3);
      首先var b = fun(0)---返回内部函数，此时闭包里的变量n=0
      var b = fun(0).fun(1)---产生一个新的闭包，并保存引用到b上，所以b上的闭包的变量从0更新为1
      var b = fun(0).fun(1).fun(2).fun(3)---同理
    */
    /*
      var c = fun(0).fun(1); ---产生一个新的闭包，并保存引用到c上，所以c上的闭包的变量从0更新为1
      c.fun(2); ---会产生一个新的闭包，但是该闭包立马消失了(无保存引用)，所以用的还是c中的闭包的变量1
      c.fun(3); ---同理
    */
avatar
文章
阅读
粉丝