透过【百度地图API】分析双闭包问题

最新推荐文章于 2020-09-14 16:54:55 发布

weixin_30879169

最新推荐文章于 2020-09-14 16:54:55 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lonelyxmas/p/4208412.html

本文通过百度地图API探讨了JavaScript中双闭包问题的由来与解决方案。对比了两种不同方法实现的差异，并解释了为何使用循环时会遇到问题。最终给出了通过创建双闭包或使用自定义函数解决该问题的有效方案。

摘要：

　　有位API爱好者问到，昨天的教程里为什么不使用for循环？他使用for循环后，也发现代码无效。这是什么原因？

-------------------------------------------------------------------------------------------------------

我们先来看看他的问题：

寒山 2011-9-8 23:37:36

方法一

for(var i=0; i<marker.length; i++){
marker[i].addEventListener("mouseover", function(){
this.openInfoWindow(infoWindow[i]);    });
}

方法二

marker[2].addEventListener("mouseover", function(){
this.openInfoWindow(infoWindow[2]);});

marker[1].addEventListener("mouseover", function(){
this.openInfoWindow(infoWindow[1]);});

用户提问：
这两种方式有什么区别吗？为什么前面用循环的不可以，后面的就可以..

-------------------------------------------------------------------------------------------------------

解答：

首先，我们要知道，this.openInfoWindow(infoWindow[i])中的i最后的值是marker.length-1

数组的下标是从0开始的，0,1,2……(N-1)

以闭包方式解决的原因如下：

i是外层的变量，是callback上层作用域的，callback执行的时候，for已经循环完了。创建一个闭包，相当于在内存中创建一个地方，专门存储起来。

所以，可以用双闭包的方式解决：

for(var i=0;i<marker.length;++i){
(function(x){

    marker[x].addEventListner("mouseover",function(){
    this.openInfoWindow(infoWindow[x]);

    });
})(i);
}

双闭包的代码会创建marker.length*2个匿名函数。下面这段代码只有一个_openInfoWindow。

所以，我们换一种方式：

function _openInfoWindow(){
  this.openInfoWindow(this._infoWindow);}

for(var i=0;i<markers.length;++i){
  marker[i]._infoWindow = infoWindow[i];
  marker[i].addEventListner("mouseover",_openInfoWindow);
}

-------------------------------------------------

结论：

能尽量用别的方式，就不要用闭包解决问题。否则会影响到性能。

posted on 2015-01-07 14:39 NET未来之路阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/4208412.html