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

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方法

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

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

Answer 3

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

http://javascript.crockford.com/

这一个解释JavaScript的OO语法：

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

Answer 4

面向对象的代码是组织和可重用性。所以在第二个例子中，你有一个类Hand，你可以创建新的实例。所以，你要创建的卡新手对于一个球员每一次，你可以这样做：

var playerHand = new Hand(options); 

并传递参数给类，这将被用来与其他区分一方面。

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

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

所以，你将有以下类/对象（其中包括），从中可以创建新实例：

经销商，播放机，手，卡，游戏

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

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

正如我在写这篇文章，@Raynos刚刚发布了将程序代码重写为OO的示例，所以希望这可以帮助您解决问题而不是问题。