《JavaScript设计模式与开发》笔记 4.闭包

1.变量的作用域
2.变量的生存周期
3.闭包更多作用
- 1.封装变量
- 2.延续局部变量寿命
4.闭包和面向对象设计
5.闭包和内存管理

1.变量的作用域

var func = function(){

    var a = 1;

}

func();

console.log(a); //输出undefined

var a = 1;

fun1 = function(){

    var b = 2;

    fun2 = function(){

        var c = 3;

        console.log(b);   //输出 2

        console.log(a);   //输出 1

    }

    fun2();

    console.log(c);   //输出undefined

}

fun1();

2.变量的生存周期

var func = function(){

    var a = 1;

    return function(){

        a++;

        console.log(a);

    }

}

var f = func();

f();    // 输出1

f();    // 输出2

f();    // 输出3

f();    // 输出4

当退出函数后，局部变量a并没有消失，而是似乎一致在某个地方存活着。这是因为当执行var f = func();时,f返回了一个匿名函数的引用，它可以访问到func()被调用时产生的环境，而局部变量a一致处于这个环境里。既然局部变量所在的环境还能被外界，这个局部变量就有了不被销毁的理由。这里产生了一个闭包结构，局部变量的声明看起来被延续了。

既然f返回了一个匿名的函数引用，那么下面的也符合闭包

var func = (function(){

    var a = 1;

    return function(){

        a++;

        console.log(a);

    }

})();

f();    // 输出1

f();    // 输出2

f();    // 输出3

f();    // 输出4

再次变种为引用对象的方式

var func = {

    a :0,

    call:function(){

        this.a++;

        console.log(this.a);

    }

}

func.call();   //输出1

func.call();   //输出2

func.call();   //输出3

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<script>

    var nodes = document.getElementsByTagName('div');

    for(var i =0;i<nodes.length;i++){

        nodes[i].onclick=function(){

            alert(i);

        }

    }

</script>

</body>

</html>

测试这段代码就会发现，无论点击哪个div，最后弹出的结构都是5,。这是因为div节点onclick事件是被异步出发的，当事件出发的时候，for循环早已结束，此时变量i的值已经是5，所以在div的onclick事件函数中顺着作用域链从内到外查找变量i时，查找到的值总是5。

解决方法是在闭包作用的帮助下，把每次循环的i值都封装起来。(就是把每个点击事件都独立放在内存里面。)

var nodes = document.getElementsByTagName('div');

    for(var i =0;i<nodes.length;i++){

        (function(i){

            nodes[i].onclick=function(){

                alert(i);

            }

        })(i);

    }

3.闭包更多作用

1.封装变量

闭包可以帮组我们封装私有变量”

var mult = function(){

    var a = 1;

    for(var i =0;i <arguments.length;i++){

        a = a*arguments[i];

    }

    return a;

}

console.log(mult(1,2,5));

mult函数接受一些number类型的函数，并返回这些参数的乘积。现在我们觉得对于这些那些参数来说，每次都进行计算是一种浪费，我们可以加入缓存机制来提高这个函数的性能。

var cache={};

var mult = function(){

    var args = Array.prototype.join.call(arguments,',');  //将参数对象变成一个字符串 args 1,2,3

    if(cache[args]){

        console.log('执行缓存');

        return cache[args];

    }

    var a = 1;

    for(var i=0;i<arguments.length;i++){

        a = a*arguments[i];

    }

    return cache[args] = a;

}

console.log(mult(1,2,3));   //进行计算

console.log(mult(1,2,3));   //执行缓存，不用计算

继续封装减少页面全局变量

var mult = (function(){

    var cache={};       //私有变量

    return function(){

        var args = Array.prototype.join.call(arguments,',');

        if(cache[args]){

            return cache[args];

        }

        var a = 1;

        for(var i=0;i<arguments.length;i++){

            a = a*arguments[i];

        }

        return cache[args] = a;

    }

})()

console.log(mult(1,2,3));   //进行计算

console.log(mult(1,2,3));   //执行缓存，不用计算

提炼代码，独立模块

var mult = (function(){

    var cache={};       //私有变量

    var cala = function(){

        var a = 1;

        for(var i=0;i<arguments.length;i++){

            a = a*arguments[i];

        }

        return a;

    }

    return function(){

        var args = Array.prototype.join.call(arguments,',');

        if(cache[args]){

            return cache[args];

        }

        return cache[args] = cala.apply(null,arguments);

    }

})();

console.log(mult(1,2,3));   //进行计算

console.log(mult(1,2,3));   //执行缓存，不用计算

2.延续局部变量的寿命

var report = function(src){

    var img = new Image();

    img.src = src;

}

利用闭包来延续img的使用

var report = (function(){

    var imgs = [];   //img就留在了内存里面

    return function(src){

        var img = new Image();

        imgs.push(img);

        img.src = src;

    }

})();

4.闭包和面向对象

闭包:

var extent = function(){

    var value =0;

    return {

        call:function(){

            value++;

            console.log(value);

        }

    }

}

var extent = extent();

extent.call();   //输出1

extent.call();   //输出2

extent.call();   //输出3

如果换成面向对象的写法就是

var extent = {

    value :0,

    call:function(){

        this.value++;

        console.log(this.value);

    }

}

extent.call();   //输出1

extent.call();   //输出2

extent.call();   //输出3

5.闭包和内存管理

闭包是一个非常强大的特性，但人民对其他诸多误解，一种耸人听闻的说法就是闭包会造成内存泄漏。如果在将来需要回收这些变量，我们可以手动吧这些变量设置为null。