闭包详解

最新推荐文章于 2025-06-10 17:03:59 发布

原创最新推荐文章于 2025-06-10 17:03:59 发布 · 512 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#闭包 #JS

JavaScript基础专栏收录该内容

27 篇文章

订阅专栏

涉及的面试题

什么是闭包?

函数A内部有一个函数B，函数B可以访问到函数A中的变量，那么函数B就是闭包

function A() {
    let a = 1;

    window.B = function() {
        console.log(a)
    }
}

1. 如何产生闭包?

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

2. 闭包到底是什么?

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

3. 产生闭包的条件?

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

很多人对于闭包的解释可能是函数嵌套了函数，然后返回一个函数。这个解释是不正确的。
在JS中，闭包存在的意义就是让我们间接访问函数内部的变量. 详情如下:

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

闭包产生几次与外部函数调用几次有关调用几次就产生几次

4.闭包的使用场景

1.函数作为返回值


//1 函数作为返回值
function F1() {
    var a = 100
    return function() {
        console.log(a)
    }
}
var f1 = new F1()
var a = 200
f1() //100

函数作为参数来传递

//2 函数作为参数来传递
function F1() {
    var a = 100
    return function() {
        console.log(a) //自由变量，父作用域寻找
    }
}
var f1 = F1()

function F2(fn) {
    var a = 200
    fn()
}
F2(f1) //100

涉及的面试题

循环中使用闭包解决’var’定义函数的问题?

for (var i = 1; i <= 5; i++) {
    setTimeout(function time() {
        console.log(i)
    }, i * 1000)
}

因为setTimeout是异步函数，所以会先把循环全部执行完毕，这时候i已经是6了。所以输出的都是6.

方法一:使用闭包

for (var i = 1; i <= 5; i++) {
    (function(j) {
        setTimeout(function time() {
            console.log(j)
        }, j * 1000)
    })(i)
}

在上述代码中，我们首先使用了立即执行函数i传入函数内部，这个时候值就被固定在了参数j上面，当下次执行time这个闭包的时候，就可以使用外部函数的变量j，从而达到目的

方法二:使用setTimeout的第三个参数，这个参数会被当成timer函数的参数传入（IE9 及其更早版本不支持该参数）

for (var i = 1; i <= 5; i++) {

    setTimeout(function time(j) {
        console.log(j)
    }, 1000, i)

}

方法三:使用let 推荐使用的

for (let i = 1; i <= 5; i++) {
    setTimeout(function time() {
        console.log(i)
    }, 1000)
}

这个let i=1;声明的位置，是在for()内，那么你可以理解成，在for内部就定义了一个i而且是使用let定义。所以每次循环就相当于在当前循环i的值的前提下执行setTimeout这个异步函数

涉及面试题

创建10个a标签，点击的时候弹出来对应的序号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        for (let i = 0; i < 10; i++) {
            (function create() {
                let a = document.createElement('a')
                a.innerHTML = i + "<br>"
                a.addEventListener('click', function(e) {
                    e.preventDefault()
                    alert(i)
                })
                document.body.appendChild(a)
            })(i)

        }
    </script>
</body>

</html>

闭包的作用

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

简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内
部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要
循序渐进的过程。

问题:

函数执行完后, 函数内部声明的局部变量是否还存在? 一般是不存在的，存在闭包的才存在
在函数外部能直接访问函数内部的局部变量吗? 不能，但是我们可以通过闭包让外部操作它

     function fn1() {
            var a = 2;

            function fn2() { //执行函数定义就会产生闭包(不用调用内部函数)
                a++
                console.log(a)
            }
            return fn2()

        }
        var f = fn1() //fn2 这个变量本身就已经不在了 ，但是f存在。
        
        f() //3
        f() //4

形成闭包了，gc不会回收，因为此时变量一直处于被引用状态

函数执行，会形成调用栈LIFO，每个函数的作用域会形成一帧，只要当函数执行完毕，这一帧才会消失。随着当前帧的消失，销毁了当前的局部作用域，所谓作用域就是用来管理变量的一套规则，那么作用域消失了，变量自然会被销毁，释放内存。

函数的数据类型是引用类型，同一个函数，每次执行都会创建新的调用栈，他们之间没有半毛钱关系。
。

产生:在嵌套内部函数定义执行完时就产生了(不是调用)


     function fn1() {
      //此时闭包就已经产生了  函数提升  内部函数对象已经创建了
            var a = 2;

            function fn2() { //执行函数定义就会产生闭包(不用调用内部函数)
                a++
                console.log(a)
            }
            return fn2()

        }
        var f = fn1() //fn2 这个变量本身就已经不在了 ，但是f存在。
        
        f() //3
        f() //4   闭包没有死亡
        f=null  //闭包死亡 （包含闭包的函数对象成为了垃圾对象）

死亡:在嵌套的内部函数成为垃圾对象的时候

    function fn1() {
      //此时闭包没有产生了  这里不存在函数提升 函数表达式不提升
            var a = 2;

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

        }
        var f = fn1() //fn2 这个变量本身就已经不在了 ，但是f存在。
        
        f() //3
        f() //4   闭包没有死亡
        f=null  //闭包死亡 （包含闭包的函数对象成为了垃圾对象）

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

什么是JS模块

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

<body>
    <script src="./myMouule.js"></script>
    <script src="./myModule2.js"></script>
    <script>
       let module = myModule()
        module.doSomething()
        module.doOtherthing()
        myModule2.doOtherthing()
    </script>
</body>
//myMouule.js
function myModule() {
    let mgs = "fanfeifei"

    function doSomething() {
        console.log('dosomething()' + mgs.toUpperCase())
    }

    function doOtherthing() {
        console.log("doOtherSomething" + mgs.toLowerCase())
    }
    return {
        doSomething: doSomething,
        doOtherthing: doOtherthing
    } //向外暴露
}

//myModule2.js
(function(window) {
    let mgs = "fanfeifei"

    function doSomething() {
        console.log('dosomething()' + mgs.toUpperCase())
    }

    function doOtherthing() {
        console.log("doOtherSomething" + mgs.toLowerCase())
    }
    //向外暴露
    window.myModule2 = {
        doOtherthing: doOtherthing,
        doSomething: doSomething
    }
})(window)//写window对代码压缩比较好

闭包的缺点

缺点

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

解决

能不用闭包就不用
及时释放

function f1() {
    let arr = new Array[1000]

    function fn2() {
        console.log(arr.length)
    }
    return fn2
}
var f=fn1()
f()
//不用了 就释放
f=null//让内部函数成为垃圾对象，从而回收闭包

内存溢出

一种程序运行出现的错误
当程序运行需要的内存超过剩余的内存时，就出现抛出内存溢出的错误

内存泄漏

占用的内存没有及时释放
内存泄漏积累多了就容易导致内存溢出
常见的内存泄漏

意外的全局变量

function fn(){
    a=1  //全局变量
}
fn() //函数运行完也不释放

没有及时清理的计时器或者回调函数

setInterval(()=>{},1000)

闭包

面试题

//代码片段一
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function() {
        return function() {
            return this.name;
        };
    }
};
console.log(object.getNameFunc()()); //? The Window
/** 
 * object.getNameFunc()()
 * object.getNameFunc() 执行完以后返回的函数就已经和object没有任何关系
 * 所以this 就是普通函数调用  指向window
 * 
*/

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

/** 
 * 
 * that保存的是this  那么这个that 指向的就是object2
 * 所以最后object2.getNameFunc()() 返回就是object2.name
*/

  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