高手来看看这个是不是作用域的有关问题 _JavaScript

高手来看看这个是不是作用域的问题啊

HTML code


第一种情况：最后arr是我想要的结果，包含所有obj[key];

function foo(obj){
    var arr = [];
    for(key in obj){
    var img = new Image();
    img.src = obj[key];            
    arr.push(img);
    }
        
    console.log(arr);
}

第二种情况，为什么最后arr是空的？怎样才可以达到和第一种情况一样的效果？

function foo(obj){
    var arr = [];
    for(key in obj){
       var img = new Image();
       img.src = obj[key];            
       addEvent(img, 'load', function(){//图片加载完后才添加进去
              arr.push(this);
       })
    }
        
    console.log(arr);
}

------解决方案--------------------
时间顺序的问题，第一种是arr.push(img)执行以后才执行console.log(arr)
第二种是绑定事件（没有执行）以后执行console.log(arr)
因此第二种里面arr是空的。

要达到第一种方法的效果，把console.log(arr)加到事件的函数里面，然后加上判断就行

JScript code

function foo(obj){
  var arr = [];
  for(key in obj){
    var img = new Image();
    img.src = obj[key];   
    addEvent(img, 'load', function(){//图片加载完后才添加进去
      arr.push(this);
      if(arr.length==obj.length){
        console.log(arr);
      }
    })
  }
}

------解决方案--------------------
探讨
第二种情况，addEvent里面的闭包不是可以维持其父作用域的某些局部变量的么？怎么就不行了？