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

有人能帮我理解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;
}

但我在stack overflow上看到过很多海报，上面写着这样的代码：

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;

---

有没有人能把第二种方法分解一下，让我明白其中的区别？如果您有任何帮助，我们将不胜感激。

当整个过程都在课堂上时，面向对象就开始发挥作用

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

所以我们有一些功能

我来看看这个片段

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

    document.getElementById(id).innerHTML = hand;

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

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

• 我是21点。检查我们是否赢了
• 用于渲染手的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!");
    }
}

当然，我们仍然需要纸牌的概念，我们需要能够做出一手牌

做一只手很容易<代码>变量手=对象。创建（手）

我们还需要一个Card对象，它需要一个

toString

方法

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

---

现在，希望您能看到将数据和功能封装和绑定在一起是多么有用。

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

这篇文章解释了JavaScript的OO语法：

---

面向对象的代码用于组织和重用。在第二个示例中，您有一个类手，可以创建新的实例。因此，每当您想为玩家创建一手新牌时，您可以执行以下操作：

var playerHand = new Hand(options);

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

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

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

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

庄家、玩家、牌、牌、游戏

（请注意，这只是一种方法，正如您所提到的，有很多方法可以做到这一点） 游戏对象可以有一个“类型”属性，在这种情况下，它将是21点。然后，游戏对象可以负责为21点加载适当的规则。需要一个“庄家”实例，以及X数量的玩家对象，每个实例都有一个关联的手对象

这样，每个对象都负责自己的属性和操作（方法）。它使一切都井然有序

---

在我写这篇文章时，@Raynos刚刚发布了将程序代码重写为OO的示例，所以希望这能帮助您了解为什么而不是如何编写。

这只是程序vs OO。你能说得更具体一些吗？我根本不懂OO语法。我想指出更多，但我不能遵循代码。OO和过程的字面区别是什么？你需要比较两个更大的代码段。我也在努力掌握面向对象的方法。我看过很多资源，有很多不同的方法来创建对象。。。这很令人困惑。你能再详细一点吗？什么时候上课？在课堂上，OO是如何让生活变得更轻松的呢？我仍然有办法完全理解OOP，但这让我们了解了一些非常需要的信息。谢谢你，雷诺斯。@codennija我也建议你忽略任何关于继承的人，看看。特性让你可以重复使用功能，并用许多较小的对象构建更大的对象。这是对雷诺斯分解的一个非常必要的补充。非常感谢你。