需要幫助瞭解面向對象的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的示例，所以希望這可以幫助您解決問題而不是問題。