js闭包的应用

标签：

先看错误的代码：

for(var i = 0, len = path.length; i < len; i ++){
        // makePath(path[i]);
        var locs = null;
        locs = decodePath(path[i]);
        latlngs = latlngs.concat(locs);
        var dp = new google.maps.Polyline({
            map: map,
            strokeWeight: 5,
            strokeOpacity: 1.0,
            strokeColor: ‘#734286‘,
            path: locs
        });
        
        google.maps.event.addDomListener(dp, ‘mouseover‘, function(){
            dp.setOptions({ strokeWeight: 7, strokeOpacity: .8}); 
        });
        google.maps.event.addDomListener(dp, ‘mouseout‘, function(){
            dp.setOptions({ strokeWeight: 5, strokeOpacity: 1.0});
        });
        google.maps.event.addDomListener(dp, ‘click‘, function(e){ 
        });
        
        displayPath.push(dp);
    }

最常见的，就是在循环里面new 一个变量，然后引用，完了之后发现，不管在什么地方触发事件，得到的变量永远都是一样的。

 在来一段错误代码：

for(var i = 0; i < src.length; i ++){
var image = new Image();
image.src = src[i];
image.onload = function(){
console.log(image.src)
}
}

写出这个代码的原因，就是因为认为变量在定义的时候，是什么样子，执行的时候就是什么样子，没有去推导程序的执行过程，正确的做法是检查程序执行的时候变量是什么样子的。

这个问题的解决办法有2个，第一是将循环内部的代码写成一个函数来调用，这样内部的变量是封闭的，第二个是使用闭包，将变量包裹起来。

函数式：

for(var i = 0; i < src.length; i ++){
var image = new Image();
image.src = src[i];
loadimg(image);
}
function loadimg(image){
image.onload=function(){
console.log(image.src);
}
}

闭包式：

for(var i = 0; i < src.length; i ++){
var image = new Image();
image.src = src[i];
(function(image){
console.log(image.src);
})(image);
}

js闭包的应用

标签：

原文地址：http://my.oschina.net/qii/blog/482173