So someone shoulder-taps you and asks you to explain the concepts behind JavaScript Inheritance to them. In my eyes you’ve got a few options.
The Terminology Play
You mention that it’s prototypal inheritance, not prototypical and pretty much gloss over the rest, comfortable in your superiority in terminology. You may go as far as saying “Objects just come from other Objects because there aren’t any classes.” Then you just link to Crock’s Post on it, and try to seem busy for the next few days.
Many years later you find out that Prototypal and Prototypical are synonyms, but you choose to ignore this.
The Like-Classical-Inheritance-But-Different Play aka the Run-On Sentence Play
“So in Java, like, you have classes or whatever, right? Well so imagine that you don’t have those, but you still want to do that same type of thing or whatever, so then you just take another object instead of a class and you just kind of use it like it’s a class, but it’s not because it can change and it’s just a normal object, and if it changes and you don’t override the object, oh yea, so you can decide to override the parent object class thing, so if you dont do that and the parent changes the link is live…”
And so forth.
The Animal Play
This is a pretty popular one.
So let’s say we want to make an Animal
class in our code. As is often necessary in production JavaScript applications.
First we make a “constructor function,” which acts kind of like a constructor method on the inside of a class in a classical
language when it’s invoked with the new
operator. Except this one is on the outside.
1 2 3 4 5 |
|
Then we want to have actions that all animals can do.
1 2 3 |
|
But then you want to define a more specific type of animal. Things start to get weird.
1 2 3 4 5 6 7 8 9 10 11 |
|
Then you remember that Prototypal Inheritance doesn’t really do ‘classes’ so much. So you do something like this:
1 2 3 4 5 6 7 8 9 10 |
|
And you eventually simply converge on the…
The Father/Son Analogy Play
Here we go. Finally a real world example of ‘instances begetting instances.’ It’ll be a perfect analogy. It’s even an interview question some places. Let’s see how we might implement the relationship of a father and son (or a parent to its child) in JavaScript.
We’ll start out like we did before, with a Human constructor
1 2 3 |
|
Then we’ll add in a common human shared action.
1 2 3 |
|
So we’ll create my dad first.
1 2 3 4 5 6 |
|
Score. Now let’s create me.
1 2 3 4 |
|
It’s a start! Seems like I inherited a little too much from my dad, but I inherited, none the less.
Let’s try to smooth things out to make the analogy work better. So we’ll instantiate objects without a name and have a parent name them after they’re created.
1 2 3 4 5 6 7 8 9 10 11 |
|
Perfect. Now the baby can sayHi
on its own.
1 2 3 4 |
|
Err. yipes. Babies can’t talk. And what’s this deal with a baby being made by one parent. Not to worry, we can fix all of this.
First we’ll probably want to try to take two parents into the makeBaby
function (no giggles).
1 2 3 |
|
Multiple Inheritance! How did you get here? Ugh. Fine. We’ll just simply mock the human chromosome pattern into our little inheritance example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
Elementary. My only beef is that we no longer are using real prototypal inheritance.
There is no live link between the parents and the child. If there was only one parent,
we could use the __proto__
property to set the parent as the prototype after the
baby was instantiated. However we have two parents…
So we’ll need to implement runtime getters that do a lookup for each parent via ES Proxies.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
So now we support live lookups of parents, and, you know, some simplified genetics.
Isn’t that just a simple, well-defined, example of how straightforward inheritance can be in JavaScript?
Conclusion
Sometimes these analogies get pretty crazy in my head, and I start to think that maybe instead of trying to apply known examples in the outside world in order to help people understand, it’s often better to just let someone know why they might wanna use inheritance in their programs!
I personally find the best Prototypal Inheritance analogy to be:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
So stop making everything so confusing and go program cool stuff, and ignore my old presentations when I used these analogies.
<3z