Question

有人可以帮我理解面向对象的javascript方法吗？我习惯于编写js代码如下：

function o_deal(id) {
    var hand = gcard1 + ", " + gcard2;
        var res = gcard1_val + gcard2_val;

    document.getElementById(id).innerHTML = hand;

    if (res == 21) {
        alert("Blackjack!");
    }
if (bucket == 0) {
    bucket = " ";
}

var card3_val = Math.floor(Math.random() * deck.length);
var nhand = deck[card3_val];
bucket = bucket + " " + nhand + ", ";
bucket_val = bucket_val + gcard1_val + gcard2_val + card3_val;

if (bucket_val >= 22) {
    var r = confirm("Bust! By " + nhand);
    if (r == true) {
        refresh();
    }
    else {
        refresh();
    }
}

document.getElementById(id).innerHTML = bucket;
}

但我已经看到堆栈溢出的一些海报写了这样的代码：

var Hand = function(bjcallback) {

    this.cards = [];

    this.onblackjack = bjcallback;

    this.deck = [1,2,3,4,5,6,7,8,9,10,"Jack","Queen","King","Ace"];

    this.values = {
        "Jack": 10,
        "Queen": 10,
        "King": 10,
        "Ace": 11
    };

    this.sum = function() {
        var i, x, res = 0;
        for (i in this.cards) {
            x = this.cards[i];
            if (typeof(x) != 'number') { x = this.values[x] };
            res += x;
        };
        return res
    };

    this.pick = function() {
        var pos = Math.floor(Math.random() * this.deck.length);
        var card = this.deck[pos];
        console.log(card);
        return card
    };

    this.deal = function(n) {
        n = n || 2;

有人可以打破第二种方法，这样我才能理解其中的区别吗？任何帮助将不胜感激。

Answer 1

javascript中的面向对象并不困难。您只需将功能和数据捆绑在一起。

所以我们有一些功能。

我只看一下这个片段

function o_deal(id) {
    var hand = gcard1 + ", " + gcard2,
        res = gcard1_val + gcard2_val;

    document.getElementById(id).innerHTML = hand;

    if (res == 21) {
        alert("Blackjack!");
    }
}

让我们重构一遍。我们需要一些功能

isBlackjack。检查我们是否赢了。
toString用于渲染手

现在我们需要定义手。

var Hand = {
   "isBlackjack": function() {
     return this.cards[0].value + this.cards[1].value === 21;
   },
   "toString": function() {
     return this.cards[0].toString() + " " + this.cards[1].toString();
   }
 }

现在我们可以将o_deal重构为

function o_deal(id, hand) {
    document.getElementById(id).innerHTML = hand.toString();

    if (hand.isBlackjack()) {
        alert("Blackjack!");
    }
}

当然，我们仍然需要卡片的概念，我们需要能够伸出援助之手。

握手很容易。 var hand = Object.create(Hand)

我们还需要一个需要toString方法

的Card对象

var CardList = [null, "1","2","3","4","5","6","7","8","9","X","A"];

var Card = {
  "toString": function() {
    return CardList[this.value];
  }
}

现在我们只需要一种创建手的方法

var createHand = function() {
  var hand = Object.create(Hand);
  var card1 = Object.create(Card);
  var card2 = Object.create(Card);
  card1.value = Math.floor(Math.random() * 11);
  card2.value = Math.floor(Math.random() * 11);
  hand.cards = [card1, card2];
  return hand;
}

现在希望您可以看到封装和绑定数据和功能如何一起使用。

Answer 2

道格拉斯克罗克福德是你的男人。他有一系列文章真正深入研究JavaScript的细节。我建议阅读所有文章：

http://javascript.crockford.com/

这个解释了JavaScript的OO语法：

http://javascript.crockford.com/private.html

Answer 3

当整个事物在Class中时，面向对象发挥作用。

Answer 4

面向对象的代码用于组织和可重用性。所以在你的第二个例子中，你有一个Hand类，你可以创建新的实例。因此，每当您想为玩家创建新牌时，您都可以：

var playerHand = new Hand(options);

并将参数传递给该类，该参数将用于区分一只手与另一只手。

this.deck，this.cards等是对象的属性，this.sum，this.pick等是方法。这些方法（或简称函数）可以作用于对象的公共属性和私有属性。

OO代码的这个特定示例不是真实世界的例子（或者至少我不会那样组织它）。 “交易”方法将成为CardDealer类的一部分。

因此，您将拥有以下类/对象（以及其他类），您可以从中创建新实例：

经销商，玩家，手，卡，游戏

（请注意，这只是一种方法，正如您所提到的，有很多方法可以解决这个问题） Game对象可以有一个“type”属性，在这种情况下它将是二十一点。然后，Game对象可以负责为二十一点加载适当的规则。需要经销商的一个实例，以及X个数量的Player对象，并且每个实例都有一个与之关联的Hand对象。

这样，每个对象都负责自己的属性和操作（方法）。它保持一切有条理和封装。

正如我写的那样，@ Raynos刚刚发布了将程序代码重写为OO的例子，所以希望这可以帮助你解决问题而不是如何。

需要帮助理解面向对象的Javascript方法

4 个答案: