嵌套JavaScript对象

Question

I am writing a simple JavaScript application. The code consists of creating an object deck which can have many nested card objects.

Basically, I wanted to be able to access each card in a deck instance like this:

deck1.card2.method();

I have used the following function to create my deck prototype:

function Deck(){
var cardStack = []
//deck properties & methods
}

function card(){
//card properties methods
}

I've been adding each card to the deck and storing them in the cardStack array, using push and pop methods of JavaScript arrays.

This however does not allow me to access my cards as I wished to do:

deck1.card2.method();

Can anyone point me in the right way to achieve this? Is it possible in JavaScript? Thank you in advance :-)

Answer 1

You need to define the objects and functions as properties of the parent object by using this :

function Deck() {
  this.cardStack = [];
  this.card = function() {
    console.log('Hullo');
  }
}

Now calling the method works:

var deck = new Deck();
deck.card();   // Prints 'Hullo'

Answer 2

To access the single card objects, you will need to make your cardStack a public property. Inside the constructor, the this keyword is a reference to the current Deck object, so you can use:

function Deck(){
   this.cards = [];
   // deck properties & methods
}

Then, access a single card of var deck = new Deck(…) via deck.cards[2] , and call a method of it.

Or you use an accessor function to the cardStack array. Extended example:

var Deck = (function() {
    function Deck() {
        var cardStack = [];
        this.getCard = function(i) { return cardStack[i]; };

        for (var i=0; i<5; i++)
            cardStack.push(new Card(i));
    }
    function Card(i) {
        this.method = function() {
            alert("Hi, I'm card №"+i);
        };
    }
    return Deck;
})();

var deck = new Deck();
deck.getCard(2).method(); // alerts "Hi, I'm card №2"

Answer 3

You can implement such a method dynamically simply by adding the property to your object at runtime in the method where you are pushing your card or deck onto the array.

For example:

var DeckStack = {
    initialize: function() {
        this.deckStack = [];
    },

    addDeck: function (name) {
        this.deckStack.push(name);
        this['deck' + this.deckStack.length] = name;    // <-- We add a method or property to the object dynamically
    }
};

DeckStack.initialize();
DeckStack.addDeck('test');
console.log(DeckStack.deck1);  // Writes 'test' to console

// This will show our new method/property as part of the object
for (var meth in DeckStack) {
    console.log(meth);
}

Maybe you are creating a Card object. If so, you would use:

var card = new Card(name); // For example
this['deck' + this.deckStack.length] = card;

and it would be available as a property on your deck object.