javascript 闭包

最新推荐文章于 2022-07-23 10:54:03 发布

gqk01

最新推荐文章于 2022-07-23 10:54:03 发布

阅读量77

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/gqk01/article/details/119849248

版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨JavaScript中的闭包概念，包括其产生、理解、常见应用场景、作用及生命周期。通过实例代码展示了闭包如何保留函数内部变量的状态，并允许外部访问和操作这些变量。此外，还分析了闭包在函数作为返回值和参数传递时的应用，以及闭包如何影响函数内部变量的生命周期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入闭包

<body>

    <button>测试1</button>
    <button>测试2</button>
    <button>测试3</button>
    <!--
    需求: 点击某个按钮, 提示"点击的是第n个按钮"
  -->
    <script type="text/javascript">
        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, length = btns.length; i < length; i++) {
            var btn = btns[i]
                //将btn所对应的下标保存在btn上
            btn.index = i
            btn.onclick = function() {
                alert('第' + (this.index + 1) + '个')
            }
            console.dir(btn)
        }

        //利用闭包
        // for (var i = 0, length = btns.length; i < length; i++) {
        //     (function(j) {
        //         var btn = btns[j]
        //         btn.onclick = function() {
        //             alert('第' + (j + 1) + '个')
        //         }
        //     })(i)
        // }
    </script>
</body>

2.理解闭包

闭包（ closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计
简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。闭包作用：延伸变量的作用范围

<body>
    <!--一句话：都是因为没有块级作用域，只有函数作用域和全局
    1. 如何产生闭包?
    * 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包
    2. 闭包到底是什么?
    * 使用chrome调试查看
    * 理解一: 闭包是嵌套的内部函数(绝大部分人)
    * 理解二: 包含被引用变量(函数)的对象(极少数人)
    * 注意: 闭包存在于嵌套的内部函数中
    3. 产生闭包的条件?
    * 函数嵌套
    * 内部函数引用了外部函数的数据(变量/函数)
  -->
    <script type="text/javascript">
        function fn1() {//fn1就是个闭包
            var a = 2
            var b = 'abc'

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

        function fun1() {
            var a = 3
            var fun2 = function() {
                console.log(a)
            }
        }
        fun1()
    </script>
</body>

3.常见的闭包

<body>
    <!--
    1. 将函数作为另一个函数的返回值
    2. 将函数作为实参传递给另一个函数调用
  -->
    <script type="text/javascript">
        // 1. 将函数作为另一个函数的返回值
        function fn1() {
            var a = 2

            function fn2() {
                a++
                console.log(a)
            }
            return fn2
        }
        var f = fn1() //直接调用函数，里面的函数并没有被调用，只是定义了，当函数执行完会被当做垃圾对象释放，所以要用一个变量来接受函数
        f() // 3
        f() // 4

        // 2. 将函数作为实参传递给另一个函数调用
        function showDelay(msg, time) {
            setTimeout(function() {
                alert(msg) //引用变量msg 产生闭包  不引用变量msg 不会产生闭包 
            }, time)
        }
        showDelay('JSJS', 2000)
    </script>
</body>

4.闭包的作用

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

问题:
  1. 函数执行完后, 函数内部声明的局部变量是否还存在?  一般是不存在, 存在于闭中的变量才可能存在
  2. 在函数外部能直接访问函数内部的局部变量吗? 不能, 但我们可以通过闭包让外部操作它
-->
<script type="text/javascript">
  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
</script>

</body>

5.闭包的生命周期

<body>
    <!--
    1. 闭包产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
    2. 闭包死亡: 在嵌套的内部函数成为垃圾对象时
  -->
    <script type="text/javascript">
        function fn1() {
            //此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
            var a = 2

            function fn2() {
                a++
                console.log(a)
            }
            return fn2
        }
        var f = fn1()
        f() // 3
        f() // 4
        f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)
    </script>
</body>

6.试题

<body>

    <script type="text/javascript">
        //代码片段一 无闭包
        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function() {
                console.log(this, "1111") //this=Object
                return function() {
                    console.log(this, "222") //this=Window
                    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
    </script>
</body>