Question

我是一个JS newbi，我试图创建一个对象数组。我创建了以下对象：

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);
    }
})

并运行以下内容：

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);
}

使用以下方法打印数组时

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

所有项目都是相同的。

我做错了什么？

Answer 1

您只使用一个对象，必须使用

循环中的

gameCard = {…}。（不需要新的对象）

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

Answer 2

定义您的GameCard对象（ 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();

或者像这样定义（ 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();

否则，你正在做的是将同一个实例推入数组20次。

<强>更新

您还可以定义当前正在执行的GameCard对象，然后致电Object.create(GameCard)创建一个新实例（ 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();

JS中的对象数组

2 个答案: