Check out a free preview of the full JavaScript the Good Parts course:
The "Prototypal Inheritance (A)" Lesson is part of the full, JavaScript the Good Parts course featured in this preview video. Here's what you'd learn in this lesson:

JavaScript can begin to look like a classical object-oriented language. Inheritance can be achieved through the prototype chain. However, pseudo-classical inheritance can look foreign to developers and lead to some issues. The Prototypal Inheritance approach adds a constructor function which ensures proper inheritance. While it may not be better, it cleans up the implementation.

Get Unlimited Access Now

Transcript from the "Prototypal Inheritance (A)" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Douglas Crockford: Okay, so let's start to look at object patterns and inheritance. So JavaScript was confused in its own creation about what kind of language it was. It's a prototypal language,but it has syntax which is trying to look more classical. And so it's confused about its own nature and confusion is bad, right, but that's what happened.

[00:00:30] So let's step through an example of how the language was intended to be used. So we're gonna create a Gizmo. A gizmo is a simple object that has an ID and has a toString method. A toString method will produce the produce the word gizmo with the ID. Everybody see the gizmo.

[00:00:49] This is what actually happens. So there's the gizmo function. Functions in JavaScript are objects. Every function object has a prototype property, which the prototype is another object which contains a constructor. And by that assignment, we created the two strain property and also the original primordial object in JavaScript is also a function which has also has a prototype property which points here.

[00:01:23] And we can wire up and that's the new instance that we're making, we can wire up all the constructor properties. So every constructor property points to the function that is the constructor. Okay, so we have server loop going on there and then we add the invisible prototype properties which are the things that they all inherit from.

[00:01:48] So our new gizmo inherits here from gizmo.prototype, which itself inherits from object a prototype. Okay, so if I try to that from the new gizmo, an ID, we find it right there. If we try to fetch from it a toString method, it doesn't have one there. So it tries to go there.

[00:02:08] Do we find it? Yes, we could. So our program receives it as though, it contained it, but it actually inherited it, okay? So this is how JavaScript works, but we haven't inherited much yet. So let's look at making another object and have it inherit from the gizmo. And the way Brendan intended for that was you replace the original prototype object and then we can inherit the other object stuff.

[00:02:37] Now, this gets really weird. So I'm gonna make a hoozit. Okay, and a hoozit is just like a gizmo, except it will inherit or it inherits all the gizmo stuff, but it also has a test method. Otherwise, it's just the same and the test compares the id for equality.

[00:02:56] So we'll take that. And now, look at it in terms of these structures. So filling in the prototype linkage, the inheritance chain. Okay, so if we want to go to a hoozit ID, we'll get it from the hoozit instance. If we want its test method, we'll inherit it here from hoozit.prototype.

[00:03:20] And if we want its toString method, we'll inherit from gizmo.prototype. And so that's inheritance works in JavaScript. So looking at this, there's not a lot to like here. One thing that upset the Java programmers pretty quickly was you got this crap hanging down outside. What's that? You want the class to be all contained and neat and stuff.

[00:03:50] This stuff's laying out there. And now, this is totally weird. We replaced hooozit.prototypes with an instance of another object that doesn't look anything like extends. That's just holly weird. It also creates some other problems. For example, if I ask my new instance over hoozit, who is your destructor?

[00:04:11] Cuz maybe that's important to you. Well, that doesn't have a constructor. That doesn't have a constructor. We go up here and it says, it's a gizmo. It doesn't even know it's a hoozit. Now it's possible to repair that, but that's more work on your part. The system is not looking out for you here.

[00:04:27] That's problematic. So we could put some sugar on this. One of the nice things about JavaScript is that it's so dynamic. You can kind of build the language up yourself. So I could add a new constructor function which would take an object that is gonna be the thing that we inherit from and would take a constructor function and would take a set of methods and do all the stuff that we saw before, except it does more neatly.

[00:05:03] And then when I want to inherit from hoozit, I just say, okay, you can extend to gizmo and here is your constructor function. So now it's at least neater, everything is contained. Is it better? I can testify that it's better, but it's at least neater. So this is it.

[00:05:22] This is the JavaScript function that would implement that. So and in fact, a lot of people have done stuff like this. Virtually, every AJAX framework has its own sense of how you should be building the objects. Everybody is dissatisfied with the way that the raw language does it.

[00:05:39] And so everybody tries to put something on top of it to make it neater. I'm not sure this is the right way to think about it, but it's available.