深刻理解JavaScript---闭包

JavaScript

闭包是指那些能够访问独立(自由)变量的函数 (变量在本地使用，但定义在一个封闭的作用域中)。换句话说，这些函数可以“记忆”它被创建时候的环境。——这句话其实有点难以理解。我觉得应该用一些例子来理解闭包的含义。

闭包#1

先来看一个函数:

function f(){

var b = "b";

return function(){

return b;

}

这个函数含有一个局部变量b，它在全局空间里面是不可见的。而f()的返回值是另一个匿名函数，该函数有自己的私有的空间，可以访问f()的空间和全局空间，所以b对它来说是可见的。

1 2	var n = f(); n();//此时控制台输出"b"

因为f()是一个全局函数，它可以在全局空间被调用，当然也可以将其返回值赋值给另一个全局变量n，从而生成一个可以访问f()私有空间的新的全局函数。

闭包#2

再来看看下面这个跟上面差不多的函数,在这里f()不再返回函数了，而是直接在函数体内创建一个新的全局函数

var n;

function f(){

var b = "b";

n = function(){

return b;

}

f();

n();//调用f()，然后再调用n(),控制台输出"b"

由于n()没有使用var语句，因此它是全局的，同时它也可以访问f()的作用域，所以哪怕n()最后升级为全局函数，但它依然可以保留对f()作用域的访问权。

闭包#3

函数通常会让自身的参数视为局部变量，所以我们创建返回函数时，也可以令其返回父级函数的参数，例如：

function f(arg){

var n = function(){

return arg;

};

arg++;

return n;

}

var m = f(123);

m();//调用函数，输出124

有一点很重要：n被赋值时函数并没有被调用，调用发生是在n被求值，也就是执行return n;语句时。由此可以看出，函数所绑定的是作用域本身，而不是该作用域中的变量或变量当前所返回的值。

循环中的闭包#4

这种闭包所导致的bug往往很难被发现，因为它们表面上看起来很正常，来看一下下面的函数

function f(){

var a = [];

var i;

for (i = 0; i < 3; i++){

a[i] = function(){

return i;

}

return a;

}

//下面来运行一下函数，并将结果赋值给数组a

var a = f();

a[0]();//输出3

a[1]();//输出3

a[2]();//输出3

为啥不是0、1、2呢？为啥会这样呢？原来在这里创建的三个闭包，它们都指向了一个共同的局部变量i，但是，闭包不会记录它们的值，它们所拥有的的只是一个i的连接（即引用），因此只能返回i当前值，因为i结束循环时值为3，所以这三个函数都指向一个共同值3

如何纠正？显然，需要a[i]指向三个不同的变量，下面是解决方案之一：

function f(){

var a = [];

var i;

for (i = 0; i < 3; i++){

a[i] = (function(x){

return function(){

return x;

}

})(i);

}

return a;

}

//下面来运行一下函数，并将结果赋值给数组a

var a = f();

a[0]();//输出0

a[1]();//输出1

a[2]();//输出2

这里使用了自调函数，不再直接返回i的值，而是将i传递给自调函数，i赋值给了局部变量x，这样一来，每次迭代x就会拥有各自不同的值了。

解决方案二：

function f(){

function aa(x){

return function(){

return x;

}

var a = [];

var i;

for (i = 0; i < 3; i++){

a[i] = aa(i);

}

return a;

}

方案二不使用自调函数，而是定义了一个内部函数实现相同的功能，每次迭代操作中，将i的值“本地化”。

Getter与Setter、迭代器闭包的应用示例#5

var getValue, setValue;

(function(){

var temp = 0;

getValue = function(){

return temp;

};

setValue = function(v){

temp = v;

}

})();

getValue();//输出0

setValue(123)

getValue();//输出123

这个例子是通过一个匿名自调函数来实现的，定义的全局函数setValue()和getValue()，确保局部变量temp的不可直接访问性。

下面是一个接受数组输入的初始化函数，其中定义了一个私有指针，该指针会指向数组中的下一个元素。

function setup(x){

var i = 0;

return function() {

return x[i++];

};

}

//调用setup()，创建我们所需的next()函数

var next = setup(['a', 'b', 'c']);

//重复调用next()，就可以不停的获取下一个元素

next();//输出"a"

next();//输出"b"

next();//输出"c"

到这里闭包就暂时告一段落了，以后有新的理解再写。