• javascript基础拾遗(四)


    1.什么是闭包
    正常函数,执行完毕后相关的参数,变量就释放掉了。
    当一个函数的返回值是另一个函数时,该函数的相关参数和变量都会保存在返回的函数中,这种结构叫做闭包。

    2.示例
    计算数组和

    function sum(arr) {
            return arr.reduce(function (x,y) {
                return x+y
            })
        }
        result = sum([1,3,5])
        console.log(result)
    

    运行结果:9
    如果我们不想立即求和,在后面才执行,该怎么做?

    function lazy_sum(arr) {
            var sum = function () {
              return arr.reduce(function (x,y) {
                return x+y
                })
            }
            return sum
        }
        result = lazy_sum([1,3,5])
        console.log(result())
    

    lazy_sum([1,3,5])返回一个计算和的函数,[1,3,5]参数作为返回函数的变量,会一直被返回函数引用。result就是闭包函数。

    3.闭包函数容易引发的问题
    参数和变量会一直被返回函数引用,如果改变参数或变量的值,那么执行时引用的也是最新的值,
    所以应该避免使用会发生变化的变量,作为闭包函数的参数或变量。如:

    function count() {
        var arr = [];
        for (var i=1; i<=3; i++) {
            arr.push(function () {
                return i * i;
            });
        }
        return arr;
    }
    
    var results = count();
    var f1 = results[0];
    var f2 = results[1];
    var f3 = results[2];
    f1()
    f2()
    f3()
    

    运行结果:16 16 16
    因为i的值已经发生改变了

    4.必须引用会发生变化的变量情况
    唯一的解决办法是将闭包函数中的变量的值固定,这样做,闭包函数已经不引用变量了,相当于使用常量。
    如何把变量的值固定呢?
    在闭包函数外层再包裹一层函数,将变量作为参数传递,并立即执行,这样闭包函数中变量的值就绑定了。

    function count() {
        var arr = [];
        for (var i=1; i<=3; i++) {
            arr.push((function (n) {
                return function () {
                    return n * n;
                }
            })(i));
        }
        return arr;
    }
    
    var results = count();
    var f1 = results[0];
    var f2 = results[1];
    var f3 = results[2];
    
    f1(); // 1
    f2(); // 4
    f3(); // 9
    

    5.闭包函数的作用
    闭包函数引用的变量,外部无法访问,可以理解为一个静态私有变量。
    可以想象的使用场景,如计数器等。

  • 相关阅读:
    qq互联接入
    react-markdown-editor-lite 编辑器
    验证码
    vue 3的生命周期 html 的
    如何利用github搭建个人网站
    unittest系统(四)测试套件
    unittest系列(三)unittest用例如何执行
    unittest系列(二)unittest的断言
    unittest系列(一)unittest简介和示例
    命令行开启wsl并安装调试python项目
  • 原文地址:https://www.cnblogs.com/shijingjing07/p/7989592.html
Copyright © 2020-2023  润新知