转:javascript闭包详解

2013-03-08 22:18 youxin 阅读(295) 评论(0) 编辑收藏举报

转：

　越来越觉得国内没有教书育人的氛围，为了弄懂JS的闭包，我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释，当我看到stackoverflow上这一篇解答，我脑中就出现了一句话：就是这货没跑了！

　　不才译文见下，见笑了。

　越来越觉得国内没有教书育人的氛围，为了弄懂JS的闭包，我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释，当我看到stackoverflow上这一篇解答，我脑中就出现了一句话：就是这货没跑了！
　　不才译文见下，见笑了。
　　Peter Mortensen问：
就像老Albert所说的，“如果你不能向一个六岁的孩子解释清楚，那么其实你自己根本就没弄懂。”好吧，我试着向一个27岁的朋友就是JS闭包（JavaScript closure）却彻底失败了。
你们会怎么把它解释给一个充满好奇心的六岁孩子听呢？

Whenever you see the function keyword within another function, the inner function has access to variables in the outer function.

function foo(x){var tmp =3;function bar(y){
    alert(x + y +(++tmp));}
  bar(10);}
foo(2)

This will always alert 16, because bar can access the x which was defined as an argument to foo, and it can also access tmp from foo.

That is not a closure. A closure is when you return the inner function. The inner function will close-over the variables of foo before leaving.。内部function会close-over外部function的变量直到内部function结束。

function foo(x){
 
var tmp =3;

return  function(y){
    alert(x + y +(++tmp));
  }

}

var bar = foo(2);// bar is now a closure.
bar(10);

The above function will also alert 16, because bar can still refer to x and tmp, even though it is no longer directly inside the scope.

However, since tmp is still hanging around inside bar's closure, it is also being incremented. It will be incremented each time you call bar. As a result of this it will alert 17 the second time bar(10) is called, 18 the third time, etc.

(Not for your 6 year old: It is possible to create more than one closure function, either by returning a list of them or by setting them to global variables. All of these will refer to the same x and the same tmp, they don't make their own copies.)

Edit: And now to explain the part that isn't obvious.

Here the number x is a literal number. As with other literals in JavaScript, when foo is called, the numberx is copied into foo as its argument x.

On the other hand, JavaScript always uses references when dealing with Objects. If say, you called foo with an Object, the closure it returns will reference that original Object!

考虑到六岁这个限制：我们其实可以建立不止一个闭包方法，比如return它们的数组，也可以把它们设置为全局变量。它们全都指向相同的x和相同的tmp，而不是各自有一份副本。）

　　注：现在来整点儿七岁的内容。

　　上面的x是一个字面值（值传递），和JS里其他的字面值一样，当调用foo时，实参x的值被复制了一份，复制的那一份作为了foo的参数x。

　　那么问题来了，JS里处理object时是用到引用传递的，那么，你调用foo时传递一个object，foo函数return的闭包也会引用最初那个object！

function foo(x)

{var tmp =3;

return  function(y){
     alert(x + y + tmp);
     x.memb = x.memb ? x.memb +1:1;
    alert(x.memb);

 }

}

var age =new Number(2);

var bar = foo(age);// bar is now a closure referencing age.
bar(10);

As expected, each call to bar(10) will increment x.memb. What might not be expected, is that x is simply referring to the same object as the age variable! After a couple of calls to bar, age.memb will be 2!

This is the basis for memory leaks with HTML objects, but that's a little beyond the scope of this, ahem, article, ahem. How do JavaScript closures work?

　上面的脚本最终也会alert 16，因为虽然bar不直接处于foo的内部作用域，但bar还是能访问x和tmp。

　　但是，由于tmp仍存在于bar闭包的内部，所以它还是会自加1，而且你每次调用bar时它都会自加1.

　　（考虑到六岁这个限制：我们其实可以建立不止一个闭包方法，比如return它们的数组，也可以把它们设置为全局变量。它们全都指向相同的x和相同的tmp，而不是各自有一份副本。）

　　注：现在来整点儿七岁的内容。

　　上面的x是一个字面值（值传递），和JS里其他的字面值一样，当调用foo时，实参x的值被复制了一份，复制的那一份作为了foo的参数x。

　　那么问题来了，JS里处理object时是用到引用传递的，那么，你调用foo时传递一个object，foo函数return的闭包也会引用最初那个object！

不出我们意料，每次运行bar(10)，x.memb都会自加1。但需要注意的是x每次都指向同一个object变量——age，运行两次bar(10)后，age.memb会变成2.

　　这和HTML对象的内存泄漏有关，呃，不过貌似超出了答题的范围。

　　JohnMerlino 对Ali说：

　　这里有一个不用return关键字的闭包例子：

function closureExample(objID, text, timedelay) {
    setTimeout(function() {
        document.getElementById(objID).innerHTML = text;
    }, timedelay);
}
closureExample(‘myDiv’, ‘Closure is created’, 500);

　　深夜1:37 John Pick这样回答：

　　JS里的function能访问它们的：

　　1. 参数

　　2. 局部变量或函数

　　3. 外部变量（环境变量？），包括

3.1 全局变量，包括DOM。

3.2 外部函数的变量或函数。

　　如果一个函数访问了它的外部变量，那么它就是一个闭包。

　　注意，外部函数不是必需的。通过访问外部变量，一个闭包可以维持（keep alive）这些变量。在内部函数和外部函数的例子中，外部函数可以创建局部变量，并且最终退出；但是，如果任何一个或多个内部函数在它退出后却没有退出，那么内部函数就维持了外部函数的局部数据。

　　一个典型的例子就是全局变量的使用。

　　mykhal这样回答：

　　Wikipedia对闭包的定义是这样的：

In computer science, a closure is a function together with a referencing environment for the nonlocal names (free variables) of that function.

　　从技术上来讲，在JS中，每个function都是闭包，因为它总是能访问在它外部定义的数据。

　　Since scope-defining construction in Javascript is a function, not a code block like in many other languages, what we usually mean by closure in Javascript is afuction working with nonlocal variables defined in already executed surrounding function.

　　闭包经常用于创建含有隐藏数据的函数（但并不总是这样）。

　　看了这么多外国大牛的解答，不知道你懂还是不懂，反正我是懂了。

　　P.S. 发布文章之后看到@xiaotie的一篇文章，觉得有必要推荐一下，因为其剖析得更为深入。有人说应该在文章结尾对闭包进行总结，可惜小弟才疏学浅，不能给出一个精辟的总结。

　　@xiaotie对闭包的总结如下：

（1）闭包是一种设计原则，它通过分析上下文，来简化用户的调用，让用户在不知晓的情况下，达到他的目的；

（2）网上主流的对闭包剖析的文章实际上是和闭包原则反向而驰的，如果需要知道闭包细节才能用好的话，这个闭包是设计失败的；

（3）尽量少学习。

另一篇：

什么是闭包

闭包是什么?闭包是Closure，这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西，简而言之，闭包就是：

闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。

闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配

当在一个函数内定义另外一个函数就会产生闭包

上面的第二定义是第一个补充说明，抽取第一个定义的主谓宾——闭包是函数的‘局部变量’集合。只是这个局部变量是可以在函数返回后被访问。（这个不是官方定义，但是这个定义应该更有利于你理解闭包）

做为局部变量都可以被函数内的代码访问，这个和静态语言是没有差别。闭包的差别在于局部变变量可以在函数执行结束后仍然被函数外的代码访问。这意味着函数必须返回一个指向闭包的“引用”，或将这个”引用”赋值给某个外部变量，才能保证闭包中局部变量被外部代码访问。当然包含这个引用的实体应该是一个对象，因为在Javascript中除了基本类型剩下的就都是对象了。可惜的是，ECMAScript并没有提供相关的成员和方法来访问闭包中的局部变量。但是在ECMAScript中，函数对象中定义的内部函数(inner function)是可以直接访问外部函数的局部变量，通过这种机制，我们就可以以如下的方式完成对闭包的访问了。

1

2

3

4

5

6

7

function greeting(name) {

    var text = 'Hello ' + name; // local variable

    // 每次调用时，产生闭包，并返回内部函数对象给调用者

    return function() { alert(text); }

}

var sayHello=greeting("Closure");

sayHello() // 通过闭包访问到了局部变量text

上述代码的执行结果是：Hello Closure，因为sayHello()函数在greeting函数执行完毕后，仍然可以访问到了定义在其之内的局部变量text。

好了，这个就是传说中闭包的效果，闭包在Javascript中有多种应用场景和模式，比如Singleton，Power Constructor等这些Javascript模式都离不开对闭包的使用。

ECMAScript闭包模型

ECMAScript到底是如何实现闭包的呢？想深入了解的亲们可以获取ECMAScript 规范进行研究，我这里也只做一个简单的讲解，内容也是来自于网络。

在ECMAscript的脚本的函数运行时，每个函数关联都有一个执行上下文场景(Execution Context) ，这个执行上下文场景中包含三个部分

文法环境（The LexicalEnvironment）

变量环境（The VariableEnvironment）

this绑定

其中第三点this绑定与闭包无关，不在本文中讨论。文法环境中用于解析函数执行过程使用到的变量标识符。我们可以将文法环境想象成一个对象，该对象包含了两个重要组件，环境记录(Enviroment Recode)，和外部引用(指针)。环境记录包含包含了函数内部声明的局部变量和参数变量，外部引用指向了外部函数对象的上下文执行场景。全局的上下文场景中此引用值为NULL。这样的数据结构就构成了一个单向的链表，每个引用都指向外层的上下文场景。

例如上面我们例子的闭包模型应该是这样，sayHello函数在最下层，上层是函数greeting，最外层是全局场景。如下图：

因此当sayHello被调用的时候，sayHello会通过上下文场景找到局部变量text的值，因此在屏幕的对话框中显示出”Hello Closure”
变量环境(The VariableEnvironment)和文法环境的作用基本相似，具体的区别请参看ECMAScript的规范文档。

闭包的样列

前面的我大致了解了Javascript闭包是什么，闭包在Javascript是怎么实现的。下面我们通过针对一些例子来帮助大家更加深入的理解闭包，下面共有5个样例，例子来自于JavaScript Closures For Dummies(镜像 )。
例子1:闭包中局部变量是引用而非拷贝

1

2

3

4

5

6

7

8

9

10

function say667() {

    // Local variable that ends up within closure

    var num = 666;

    var sayAlert = function() { alert(num); }

    num++;

    return sayAlert;

}

var sayAlert = say667();

sayAlert()

因此执行结果应该弹出的667而非666。

例子2：多个函数绑定同一个闭包，因为他们定义在同一个函数内。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function setupSomeGlobals() {

    // Local variable that ends up within closure

    var num = 666;

    // Store some references to functions as global variables

    gAlertNumber = function() { alert(num); }

    gIncreaseNumber = function() { num++; }

    gSetNumber = function(x) { num = x; }

}

setupSomeGlobals(); // 为三个全局变量赋值

gAlertNumber(); //666

gIncreaseNumber();

gAlertNumber(); // 667

gSetNumber(12);//

gAlertNumber();//12

例子3：当在一个循环中赋值函数时，这些函数将绑定同样的闭包

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function buildList(list) {

    var result = [];

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

        var item = 'item' + list[i];

        result.push( function() {alert(item + ' ' + list[i])} );

    }

    return result;

}

function testList() {

    var fnlist = buildList([1,2,3]);

    // using j only to help prevent confusion - could use i

    for (var j = 0; j < fnlist.length; j++) {

        fnlist[j]();

    }

}

testList的执行结果是弹出item3 undefined窗口三次，因为这三个函数绑定了同一个闭包，而且item的值为最后计算的结果，但是当i跳出循环时i值为4，所以list[4]的结果为undefined.

例子4：外部函数所有局部变量都在闭包内，即使这个变量声明在内部函数定义之后。

1

2

3

4

5

6

7

8

function sayAlice() {

    var sayAlert = function() { alert(alice); }

    // Local variable that ends up within closure

    var alice = 'Hello Alice';

    return sayAlert;

}

var helloAlice=sayAlice();

helloAlice();

执行结果是弹出”Hello Alice”的窗口。即使局部变量声明在函数sayAlert之后，局部变量仍然可以被访问到。

例子5：每次函数调用的时候创建一个新的闭包

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

function newClosure(someNum, someRef) {

    // Local variables that end up within closure

    var num = someNum;

    var anArray = [1,2,3];

    var ref = someRef;

    return function(x) {

        num += x;

        anArray.push(num);

        alert('num: ' + num +

        '\nanArray ' + anArray.toString() +

        '\nref.someVar ' + ref.someVar);

    }

}

closure1=newClosure(40,{someVar:'closure 1'});

closure2=newClosure(1000,{someVar:'closure 2'});

closure1(5); // num:45 anArray[1,2,3,45] ref:'someVar closure1'

closure2(-10);// num:990 anArray[1,2,3,990] ref:'someVar closure2'

闭包的应用

Singleton 单件：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

var singleton = function () {

    var privateVariable;

    function privateFunction(x) {

        ...privateVariable...

    }

    return {

        firstMethod: function (a, b) {

            ...privateVariable...

        },

        secondMethod: function (c) {

            ...privateFunction()...

        }

    };

}();

这个单件通过闭包来实现。通过闭包完成了私有的成员和方法的封装。匿名主函数返回一个对象。对象包含了两个方法，方法1可以方法私有变量，方法2访问内部私有函数。需要注意的地方是匿名主函数结束的地方的’()’，如果没有这个’()’就不能产生单件。因为匿名函数只能返回了唯一的对象，而且不能被其他地方调用。这个就是利用闭包产生单件的方法。

参考：

JavaScript Closures For Dummies(镜像 ) 可惜都被墙了。
Advance Javascript （Douglas Crockford 大神的视频，一定要看啊）

会员力量，点亮园子希望

刷新页面返回顶部

有心故我在

转:javascript闭包详解

什么是闭包

ECMAScript闭包模型

闭包的样列

闭包的应用

参考：

About