js闭包和闭包的作用

闭包和闭包的作用

1.闭包

**闭包(closure)**指有权访问另一个函数作用域中变量的函数,一个作用域可以访问另一个函数内部的局部变量;

闭包缺点: 当内部函数被保存到外部时就会生成闭包,闭包会导致原有作用域链不释放,造成内存泄漏;

小案例

function a(){
    function b(){
        var bbb = 234;
        console.log(aaa); ///123
    }
    var aaa = 123;
    return b;
}
var glob = 100;
var demo = a();
demo();

解析:由于没有b();此时b还是被定义的状态,和a执行的状态一样,function a(){ } 是在return b之后才执行完,才销毁,return b让a执行时的AO被保存到外边了;return b 是把b(包括a的AO) 保存到了外边(全局),当a执行完砍掉自己的AO时,b依然可以访问到a的AO(由于return b)

1.1闭包的作用

1.实现公有变量

//函数累加器
function add(){
    varcount = 0;
    function demo(){
        count++;
        console.log(count);
    }
    return demo;
}
var counter = add();
//每次调用一次就会在原有基础上加一;
counter();
counter();
counter();
counter();
counter();

2.可以做缓存(存储结构)

		// 2.可以做缓存
        function test(){
            var num = 100;
            function a(){
                num++;
                console.log(num);
            }
            function b(){
                num--;
                console.log(num);
            }
            //把两个函数返回出去
            return [a,b];
        }
        var myArr = test();
        myArr[0]();  //101
        myArr[1]();  //100		

解析: a和b函数用的是同一个AO

test doing test [[scope]] 0 : testAO

​ 1 : GO

a 被定义时 a.[[scope]] 0 : testAO

​ 1 : GO

b 被定义时 b.[[scope]] 0 : testAO

​ 1 : GO

return [a,b] 将a和b同时被定义的状态被保存出来了;

当执行myArray[0]() 时

a doing a.[[scope]] 0 : aAO

​ 1 : testAO

​ 2 : GO

当执行myArray[1]() 时

b doing b.[[scope]] 0 : aAO

​ 1 : a运行之后的 testAO

​ 2 : GO

a运行之后的testAO,与a doing里面的testAO相同,a和b连线的都是test环境,对应的一个闭包

function a和function b 是并列的,由于先执行function a 所以num++,在执行num–;

缓存的应用

function eater() {
    var food = '';
    var obj = {
        eat : function(){
            console.log('我正在吃'+food);
            food = "";
        },
        push : function (myFood){
            food = myFood;
        }
    }
    return obj;
}
var eater1 = eater();
eater1.push('apple');
eater1.eat();//我正在吃apple

eat和push操作的是同一个food,在function eater(){里面的food}就相当于一个隐式存储的机构,obj对象里面是可以有function方法的,也可以有属性,方法就是函数的表现形式

3.模块化开发,防止污染全局变量 (立即执行函数)

**概念:**此类函数没有声明,再一次执行后即释放(被销毁,适合做初始化工作);

针对初始化功能的函数:只想让它执行一次的函数;

立即执行函数也有参数,也有返回值,有预编译;

立即执行函数的两种写法

1. (function (){ }());
2. (function(){})();

只有表法式才能被执行的符号执行,能被执行符号执行的表达式,这个函数的名字会被自动忽略,能被执行符号执行的表达式基本就是立即执行函数;

//打印0,1,2,3,4,5,6,7,8,9
function test(){
    var arr = [];
    for(var i = 0;i<10;i++){
        (function(j){
            arr[j]=function(){
                console.log(j+",");
            }
        })(i)
    }
    return arr;
}
var myArr = test();
for (var j = 0 ; j < 10 ; j++){
    myArr[j]();
}

4.实现封装,属性私有化

var inherit = (function(){
    var F = function(){};
    return function(target,origin){
        F.prototype = origin.prototype;
        target.prototype = new F();
        target.prototype.constructor = target;
        target.prototype.uber = origin.prototype;
    }
}());