Javascript（NodeJS）如何处理与事件有关的范围和上下文[重复]

Question

我有点困惑，
给定示例代码，我在其中加载了几个 url，并连接了事件监听器：

var pages= Array();
var loading= Array();

for(i=0; i < urls.length; i++){
var page =new WebPage(urls[i]);

   page.onLoadStarted = function() {
       loading[i]= true;
       console.log('Loading started');
   };    
   pages[i]=page;

}

我有 5 个 url，我在控制台输出中得到 5 次“加载开始”，但是加载数组只有一个值定义（真），其余的都是“未定义”； 看起来当事件被触发时loading[i]= true; 使用 I 的最后一个值来访问数组而不是使用它的地址。我该如何解决？

我尝试向页面对象添加属性，但同样的事情发生了；

这是我尝试过的：

var pages= Array();

for(i=0; i < urls.length; i++){
var page =new WebPage(urls[i]);

   page.onLoadStarted = function() {
       page.loading= true;
       console.log('Loading started');
   };    
   pages[i]=page;

}

Answer 1

如果onLoadStarted 是一个事件处理程序，那么for 循环的执行速度要比所有事件处理程序快得多。在那个时候 i 是 5 并且在每个函数调用期间，数组的第六个索引填充了一个 true 值。由于数组的较低索引没有任何设定值，因此您会得到这样的输出。

一种选择是使用Array.prototype.forEach 或Array.prototype.map 方法。这两个函数都将一个函数作为处理程序。处理程序是一个函数，创建一个新范围并记住定义的值。

urls.forEach(function(url /* element */, i /* index */) {
   var page = new WebPage(url);

   page.onLoadStarted = function() {
       loading[i]= true;
       console.log('Loading started');
   };    
   pages[i]=page;
}) 

Answer 2

试试这个代码 (es6)

    let pages = Array();
    urls.map((url,i) =>{
     let page = new WebPage(urls[i]);

     page.onLoadStarted(() =>{
      loading[i] = true;
      console.log('Loading started');
     })

(es5)

    var pages = Array();
    urls.map(function(url,i){
     var page = new WebPage(urls[i]);

     page.onLoadStarted(function(){
      loading[i] = true;
      console.log('Loading started');
     })