JavaScript polymorphism

200_success

12:00 AM

this is a special keyword; it's not a variable.

this takes on the value of whatever comes before the dot when you invoke object.method().

pierre.talk is a bit misleading, you could say. It's just a pointer to a function, a piece of code. The function exists on its own. It just happens to have been given the name pierre.talk.

Elton

Ok I understood that too.

200_success

Good.

Are you comfortable with mireille.talk = pierre.talk then?

Elton

No it is still better to use a seperate talk, to make it more neutral. the pierre is confusing.

200_success

Fair enough. Suppose we started with a clean slate.

Elton

Ok

200_success

12:06 AM

var frenchGreeting = function() { console.log("Bonjour, je m'appelle " + this.name); };
var pierre = { name: "Pierre", talk: frenchGreeting };

var mireille = { name: "Mireille", talk: frenchGreeting };

Are you more comfortable with that?

Elton

Much better :D

200_success

OK. We can proceed with that for the purposes of this discussion.

Any other questions so far?

Elton

No only a side question of would talk : frenchGreeting() have worked if you had

function frenchGreeting() ?

200_success

Try it. =)

Elton

Ok one sec.

var pierre = { name: "Pierre" , talk: frenchGreeting() };
var mireille = { name: "Mireille", talk: frenchGreeting()};

function frenchGreeting (){
console.log("Bonjour, je m'appelle " + this.name);
}

200_success

12:13 AM

Wait, that's not quite the same thing as var pierre = { name: "Pierre", talk: frenchGreeting };.

Elton

people[2].talk() // expecting Mireille to greet me

200_success

frenchGreeting refers to the function. frenchGreeting() calls the code.

Elton

Aah

200_success

Take a minute to try again.

Elton

Ok now code worked as expected

Usually when I call a function i add the () so that is why I used the () in defining talk

200_success

12:17 AM

Good. For this discussion, I chose the var frenchGreeting = function() { … } syntax over the function frenchGreeting() { … } syntax to emphasize how you can freely assign chunks of code to variables in JavaScript.

Any other questions so far?

Elton

No continue.

200_success

In the last frenchGreeting example, we're still a bit repetitive.

Especially if we start adding other features, like a frenchGoodbye.

Elton

Right

200_success

It would be handy to have a notion of a "prototypical French-speaking person", and instantiate one of those when needed.

… specializing each object to the extent necessary (the name).

Elton

Ok

200_success

12:23 AM

That's where the prototype comes in. It lets you define a prototypical Francophone, a prototypical Anglophone, etc.

Francophone.prototype.talk = function() { console.log("Bonjour, je m'appellle " + this.name };

You also need a way to construct new Francophone objects.

function Francophone(name) { this.name = name; }

Now you can define many Francophones!

var pierre = new Francophone("Pierre");

var mireille = new Francophone("Mireille");

Elton

Yes in your answer you didnt bother with var , but rather you used new Francophone ("Mireille");

200_success

I'm only naming the objects pierre and mireille if I care to refer to them that way.

I could just as well leave them "anonymous":

var francophones = [new Francophone("Pierre"), new Francophone("Mireille")];

Elton

Aah ok, so you use an array because that would be the only way to identify them using the array index, otherwise you wouldn't know how to get Pierre object?

That is if you didn't name them.

Or is there a concept of object 1, object 2?

200_success

There are 75 million to 300 million French speakers in the world. I think stuffing them all into an array anonymously would be good enough. =)

Elton

Haha ok

200_success

12:32 AM

Similarly, you wouldn't want to give variable names to each Monopoly card, would you?

Elton

Uhm not the cards, array indice is enough. If you mean the Chest and Chance cards.

200_success

Sorry to get sidetracked with Monopoly again. OK with francophones so far?

Elton

Yes.

200_success

We've forgotten about john. Do you think you could throw an Anglophone into the mix?

Elton

Yes one sec

var anglophones = [new Anglophone("John")];

200_success

12:38 AM

OK. Would you feel comfortable putting all three people into a people array?

Elton

Let me think

var people = [francophones[0], francophones[1], anglophones[1]];
people[0];
That was my attempt, returned an error hmm

200_success

You only have one Anglophone. anglophones[1] goes past the end of the array.

Elton

yup just realised!

should be 0

200_success

Shortcut: var people = francophones.concat(anglophones); would also work.

Do you get the expected results for people[0].talk() and people[2].talk()?

Elton

I am still getting error with people[2],

var people = [francophones[0], francophones[1], anglophones[0]];

200_success

12:46 AM

Take some time to debug that then.

Elton

oh i had that line of code before i created the objects!

200_success

Let me know when everything works.

Elton

Ok

No error but nothing happens either.

200_success

Is there a console.log() or other statement to print something?

Elton

How embarassing!

200_success

12:50 AM

That's OK. We all make silly mistakes. Let me know when to proceed.

Elton

Yes you can proceed, your shortcurt worked like a charm too!

200_success

Actually, I'm not sure if there's anything more to explain!

Elton

Well lets talk about Monopoly then.

200_success

You have a people array, and each member knows how to talk in his/her respective language.

The implementations use prototypes to avoid code duplication.

That's analogous to picking a card and having the card know what to do.

The only thing that might be tricky is that the card's act() function needs to take a player parameter.

Elton

In my code there is global variable called player, this changes whenever i change turns

200_success

12:57 AM

But I assume you are comfortable with that. It's just like how any function can take parameters.

I'd pass the player explicitly as a parameter to the act() function nonetheless.

That's better than having act() reach out into the global scope to discover the current player.

Elton

Would you be interested in doing an online tutorial of the Monopoly game? That is if you have your own site and free time.

function pickCard(array){
var x = cardCount[array][0];
var title = this[array][x].title;
console.log(x + 1 + ". " + title);
cardCount[array][0]++;
if (cardCount[array][0] === this[array].length){
shuffle(this[array]);
cardCount[array][0] = 0;
}
// i still dont know what needs to go here now that the card has been picked?
}

200_success

What do you mean by online tutorial?

Elton

By that I mean you develop the game, and post your code in blog posts and let people follow along.

200_success

The code I had in my answer was actually a pretty complete solution to the draw-a-card-and-perform-the-action problem. Take some time to read and understand it.

Elton

Ok I will.

200_success

1:03 AM

and I think that what we covered here should be sufficient to understand all of the code.

Elton

function drawCard(player, deck) {
var card = deck.shift();
card.act(player);
deck.push(card);
}

I just want to talk through this bit of code.

200_success

Sure. What puzzles you?

Elton

drawCard would be called when the player lands on either the chance or chest positions. that make sense.

what is deck.shift()?

200_success

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Elton

also when i call drawCard I would call it like so : drawCard(player, type)

var type = positions[getCurrentpos()].type;

200_success

1:10 AM

At some point, you have to decide which deck (which array) to draw from.

I think that whoever calls drawCard() should have to refer to the relevant deck (array).

What other types of positions are there?

Elton

there are 40 positions on the board, but if you mean what types of positions require a card to be drawn then it is only chest and chance positions.

200_success

Then do var deck = positions[getCurrentpos()].deck; drawCard(player, deck); instead?

Elton

.type you mean?

200_success

… where deck is either chanceCards or chestCards.

Elton

i changed my array names to "chance" and "chest" so it correlates with my .type property

200_success

1:17 AM

Instead of a .type property, you could refer directly to one of the decks.

Or, you could use a layer of indirection…

Elton

How so?

200_success

var deckForPosition = { 3: chance, 8: chest };

drawCard(player, deckForPosition[getCurrentpos()]);

Elton

No I will stick with the .type for now

200_success

That's fine. I think we've covered the original topic quite thoroughly, so I'll leave it at that.

Good luck! Any upvotes you could throw my way would be appreciated. =)

Elton

Ok I will do.

Thank you very much for your help

Wow I dont even know how to upvote :S

200_success

2:44 AM

room topic changed to JavaScript polymorphism: Tutorial explaining answer codereview.stackexchange.com/a/40077/9357 [dry] [game] [javascript] [polymorphism]

Transcript for

JavaScript polymorphism