構造函數不工作的多個實例

Question

當我運行這個程序只有一個Cat（var cat1）的實例時，它完美的工作。 當我運行第二個實例（var cat2），事情停止工作。

function main() { 
    var catPic = document.getElementById('catPic'); 
    var numClicks = 0; 
    var numCats = -1; 
    var scope; 

    var Cat = function Cat(name, url) { 
     numCats++; 
     scope = this; 
     this.name = name; 
     this.url = url; 
     this.numClicks = 0; 
     this.clickId = 'clicks' + numCats; 

     window.onload = function() { 

      //Puts a new Cat on the screen. The name, image, and # of clicks will be shown. 
      appendCat(scope.name, scope.url, scope.clickId, scope.numClicks, numCats); 

     } 
    }; 

    var cat1 = new Cat('Bob', 'https://lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426'); 
    var cat2 = new Cat('Samantha', 'https://lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426'); 
} 

main(); 

問題與appendCat（）有關;功能。

//Puts a new Cat on the screen. The name, image, and # of clicks will be shown. 
    function appendCat(name, url, clickId, numClicks, numCats) { 
     document.body.appendChild(document.createElement('div')); 
     document.getElementsByTagName('div')[numCats].setAttribute('id', 'cat' + numCats); 

     document.body.getElementById().appendChild(document.createElement('h2')); 
     document.getElementsByTagName('h2')[numCats].textContent = name; 

     document.body.appendChild(document.createElement('img')); 
     document.getElementsByTagName('img')[numCats].setAttribute('id', name); 
     document.getElementsByTagName('img')[numCats].setAttribute('src', url); 

     document.body.appendChild(document.createElement('p')); 
     document.getElementsByTagName('p')[numCats].setAttribute('id', clickId); 
     document.getElementsByTagName('p')[numCats].textContent = numClicks; 

     document.body.appendChild(document.createElement('br')); 
     document.body.appendChild(document.createElement('br')); 
    } 

當此功能的這些前兩行運行，document.getElementsByTagName（ 'DIV'）[numCats]計算結果爲未定義。我不知道爲什麼會發生這種情況。 Console.log（）對我也沒什麼幫助。謝謝！

Answer 1

首先您的scope變量需要在構造函數中聲明，以便window.onload指的是正確的實例。否則，window.onload處理程序將引用在時間window.onload觸發器處設置的任何值範圍 - 這將始終是第二個實例。其次，您不需要設置window.onload，而需要使用window.addEventListener("load", function() { ... }")，以便每個實例都擁有自己的偵聽器。 window對象只有一個onload屬性，因此多次設置它不會創建多個偵聽器，而只是覆蓋前一個偵聽器。

作爲一個額外的說明，我會建議取消該事件從構造處理，並把它放在外面是這樣的：

var cats = [ 
    new Cat(...), 
    new Cat(...) 
]; 
window.addEventListener('load', function() { 
    cats.forEach(function (cat) { 
     appendCat(cat.name, cat.url, cat.clickId, cat.numClicks, cats.length); 
    }); 
}); 

這將消除scope和numCats變量，並將所有window.onload funtionality一個處理程序而不是每個實例都有一個處理程序。