前端初学-闭包相关

本人所有文章均为学习过程中的总结,不同程度地参考了互联网上其他的文章,如果不正恳请指出,共同进步

闭包

我们有一些数据需要放在一个私有空间--->我们发现函数的作用域是私有的(块级作用域)--->我们创建了一个函数--->里面有我们存放的私密数据--->执行这个函数,私密数据创建并初始化--->我们需要通过一些特殊的方法在公共空间访问函数里面的数据--->闭包

• 闭包:当函数可以记住并访问所在的作用域(全局作用域除外)时,就产生了闭包,即使函数是在当前作用域之外执行.
• 为什么要使用闭包:通过函数创建的作用域形成私有空间保护数据,在函数外部访问函数内部的数据,只有通过函数内部提供的方法有限制地进行访问和更改(在提供的方法中可以设置一些校验安全措施之类的逻辑,保证系统的稳定性).
• 闭包要解决什么问题:
  1. 由于作用域访问原则,上级作用域无法访问下级作用域的成员(可以通过return获取下级作用域内部数据,存在诸多问题)
  2. 要解决的问题就是允许外部访问并修改函数内部的数据
• 使用闭包的难点:如何花式将内部函数抛到全局作用域去?

由于作用域的限制,在使用闭包之前,函数是封闭的,当我们使用某种方式构造了闭包环境之后,此函数的成员可以在该函数外部访问到.

简单来说,假设函数A在函数B的内部进行了定义,并且当函数A在执行时,访问了函数B内部的变量对象,那么A和B组合构造了闭包环境,此处网上众说纷纭,用人说B是闭包,有人说A是闭包,笔者水平有限,不考虑谁是闭包,最终目的是访问B中的成员,笔者较为信服的说法是,接受B函数返回值A函数的变量才真正是闭包函数.

以后在笔者文章里,闭包只是一种手段,作动词,构造闭包环境,不指代任何函数.

"闭包"的字面意思与其实际的作用恰恰相反,函数本来是封闭的,当其成为闭包反而突破了封闭.

• 闭包原理:
  1. f1内部的函数f2可以访问其外部函数f1的成员
  2. 在f1外部访问f2则可以达到外部访问f1内部成员的目的

    function f1(){
        var num=123;
        var f2=function(a){
            if(a!==undefined){//如果传参 set
                 num=a;
            }else{
                 return num;//如果不传参 get
            }
        }
        return f2;
    }

    var foo=f1();//foo=f2
    foo(10);//f2(10); set
    console.log(foo()); get

这个例子中f1 f2组合构建了闭包环境,foo是真正的闭包函数

• 使用闭包获取并设置多个数据 (利用对象,将多个内部函数封装在对象内抛出)

    function f(){
        var name="zzw";
        var age="18";

        var o = {
            setName:function(a){
                name=a;
            },
            getName:function(){
                return name;
            },
            setAge:function(a){
                age=a;
            },
            getAge:function(){
                return age;
            }
        }
        return o;
    }

        var o = f();//执行函数,创建初始化私有变量,同时将特权方法全都抛出
        var getName=o.getName;
        var getAge=o.getAge;
        var setName=o.setName;
        var setAge=o.setAge;

其实我们可以将以上代码简化
这样创建的函数f的内部变量(name,age)的创建以及初始化还要手动调用该函数f(),我们理想的状态是:创造出一个空间,里面可以直接执行变量创建以及初始化等语句,并且将包含特权方法的对象抛出,而不需要我们手动调用函数.

• 解决办法:创建一个匿名函数并立刻执行该函数(必须加上括号,不然会被理解成函数声明,加上括号则是函数表达式,不会被提升),这样我们就创建了一个块级作用域.

以下这段代码同上面的代码效果相同,使得逻辑更加清晰,弱化了外部函数,着眼于块级作用域.

        var o=(function(){
            var name="zzw";//私有变量
            var age="18";//私有变量
            //这里面就是一个块级作用域,外部如果不通过特权方法对象则无法访问
            var o = {//特权对象
                    setName:function(a){  //特权方法1
                        name=a;
                    },
                    getName:function(){   //特权方法2
                        return name;
                    },
                    setAge:function(a){   //特权方法3
                        age=a;
                    },
                    getAge:function(){    //特权方法4
                        return age;
                    }
                }
                return o;
        })();

        var getName=o.getName;
        var getAge=o.getAge;
        var setName=o.setName;
        var setAge=o.setAge;