今天打算给自己的网站加个地图,原本打算用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上的两段话来解释一些闭包,我觉得这个解释还可以。
闭包的解释
- 闭包是ECMAScript(javascript)语言强大的特征之一,如果没有真正的理解它的概念,不可能很好使用它。在一般浏览器环境中,它们很容易被建立,但也会造成比较难理解的代码逻辑。为了避免闭包引起的缺点,利用它所提供的优点,明白它的机制是重要的。javascript语言的闭包很大程度上依靠 scope chains(函数,变量的范围链) 和 javascript对象的灵活的属性机制 实现。
- 闭包简单的解释是,ECMAScript允许inner functions(嵌套函数):函数可以定义在另外一个函数里面(关于嵌套函数可以看看)。这些内部的函数可以访问outer function(父函数)的local变量,参数,其它内部函数。当内部函数被构造,并可以在函数外被获得(函数当成返回值),这个内部函数被在 outer function返回后被执行(在outer函数外执行),那一个闭包形成了。(简单的理解,function被当成数据类型传递或动态执行)。 inner function还有权利访问 那些outer function(父函数)的local变量,参数,其它内部函数。那些outer function(父函数)的local变量,参数,其它内部函数在outer function返回前就有值,并返回的inner function需要改变这些值。
二、51ditu上的示例
js 代码
- var map;
- function showPoint(searchResult)
- {
-
- if(searchResult.count>0)
- {
- map.clearOverLays();
- for(i=0;i
- var poi=searchResult.searchPoints[i];
- var point=new LTPoint(poi.point[0],poi.point[1]);
- map.centerAndZoom(point,0);
- var marker=new LTMarker(point);
- map.addOverLay(marker);
- var name=poi.name;
-
-
- //出错的地方
- LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(name)});
- }
- }
- else
- {
- alert('无结果');
-
- }
- }
问题就出在两句:
js 代码
- var name=poi.name;
-
-
-
- LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(name)});
作者以为 this.openInfoWinHtml(name) 中的name是一个拷贝值,但事实上name是在闭包中声明的,在这里它是一个引用,而不是一个拷贝,所以所有标记的名称都显示为最后一个标记的名称。将上面的例子做一下小修改便可解决这个错误,代码如下:
js 代码
- marker.name=poi.name;
-
-
- LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(this.name)});
这样,marker.name得到的就是每个poi.name的拷贝,而不是最后一个标记的名称的引用。
分享到:
相关推荐
其中闭包 对于那些使用传统静态语言C/C 的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAscript语言规范来使读者可以更深入的理解闭包。闭包是...
JavaScript闭包(closure).pdf
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。
Javascript中有几个非常...其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。
Python闭包实例closure.py 简单示例闭包的使用 简单示例闭包的使用
JavaScript闭包 JavaScript闭包 JavaScript闭包 JavaScript闭包
求文法的closure闭包,针对每个产生式,求其closure闭包,并打印输出
闭包是ECMAScript (JavaScript)最强大的特性之一,但用好闭包的前提是必须理解闭包。闭包的创建相对容易,人们甚至会在不经意间创建闭包,但这些无意创建的闭包却存在潜在的危害,尤其是在比较常见的浏览器环境下...
Javascript 闭包完整解释
javaScript闭包技术资料
理解javascript函数式编程中的闭包(closure)_.docx
javascript 闭包实例下载
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,今天在网上...
对于初学者来说,理解Javascript闭包(closure)还是比较困难的,而撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目,让初学者理解起来更加容易一些。
javascript闭包详解 javascript闭包详解 javascript闭包详解
本文结合 ECMA 262 规范详解了闭包的内部工作机制,让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中,真正领会到闭包的实质。
javascript闭包高级教程,闭包内部实现机制的完美展现,值得研究,比较难。
官方的回答:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。 看了上面的定义,如果你不是高手,我坚信你会和我一样愤怒的质问:这tmd...