零基础入门-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