Javascript闭包(closure)中一个很容易犯错的地方

今天打算给自己的网站加个地图，原本打算用Goolge Map,但是发现中国大陆的信息太少，碰巧前端时间在网上看到了北京灵图软件技术有限公司也推出了地图服务--51ditu.com。大陆的数据很齐全，虽然部分地区的数据比较久。不过深圳的还算比较新。至少我现在住的星海名城附近的地图还蛮详细准确的。

于是乎，试用了一下搜索接口，copy了文档上的一个例子调试，搜索深圳 星海名城。结果：在地图上出现了很多标准，但是标注的名称都是沁心饼屋。一开始还以为是搜索的结果不对，但是调试了一下发现，是示例代码犯了一个很隐晦的错误。下面会提到这个错误。现在先介绍一下什么是闭包。

一、什么是闭包

Closure (闭包)
A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).

先引用网上的一篇BLOG上的两段话来解释一些闭包，我觉得这个解释还可以。

闭包的解释

1. 闭包是ECMAScript(javascript)语言强大的特征之一，如果没有真正的理解它的概念，不可能很好使用它。在一般浏览器环境中，它们很容易被建立，但也会造成比较难理解的代码逻辑。为了避免闭包引起的缺点，利用它所提供的优点，明白它的机制是重要的。javascript语言的闭包很大程度上依靠 scope chains(函数，变量的范围链) 和 javascript对象的灵活的属性机制 实现。    
2. 闭包简单的解释是，ECMAScript允许inner functions(嵌套函数)：函数可以定义在另外一个函数里面（关于嵌套函数可以看看）。这些内部的函数可以访问outer function（父函数）的local变量，参数，其它内部函数。当内部函数被构造，并可以在函数外被获得（函数当成返回值），这个内部函数被在 outer function返回后被执行（在outer函数外执行），那一个闭包形成了。（简单的理解，function被当成数据类型传递或动态执行）。 inner function还有权利访问 那些outer function（父函数）的local变量，参数，其它内部函数。那些outer function（父函数）的local变量，参数，其它内部函数在outer function返回前就有值，并返回的inner function需要改变这些值。   

二、51ditu上的示例

js 代码

1. var map;   
2. function showPoint(searchResult)   
3. {   
4.   
5.     if(searchResult.count>0)//如果存在搜索结果   
6.     {   
7.         map.clearOverLays();   
8.         for(i=0;i
9.             var poi=searchResult.searchPoints[i];//取出第一个搜索结果点   
10.             var point=new LTPoint(poi.point[0],poi.point[1]);//得到该点的坐标的LTPoint   
11.             map.centerAndZoom(point,0);   
12.             var marker=new LTMarker(point);//向地图上添加一个标记   
13.             map.addOverLay(marker);   
14.             var name=poi.name;   
15.   
16.             //标记点击的时候弹出信息  
17.             //出错的地方
18.             LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(name)});   
19.         }   
20.     }   
21.     else  
22.     {   
23.     alert('无结果');   
24.   
25.     }   
26. }  

问题就出在两句：

js 代码

1. var name=poi.name;      
2.   
3. //标记点击的时候弹出信息     
4. //出错的地方   
5. LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(name)});   

作者以为 this.openInfoWinHtml(name) 中的name是一个拷贝值，但事实上name是在闭包中声明的，在这里它是一个引用，而不是一个拷贝，所以所有标记的名称都显示为最后一个标记的名称。将上面的例子做一下小修改便可解决这个错误，代码如下：

js 代码

1. marker.name=poi.name;   
2.   
3. //标记点击的时候弹出信息   
4. LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(this.name)});  

这样，marker.name得到的就是每个poi.name的拷贝，而不是最后一个标记的名称的引用。