零基础入门-javascript学习笔记之传说中的闭包

对于有js使用经验但从未理解闭包概念的人来说，理解闭包可以看作是某种意义上的重生（摘自《你不知道的javascript》）。

 

闭包的定义：当函数可以记住并访问它所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

 

function clouseTest(){

    var a=
0;

    function talk(){

        console.log(a);

    }

    a++;

    return talk;

}

var  talk=
clouseTest();
talk();
>>1
 
按照以往的经验，我们想当然函数clouseTest()执行完之后，其内部的变量a应该也就释放了。但是之后的talk可以正常执行，显然a没有被释放。这就是闭包的神奇之一。再来看一段代码：
function clouseTest(){

    var  i=0;

    function talk(){

        console.log(i);

        i++;

    }

    i++;

    return talk;

}

var  a
= clouseTest();
var b
= clouseTest();
a();
a();
b()
>>1
>>2
>>1
在调用a = clouseTest（）函数的时候，函数返回其内部的一个方法的引用给a，使得a可以在需要的时候被调用，并且内部作用域变量被保存了下来。所以第二次调用a函数，i的值为2.而b中是调用clouseTest（）时产生的作用域，不受a影响。
     
闭包实现缓存
 
由于闭包会使得函数有外部引用的时候，不会释放本身。利用这一特性，我们便可以制造缓存。假设有这样一个场景，我们需要一个函数进行一系列复杂的计算，每次调用都会花费很长的时间，那么我们可以将计算的结果保存起来，下次调用的时候从保存起来的数据中搜索，如果找到便直接返回数据，找不到再进行计算。
 
var search= (function(){

    var ret= {};

    function compute(i){

        if (ret[i]){

            console.log("已经缓存");

            return ret[i];

        }

        //...

        ret[i] =i;

        return i;

    }

    return compute;

})();

console.log(search(1));
console.log(search(1));
>> 1
>>已经缓存
>>1
 
从输出的结果可以看到，第一次调用的时候，把结果缓存起来，第二次再调用的时候便可以直接返回，利用这一点可以在需要的时候省下大量的计算时间
 
匿名自执行函数
上面的函数就是一个匿名自执行函数。在前面有讲过，用括号包裹起来的函数会被当成函数语句，var search =（function （）｛//…此处才可以访问次函数的作用域｝｝）,在这个函数语句里只是相当于定义了search为这个匿名函数的引用。而在这种函数语句之后加上一对括号便可以立即执行改语句。形如：
（function （）｛｝）（）;
此时匿名函数将自己执行。由于在外部没有改匿名函数的内部引用，故在执行完改函数之后，其作用域马上就被删除了。使用这种机制，不会污染全局对象。
 
实现封装
function person() {

    var name="default";

    return {

        getName:function(){

            return name;

        },

        setName:function(newName){

            name =newName;

        }

    }

}
var jack=
person();
jack.setName('jack');
console.log(jack.getName());
 
在函数person 执行的时候，返回了一个对象，该对象内部含有person的name的引用，因而形成了闭包。同前面所说的一样，name不会被释放。所以利用这一特性可以实现封装，模拟出不同对象拥有独立的私有成员和状态。有一点需要注意，返回的对象中并没有name这个属性，改属性是通过词法作用域访问到的，所以在给jack添加方法的时候，this并不能访问到name。
function person() {

    var name="default";

    return {

        getName:function(){

            return name;

        },

        setName:function(newName){

            name =newName;

        }

    }

}
function speak(){

    console.log(this.name);

}
var jack
= person();
jack.setName('jack');
console.log(jack.getName());
jack.speak
= speak;
jack.speak();
 
>> jack
>>undefined