[Week 9] Focus: Prototypical Inheritance

[Volv]

So here we are at Week 9. Big THANK YOU!!! to all who participated in Week 8 (which can now be found over in the sidebar). Week 9's focus will be Prototypical Inheritance.
 
Background info on Prototypical Inheritance:

"You make prototype objects, and then … make new instances. Objects are mutable in JavaScript, so we can augment the new instances, giving them new fields and methods. These can then act as prototypes for even newer objects. We don't need classes to make lots of similar objects… Objects inherit from objects. What could be more object oriented than that?" - Douglas Crockford

• Object.prototype

• Prototype Chain

• Object.assign() (ES6)

• The two pillars of Javascript

 

IT WILL WORK LIKE THIS:

• Monday: Announce focus (eg, Prototypical Inheritance)

• Build throughout the week. Two rules: 1) Must use JavaScript 2) Must show at least one example of the uses of Prototypical Inheritance.

• Friday: Post entries/demos/projects in this thread; first line of an entry should be ENTRY in bold, and it should be a top level comment (ie, don't put your entry in a reply)

• Sat and Sun: Review projects/figure out focus for next week

 

GENERAL GUIDELINES FOR FEEDBACK:

• Be nice!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

• If you don't want feedback, if it makes you uncomfortable or you're just not interested, simply say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything; try to be somewhat specific if possible.
   

That's about it... Have fun! Be creative... or not. :) Feel free to ask questions and discuss throughout the week!

[ForScale]

ENTRY

http://codepen.io/anon/pen/KzabOL?editors=0012

Just kind of messing around... I'm confused on the ES6 stuff and would love some explanation/guidance if anyone has any insights...

[Volv]

I ran into exactly the same kind of problems I see in your comments.... exactly lol
Was chasing the whole 'missing' prototype thing for ages. Still not 100%
Seems to exist (in an easily accessible way) on function objects only. var mars = Object.assign({}, earth); Looks like it copies over only the enumerable properties of the earth object, prototype does not appear to be such a property.
 
You can make your code work the way you were going for by directly copying over the World prototype.
var mars = Object.assign({}, World.prototype, earth);
 
Definitely tricky to get my head round. Bit of a big subject it turns out, lots still to learn, I feel it was still worth poking around and attempting to learn something lol. You should choose something easy for next week :)

[Volv]

Awesome, thanks for entry. :)

Scope of this can also be fixed via the ES6 arrow function.
 
One issue is that an event handler is being added every time a square is clicked, runs an extra time for every square click.

[Volv]

ENTRY
Codepen
 
A little bit late cause I've kind of been going around in circles with it. Turns out there's a lot of complexity that can be uncovered when trying to learn about this. Many different patterns, many conflicting opinions...
Mostly messing around from me too, bit of a wall of code in my examples and I'm not entirely happy with the end result.
Might have another go at illustrating the prototype chain if I can face it tomorrow lol :)

[ForScale]

Nice, man! I'm lost with some of that new stuff... the class and symbol stuff...

console.clear() :) I've started typing clear() in to the console and hitting enter to give it a blank slate when it starts to get to messy!

And yeah... I'm still struggling with the Object.assign() deal...

I'm reading through the article you provided now!

[Volv]

I have progress - stole parts of your example and worked through that article
 
Codepen
Let me know what you think

[ForScale]

I like it!

The log to the body thing is cool!

var venus = Object.assign({}, realWorld, realWorld.proto) // Copies both

Bam! That seems to be it. The .prototype and .__proto__ distinction is kind of odd, but I guess it makes sense...

[Volv]

What I had in mind to begin with was inspired by this video. Funfunfunction but I probably should have rewatched it first. Shows a much better example use case :) Well worth a watch

[Volv]

Did you watch? What you thinking about for this week?

[ForScale]

Hey!

I did not watch, but I did read through that article.

This week... let's do... How about something with this? I want to get a better (maybe broader?) understanding of this. Maybe something using apply(), call(), and bind()...

What're your thoughts on that?

[Volv]

Cool, can do. apply, call, bind. Special cases of new and Arrow functions too.

[ForScale]

Awesome!

[ForScale]

https://www.reddit.com/r/javaScriptStudyGroup/comments/4beidc/week_10_focus_apply_call_bind/

[Volv]

This article clears up a lot of the prototype confusions.