zoukankan      html  css  js  c++  java
  • 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.闭包函数的作用
    闭包函数引用的变量,外部无法访问,可以理解为一个静态私有变量。
    可以想象的使用场景,如计数器等。

  • 相关阅读:
    http学习笔记(一)
    关于花瓣网header条的思考
    前端知识体系之入门篇总结(一)
    浮动理解【转】
    CSS选择器比较:queryselector queryselectorall
    javascript模块化
    【C#】 Stopwatch详解
    ArcGIS图层添加字段出现:“定义了过多字段”
    [SWMM]出现问题及解决
    ArcGIS:从DEM数据提取对应点的高程
  • 原文地址:https://www.cnblogs.com/shijingjing07/p/7989592.html
Copyright © 2011-2022 走看看