JavaScript的闭包、立即执行函数造就私有变量和方法------JavaScript学习之路21

JavaScript的闭包、立即执行函数造就私有变量和方法

了解闭包

闭包是函数的内部变量可以常驻内存，且不会被外部的调用使用，这种特性可以很好的在开发中避免非同一个人命名的变量在合并时造成变量名重名，相当于创建了私有的变量或者方法

let a = 0;//全局变量a
function first() {
    a++;
    alert(a);
}

first();//使得a+1;
first();//使得a+1;
alert(a);//可以正常访问a的值

过程

1. 建立函数1，里面包含的是局部变量

   function first() {//函数1
       let a = 0;
   
   }
   

2. 建立函数2，里面调用函数1的局部变量

   function first() {//函数1
       let a = 0;
       function second() {//函数2
           a++;
           alert(a);
       }
   
   }
   

3. 函数1返回值为函数2的函数名【注意】调用函数2的函数名不执行

   function first() {//函数1
       let a = 0;
       function second() {//函数2
           a++;
           alert(a);
       }
       return second;//返回回调函数second
   }
   

4. 在函数1外部调用函数1的返回值，此时a无法访问，但是却可以通过second调用first函数里面的a

   function first() {//函数1
       let a = 0;
       function second() {//函数2
           a++;
           alert(a);
       }
       return second;//返回回调函数second
   }
   
   let third = first();//调用函数first
   third();//调用third其实是调用first函数返回的回调函数second
   third();
   alert(a);//a无法访问，因为是first的内部变量
   

了解立即执行函数

立即执行函数就是在声明函数的同时执行该函数，单独声明doit函数，无需调用doit可以直接运行，在doit声明结束后就立即执行了doit函数，在浏览器弹出hello的提示框。

(function doit() {
    alert("hello");
})();//在doit外面加小括号是为了防止末尾的小括号结合优先级干扰

实现私有变量和方法

在上文的闭包和立即函数之后，可以改变一下闭包的写法，实现在实际开发中简便的写法

 let first = (function () {//first用来接收匿名函数的返回第二个匿名函数
    let a = 0;
    return function () {//第二个匿名函数，返回一个匿名函数，该函数对a++
        a++;
        alert(a);
    };
})();//立即执行函数

 first();//直接调用first相当于直接调用second
 first();

在改变闭包的写法之后，可以做一个实验，使得两个闭包里面的a互不影响

let first = (function () {//实现闭包1
    let a = 0;//first的私有变量a
    return {
        add : function(){
            a = a+1;
            alert(a);
        },
        add2 : function(){
            a = a+2;
            alert(a);
        }
    }

})();

let second = (function () {//实现闭包2
    let a = 0;//second的私有变量a
    return {
        add : function(){
            a = a+1;
            alert(a);
        },
        add2 : function(){
            a = a+2;
            alert(a);
        }
    }

})();

first.add();//first的私有方法
first.add2();
second.add();//second的私有方法
second.add2();