日期:2014-05-16  浏览次数:20465 次

我对Javascript闭包的理解

我对Javascript闭包的理解

?

????? 关于闭包是什么,这个问题困扰了我很久。我好像知道是什么,但好想又说不清楚。今天,我查阅了相关的资料,把自己的一些理解记录在此,以备他日有用。

“闭包”这个词,我不知道是谁翻译的,我个人感觉,这个翻译真的是误导了不少中国程序员。

???? 本人呢,也曾经幼稚的以为“闭包”就是“Close package”。对比了《Javascript权威指南》中文和英文版本,我才知道我们所说的闭包,人家洋大哥叫做“Function Scope and Closures”(这个见《Javascript Definitive Guide》第八章8.8节)。《JavaScript: The Good Parts》(《Javascript语言精粹》)第四章 4.10 叫做Closures。

???? 从上面的描述,我想大家已经知道闭包的字面意思,“一个封闭的函数作用域”。此话怎讲?就是说在一个闭包内声明的变量,只有在这个闭包内定义的函数才能访问。 说了这么多,不知道看的人迷糊没,反正我是迷糊了。迷糊了咋办,写个例子理解一下。

我们有一个函数,名字比方说叫做tmd(虽然这个名字不好听,但是我想不出一个更合适的了,凑合用吧)。这个函数是干什么用的呢?你想干什么就干什么。

function tmd(){

??? //在这儿你可以随便写你想些的代码,我无所谓。

}

?

现在有个想法,就是我想知道tmd这个函数被调用了多少次?

这活好干啊,声明个全部变量tmdNum,每次调用tmd的时候+1不就搞定了。

var tmdNum = 0;

function tmd(){

??? //在这儿你可以随便写你想些的代码,我无所谓。

????? tmdNum ++;

????? alert(tmdNum);

}

现在很好,代码运行正常,也能完成我们的需求。

?

话说在一个阳光明媚的下午,本人正在喝着咖啡和MM聊天呢,同事告诉我说tmd这个方法呗调用了3000多次。本人听完脑袋都大了,谁这么脑残也不能在一个页面里一个方法调3000多次啊。经过一段痛苦的查找,在我那个亲爱的搭档的代码里面发现了这么一句:

? tmdNum = 3000;

看来全局变量是不能用了,太不安全了。怎么办,用闭包。

var tmd = function(){//这里我们叫做"匿名函数1"

??? var tmdNum = 0;

??? return function(){//这里我们叫做"匿名函数2”

?????? ?//在这儿你可以随便写你想些的代码,我无所谓。

?????? ? tmdNum ++;

??????? ?alert(tmdNum);

??? }

?

}(); //千万要注意这里的这个小括号。

这段代码什么意思呢?

第一步:先把函数里面的内容都删了,看总体的结构

var tmd = function(){}();

这行代码的意思是 先声明一个变量,变量的名字叫做tmd。

function(){} 这是声明了一个匿名函数

function(){}(); 加个括号的意思是让这个匿名函数立即执行。

所以,tmd的值就是这个匿名函数的返回值。如果这个函数什么也不返回,tmd的值就是undefined。

?

第二步:看匿名函数里面的内容

匿名函数里面有做了两件事情

一是什么了一个变量tmdNum,并赋初值为0;

二是执行一个return,return function(){} 表示返回的是一个函数。这个函数的函数体执行的步骤跟我们文章一开始写的那个tmd函数的执行步骤是一样的。

?

结果:我们折腾了这么一大圈,达到的目的是什么呢。首先,匿名函数1 return了一个函数(匿名函数2)赋给了tmd变量。这样调用tmd(),实际调用的就是匿名函数2。因为tmdNum这个变量只能被匿名函数2调用,所以最终的效果就是tmdNum这个变量只能在tmd()调用的时候改变。

?

从此,互不干涉,天下太平。(以上故事纯属扯淡,扯扯更健康!)

?

这里我摘抄了《Javascript设计模式》里面的一段话,补充下关于闭包的问题:

闭包(closure)是一个受到保护的变量空间,由内嵌函数生成。

Javascript具有函数级别的作用域。这意味着定义在函数内的变量不能在函数外部被访问。

Javascript的作用域又是词法性质的(lexically scoped)。这意味着函数运行在定义它的作用域中,而不是调用它的作用域中。把这两个因素结合起来,就能通过把变量包裹在匿名函数中而对其加以保护。

这里要注意的一点是:

Javascript的作用域是函数范围的,在Java等语言中

public void fun(){

???? int i = 3;

???? if(i > 0){

?????????? int b? = 0;

???? }else{

?????????? int b? = 1;

???? }

???? //System.out.println(b);

???? //Java语言里面,在这里b是不能访问的。因为b的作用域在大括号内。

}

Javascript中,情况不一样:

function?fun(){

?????var i = 3;

???? if(i > 0){

???????????var b? = 0;

???? }else{

???????????var