与 JavaScript 中的原型/继承作斗争

Question

我有一个小练习项目，我正在开发一个二十一点游戏。我将 JS 原型用于 OOP 目的，到目前为止效果很好。我有一个游戏、卡片和手（玩家拥有的所有卡片）原型对象。 现在我的手原型有问题。 它返回我的卡片值“未定义”。我不知道出了什么问题，因为我的 Hand 构造函数返回了正确的值。

我不得不承认我对 JS 原型的理解可能还不是最好的，所以这可能是我正在努力解决的问题？！​​

这是我代码中的相关 sn-p：

var suits = ["club", "diamond", "heart", "spade"];
var cardValue = ["ace", 2, 3, 4, 5, 6, 7, 8, 9, "jack", "queen", "king"];

function Game() {
}

Game.prototype = {

    deal: function() {
        var cardSuit = Math.floor(Math.random() * suits.length);
        var cardNumber = Math.floor(Math.random() * cardValue.length);

        return cardSuit, cardNumber;
    },


    createHand: function() {
        var newHand = new Hand();
        var userCards = newHand.getHand();

        return newHand;
    }

};

var card1, card2, handCards;

function Hand() {
    var card1 = Game.prototype.deal(); //works! return two values
    var card2 = Game.prototype.deal(); //works! return two values
    var handCards = [card1, card2]; //works! creates array from card 1 and 2
}

Hand.prototype = {

    getFirstCard: function() {
        return card1; // IS "UNDEFINED"!
    },

    getSecondCard: function() {
        return card2; // IS "UNDEFINED"!
    },

    getHand: function() {
        return handCards; // IS "UNDEFINED"!
    }
};

你能帮帮我吗？非常感谢您！

Answer 1

你声明了一些全局变量但没有赋值：

var card1, card2, handCards;

然后在 Hand() 函数中，您声明该函数的 本地 同名变量：

function Hand() {
    var card1 = Game.prototype.deal();
    // etc.

然后你的其他函数尝试访问从未被赋值的全局变量：

getFirstCard: function() {
    return card1; // IS "UNDEFINED"!
},

如果您想从“类”的方法中访问这些值，这些变量应该是实例变量：

function Hand() {
    this.card1 = Game.prototype.deal(); //works! return two values
    this.card2 = Game.prototype.deal(); //works! return two values
    this.handCards = [this.card1, this.card2]; //works! creates array from card 1 and 2
}
...
getFirstCard: function() {
    return this.card1;
},

...等等在使用这些变量的其他方法中。你可以删除var card1, card2, handCards;这一行。

或者这样做可能更整洁：

function Hand() {
    this.handCards = [Game.prototype.deal(), Game.prototype.deal()];
}
...
getFirstCard: function() {
    return this.handCards[0];
},
getSecondCard: function() {
    return this.handCards[1];
},

（您的代码中还有其他问题，例如：

• 您的cardValue 数组丢失10
• return cardSuit, cardNumber; 只会返回 cardNumber
• 您的 createHand() 函数声明并设置了一个从未使用过的 userCards 变量
• 如果你从不实例化任何Game 对象而只是调用原型的方法，如Game.prototype.deal()，我看不出拥有Game() 构造函数的意义。
• 您不会跟踪牌组中还剩下哪些牌，因此（尽管不太可能）随机选择的牌可能会发同一张牌两次

...等等。）