javascript - 如何将一个对象分配给另一个对象中的数组？

Question

我正在接受二十一点挑战并提出我自己的代码。所以这就是我到目前为止所拥有的......我的卡片生成器......

var card = {
    suit: null,
    face: null,
    value: null,
    generateSuit: function (x) {
        if (x == 0) this.suit = 'Clubs';
        if (x == 1) this.suit = 'Diamonds';
        if (x == 2) this.suit = 'Hearts';
        if (x == 3) this.suit = 'Spades';
    },
    generateFace: function (y) {
        if (y > 1 && y < 11) this.face = y,
        this.value = y;
        else {
            if (y == 1) this.face = 'Ace', this.value = 1;
            if (y == 11) this.face = 'Jack', this.value = 10;
            if (y == 12) this.face = 'Queen', this.value = 10;
            if (y == 13) this.face = 'King', this.value = 10;
        };
    },
    generateCard: function () {
        var x = Math.floor(Math.random() * 4);
        var y = Math.floor(Math.random() * 13 + 1);
        this.generateSuit(x);
        this.generateFace(y);
    },
}

这很好用，我只是把它包括在内，因为下一部分让我感到难过，所以我想我不会遗漏任何东西。

这就是事情的发展方向——在我的“手”(接下来发布)中，我正在使用我的“generateCard()”函数来设置“card”的值，然后将它们存储在一个名为“storecard []”的数组中'.

var hand = {
    storecard: [],
    count: 0,
    total: 0,
    hitCard: function () {
        this.count += 1;
        card.generateCard();
        this.storecard[this.count] = Object.create(card);
        this.total += this.storecard[this.count].value;
        this.logHand();
    },
    logHand: function () {
        console.log(this.storecard[this.count].face + ' of ' + this.storecard[this.count].suit);
        console.log('Value = ' + this.storecard[this.count].value);
        console.log('Count = ' + this.count);
        console.log('Hand Total = ' + this.total);
    }
}

想法是，每次击中一张牌(添加到手牌中)时，'hand' 都会将它(及其所有属性 - 花色、值(value)等)存储在 storecard[index == hand数数，聪明吧？]

这样，我可以随时通过访问 storecard[index] 检索手中任何卡片的任何属性。

嗯，没那么多。运行代码，该数组是唯一一尘不染的东西......

var me = Object.create(hand);
var dealer = Object.create(hand);

me.hitCard();
me.hitCard();

我的“logHand()”函数表明一切正常!

"5 of Hearts"     
"Value = 5"       
"Count = 1"       
"Hand Total = 5"  
"2 of Clubs"      
"Value = 2"       
"Count = 2"       
"Hand Total = 7"

但是，遗憾的是，不知何故 - 'storecard' 数组失败了。经过进一步检查，我们发现:

me.storecard[1].value
2
me.storecard[2].value
2

storecard[1] 应该持有我的红心 5，但已被梅花 2 覆盖!如果这还不够恐怖......

dealer.storecard[1].value
2
dealer.storecard[1].value
2

我什至还没有接触过经销商对象!

现在我手中和庄家手中的所有其他变量都与现实一致 - 数组是唯一的问题。

我在这里做错了什么？

Answer 1

问题在于您对 Object.create() 所做的事情的期望。

它创建对象的浅克隆。数组是通过引用分配的，而不是值。

例如

var arrayOne = [];
var arrayTwo = arrayOne;
arrayOne.push('3');
alert(arrayTwo[0]); // This will give you 3. Both variables are pointing to the same array

也是:

   var handTemplate = {
       childArray: []
   };

   var handOne = Object.create(handTemplate);
   var handTwo = Object.create(handTemplate);
   // At this point, handTemplate, handOne and handTwo all point to the same array

   handOne.childArray.push('3');
   alert(handTwo.childArray([0])); // Again, you'll see 3, because there's only one array

一个解决方案是使用专用函数创建hand:

function createHand() {
    return {
        storecard: [], // Now we get a brand new array every time createHand is called
        count: 0,
        total: 0,
        hitCard: function () {
            this.count += 1;
            card.generateCard();
            this.storecard[this.count] = Object.create(card);
            this.total += this.storecard[this.count].value;
            this.logHand();
        },
        logHand: function () {
            console.log(this.storecard[this.count].face + ' of ' + this.storecard[this.count].suit);
            console.log('Value = ' + this.storecard[this.count].value);
            console.log('Count = ' + this.count);
            console.log('Hand Total = ' + this.total);
        }
    };
}

var me     = createHand();
var dealer = createHand();