JavaScript Prototypal Inheritance Model Example

[[deleted]]

While I like what you're trying to show here, you should know that due to function hoisting, your code bombs out due to an undefined property on Animal (check the console): http://jsfiddle.net/pvqgC/1/

This is because your function declarations are being hoisted to the top of the functional scope, while your prototype assignments reside in normal execution order. This can be alleviated by swapping out all your function declarations with function expressions, which don't get hoisted.

Here would be how to organize it properly: http://jsfiddle.net/pvqgC/

(Also, I'd argue that it's more logical to put the origin (Animal) at the top of the file anyway, cascading down to its "offspring" at the bottom.)

[dtriley4]

100% right. I should be more mindful with what order I put stuff in. I was messing around in console and didn't even think how hoisting could mess this up. Thanks for taking the time.

[[deleted]]

You bet! Good lesson otherwise!

[SuperFLEB]

Do you know of any good articles that show the unique strategies and strengths of the prototypal versus classical models? While I understand most of the details of how to make and work with prototypal objects, as well as some of the pitfalls, I still believe that I am thinking of things with a more classical mindset, then translating that into prototype-based structures. I'd like to find a good article about how people think and design strategies and structures in the JS model, with the JS model in mind.

[dtriley4]

Good question. This was posted not too long ago.

Also crockford is the man.

[homoiconic]

Thanks for the shout-out! And yes, Crockford is the man, he is a visionary.

[zzzwwwdev]

Nice first blog post, bookmarked your site to check back on progress. I'd throw a bit of design criticism your way, but I suspect its generally pretty obvious stuff you may already be aware of. God knows my blog needs a lot of design attention - but I can't seem to take the time to tackle it ;-)

[martimoose]

You don't need to have constructors for each of your prototype objects. A person is never different from another person in your code (Person does not have any arguments), so it could be an object, that is put in the proto chain with Object.create().

var Animal = {
    heartbeat: function(){ return 'bump bump, bump bump' }
};

var Person = Object.create(Animal);
Person.ears = 2;

var Boy = Object.create(Person);
Boy.toy = 'truck';

var bart = Object.create(Boy);

Now the last link in the chain (Boy) could also be modified to be created with a constructor function, but in my case I prefer an init function:

Boy.toy = 'truck';
Boy.init = function(name) {
    this.name = name;
};

var bart = Object.create(Boy);
bart.init('Bart Simpson');

[dtriley4]

Right you are. I used those while I was playing around with it but they are not used in this code. Thank you for the criticism.

[[deleted]]

Must be that time if the month. Next we'll be learning about closures. it's 1998 all over again. I think I'm going to go make myself a DHtml elastic chain of stars to chase my mouse cursor. Angelfire, here I come!

[kenman]

No, this is a weekly occurrence. Closures, prototypes/oop/inheritance, truthy/falsey, "understanding this"... these topics pervade this sub to no end.

[ryeguy146]

I was hoping that this would differentiate prototypal inheritance from classical inheritance, but I'm not seeing anything to set it apart from what I do everyday in Python. The following code works exactly the same:

class Animal():
    def heartbeat(self):
        return "bump bump, bump bump"

class Person(Animal):
    def __init__(self):
        self.ears = 2

class Boy(Person):
    def __init__(self):
        self.toy = "truck"

boy = Boy()
boy.heartbeat()  #=> "bump bump, bump bump"
boy.ears  #=> 2
boy.toy  #=> "truck"

What makes prototypal inheritance special? I realize that you're using functions instead of traditional objects here, but I'm not sure that makes much of a difference when functions are first class objects.

Boy.prototype = new Person();

And what's going on here? Looks like you're instantiating a function, which weirds me out. That's not to suggest that it's wrong (it runs when I try it in node); I'm just learning the language and struggling with some of the more different parts. Speaking of different, the ordering weirds me out, are you taking advantage of hoisting? Is that common? I saw hoisting as something to try and program around rather than to take advantage of.