理解 Javascript 的闭包

虫虫 发布于 2012/03/07 19:38
阅读 12K+
收藏 242

前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。

注:本文是入门文章,例子素材整理于网络,如果你是高手,欢迎针对文章提出技术性建议和意见。本文讨论的是Javascript,不想做语言对比,如果您对Javascript天生不适,请自行绕道。

什么是闭包

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

  • 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。
  • 闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配
  • 当在一个函数内定义另外一个函数就会产生闭包

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

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

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:闭包中局部变量是引用而非拷贝

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:多个函数绑定同一个闭包,因为他们定义在同一个函数内。

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; }
}
setupSomeGolbals(); // 为三个全局变量赋值
gAlertNumber(); //666
gIncreaseNumber();
gAlertNumber(); // 667
gSetNumber(12);//
gAlertNumber();//12

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

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:外部函数所有局部变量都在闭包内,即使这个变量声明在内部函数定义之后。

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:每次函数调用的时候创建一个新的闭包

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 单件:

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 大神的视频,一定要看啊)

转载自 http://coolshell.cn/articles/6731.html

加载中
1
leetom
leetom

某本Perl的书,解释的非常形象,闭包就是 inside-out object 

对象是拥有一些方法(函数)的数据(属性),

而闭包是拥有一些数据的函数

ddatsh
ddatsh
貌似这个不错
0
surgesoft
surgesoft
那几个例子举的真是好,恍然大悟之感。。
0
breezing
breezing
In order to implement lexical scoping, the internal state of a JavaScript function object must
include not only the code of the function but also a reference to the current scope chain.

This combination of a function object and a scope (a set of variable bindings) in which
the function’s variables are resolved is called a closure in the computer science literature.

We described it as a list of objects, not a stack of bindings.

Each time a JavaScript function is invoked, a new object is created to hold the
local variables for that invocation, and that object is added to the scope chain.
When the function returns, that variable binding object is removed from the scope chain.

If there were no nested functions, there are no more references to the binding object
and it gets garbage collected. If there were nested functions defined,
then each of those functions has a reference to the scope chain, and that scope chain
refers to the variable binding object. If those nested functions objects remained within
their outer function, however, then they themselves will be garbage collected, along
with the variable binding object they referred to. But if the function defines a nested
function and returns it or stores it into a property somewhere, then there will be an
external reference to the nested function. It won’t be garbage collected, and the variable
binding object it refers to won’t be garbage collected either.
大朱
大朱
我才发现自己水平有限!
wartskcaj
wartskcaj
JavaScript: The Definitive Guide
小灰羊
小灰羊
同楼上 看不懂
白黑白
白黑白
压力真心大
ddatsh
ddatsh
表示看不懂
0
随影求是
随影求是
http://javascript-reference.info/javascript-closures-for-dummies.htm
0
贾珣
贾珣
这个很有帮助呢~~
0
fhp0917
fhp0917
jquery的插件就是写在闭包里面的
0
北落
北落
总是啰啰嗦嗦的一大堆还没看明白就先看晕了
luluback
luluback
0
北落
北落

这是我看到的解释最好的闭包

Common Lisp支持闭包,关于Common Lisp闭包的一个最典型例子是这样的:

[1]> (setf *fn* (let ((i 0)) 
            #'(lambda () (setf i (+ i 1)))))
#FUNCTION :LAMBDA NIL (SETF I (+ I 1))>
[2]> (funcall *fn*)
1
[3]> (funcall *fn*)
2
[4]> (funcall *fn*)
3

按照之前我们对变量的理解,let引入的i只是一个局部变量,在离开定义的环境后,该变量生命周期将终结。理论上我们三次调用*fn*所对应的你们函数得到的结果应该是相同的才对。但就是由于在let构造的局部作用域内的那个匿名函数引用了外部的变量i,导致变量i可以脱离其原生作用域的束缚,让其生命周期等同于了其内部的那个匿名函数,这个内部的匿名函数就被称为闭包,而那个被引用的外部变量被成为自由变量 (free variable)。当我们连续调用函数*fn*时,i就像一个全局变量一样,每次值都加一。

引用了自由变量的闭包似乎是终结了自由变量的局部绑定关系,将自由变量从局部作用域环境中取出,并重新放入一个与闭包同生命周期的新作用域。自由变量会常驻内存中,这也是闭包的常用场景之一。闭包的另外一个用途可能就是出于保护自由变量的考虑,让自由变量只有通过闭包函数才能访问到。

谦谦君子
谦谦君子
嗯,解释得比较清楚,虽然lisp代码没有看懂。
北落
北落
@Mr-zhang-血帝 : 你可以认为他是全局变量,不过不是全局变量。他是存在时间是根据函数的存在时间来定的
白黑白
白黑白
可不可以理解为i虽然在函数里 其实可以看成定义在函数外
0
Undeadway
Undeadway

闭包和传统语言的“封装”之间究竟有什么差别?

章鱼哥
说到点子上了,求解释
返回顶部
顶部