Tableau d'objets dans JS

Question

Je suis un newbi JS essayant de créer un tableau d'objets. J'ai créé l'objet suivant:

gameCard = new Object({ 
    image : "", 
    container:"", 
    match2Card:"", 
    visible: false, 
    cardId:"", 

    updateCard: function (imageName,divName,matchingCard,isVisible,cardId) { 
     this.image = imageName; 
     this.container = divName; 
     this.match2Card = matchingCard; 
     this.visible = isVisible; 
     this.cardId = cardId; 
    }, 
    toggleCard: function(){ 
     if (this.visble) { 
      this.visble = false; 
     } 
     else { 
      this.visble = true; 
     } 
    }, 
    printCard : function() { 
     document.write (this.image + ' ' + this.container + ' ' + this.match2Card + ' ' + this.visible + ' ' + this.cardId + '<br>') ; 
     //alert (this.match2card); 
    } 
}) 

et exécutez la commande suivante:

gameCards = new Array(); 

for (i=0; i<20 ; i=i+1) { 
    z=i+1; 

    c1 = Math.floor((Math.random()*20)+1); 

    gameCard.updateCard ('images/bf'+i+'.jpg' , 'div' + c1 , z , false,i) ; 

    gameCards.push(gameCard); 
} 

lors de l'impression du tableau en utilisant:

for (i=0;i<20; i++) { 
    gameCards[i].printCard(); 
} 

tous les articles sont les mêmes.

qu'est-ce que je fais mal?

Answer 1

Vous utilisez un seul objet, vous devez utiliser

gameCard = {…} dans la boucle. (Nouvel objet n'est pas nécessaire)

for (var i = 0; i < 20; ++i) { 
    var gameCard = {…}; // create a new instance of object 
    … 
} 

Answer 2

Soit définir votre objet GameCard comme si (fiddle):

var GameCard = function() { //wrap in a function to mimic a constructor 
    return { 
     "image": "", 
     "container": "", 
     "match2Card": "", 
     "visible": false, 
     "cardId": "", 
     "updateCard": function (imageName, divName, matchingCard, isVisible, cardId) { 
      this.image = imageName; 
      this.container = divName; 
      this.match2Card = matchingCard; 
      this.visible = isVisible; 
      this.cardId = cardId; 
     }, 
     "toggleCard": function() { 
      this.visible = !this.visible; 
     }, 
     "printCard": function() { 
      log(this.image + ' ' + this.container + ' ' + this.match2Card + ' ' + this.visible + ' ' + this.cardId + '<br>'); 
     } 
    }; 
}; 

var test = function() { 
    var gameCards = [], 
     card = null, 
     i = 0; 
    for (i = 0; i < 20; i = i + 1) { 
     // call the function to get a new object 
     card = GameCard(); 
     // set object properties 
     z = i + 1; 
     c1 = Math.floor((Math.random() * 20) + 1); 
     card.updateCard('images/bf' + i + '.jpg', 'div' + c1, z, false, i); 
     // push into array 
     gameCards.push(card); 
    } 
    for (i = 0; i < 20; i++) { 
     gameCards[i].printCard(); 
    } 
}; 
test(); 

ou le définir comme celui-ci (fiddle):

var GameCard = function() { //or make a constructable object 
    this.image = ""; 
    this.container = ""; 
    this.match2Card = ""; 
    this.visible = false; 
    this.cardId = ""; 
    this.updateCard = function (imageName, divName, matchingCard, isVisible, cardId) { 
     this.image = imageName; 
     this.container = divName; 
     this.match2Card = matchingCard; 
     this.visible = isVisible; 
     this.cardId = cardId; 
    }; 
    this.toggleCard = function() { 
     this.visible = !this.visible; 
    }; 
    this.printCard = function() { 
     log(this.image + ' ' + this.container + ' ' + this.match2Card + ' ' + this.visible + ' ' + this.cardId + '<br>'); 
    }; 
}; 

var test = function() { 
    var gameCards = [], 
     card = null, 
     i = 0; 
    for (i = 0; i < 20; i = i + 1) { 
     // instantiate new object 
     card = new GameCard(); 
     // set properties 
     z = i + 1; 
     c1 = Math.floor((Math.random() * 20) + 1); 
     card.updateCard('images/bf' + i + '.jpg', 'div' + c1, z, false, i); 
     // push into array 
     gameCards.push(card); 
    } 
    for (i = 0; i < 20; i++) { 
     gameCards[i].printCard(); 
    } 
}; 
test(); 

Sinon, ce que vous faites est de pousser le même instanc e dans le tableau 20 fois.

MISE À JOUR

Vous pouvez également définir votre objet GameCard que vous faites actuellement et ensuite appeler Object.create(GameCard) pour créer une nouvelle instance de celui-ci (fiddle):

var GameCard = { 
    "image": "", 
    "container": "", 
    "match2Card": "", 
    "visible": false, 
    "cardId": "", 
    "updateCard": function (imageName, divName, matchingCard, isVisible, cardId) { 
     this.image = imageName; 
     this.container = divName; 
     this.match2Card = matchingCard; 
     this.visible = isVisible; 
     this.cardId = cardId; 
    }, 
    "toggleCard": function() { 
     this.visible = !this.visible; 
    }, 
    "printCard": function() { 
     log(this.image + ' ' + this.container + ' ' + this.match2Card + ' ' + this.visible + ' ' + this.cardId + '<br>'); 
    }; 

var test = function() { 
    var gameCards = [], 
     card = null, 
     i = 0; 
    for (i = 0; i < 20; i = i + 1) { 
     // use Object.create for a constructor 
     card = Object.create(GameCard); 
     // set properties 
     z = i + 1; 
     c1 = Math.floor((Math.random() * 20) + 1); 
     card.updateCard('images/bf' + i + '.jpg', 'div' + c1, z, false, i); 
     // push into array 
     gameCards.push(card); 
    } 
    for (i = 0; i < 20; i++) { 
     gameCards[i].printCard(); 
    } 
}; 
test();