Check out a free preview of the full Deep JavaScript Foundations course:
The "Prototype: Objects Linked" Lesson is part of the full, Deep JavaScript Foundations course featured in this preview video. Here's what you'd learn in this lesson:

Prototypes in JavaScript can be linked and share a parent-child relationship similar to a subclass and superclass. This relationship is beneficial when extending a prototype to add additional methods. However, there are issues with constructor references.

Get Unlimited Access Now

Transcript from the "Prototype: Objects Linked" Lesson

[00:00:00]
>> Kyle Simpson: One more set of pain to point out. This is how we model classes. I'm not gonna diagram this, cuz the diagram's coming in just a moment. But we have our Foo.prototype. If we wanna make a child class, we wanna make a bar that points to it. But the Bar.prototype that comes with the Bar function on line 8, where does it link?

[00:00:20] It links here like all functions do. And where would we want Bar.prototype to link? We'd want it to link to Foo.prototype, right?
>> Kyle Simpson: So what do we gotta do? We do line 12. Line 12 is using a utility called Object.create. Now, I just pulled that rabbit out of thin air, you're like where does that come from?

[00:00:41] That's a built-in utility in ES5 so way, way back. But here are the two things that Object.create does and tell me if this sounds familiar. The first thing Object.create does, create a brand new empty object out of thin air. The second thing Object.create does, link it to another object.

[00:01:00] Does that sound familiar?
>> Speaker 2: Mm-hm.
>> Kyle Simpson: It's almost like it's the first two steps of the new algorithm. Which it is, because those are the only two steps that we actually care about here. We wanna create an object and link it to another object. And that's exactly what that utility does.

[00:01:17] So we now use that newly created linked object as the prototype for Bar. That's what we do on line 12. So now we can start adding the Bar.prototype. We can add a speak method. So now we've got an object down here that's got a speak method then the speak method can delegate up to the identify method.

[00:01:37] Still falls apart if you use shadowing. But at least we have some way of approximating something that kinda looks like a class.
>> Kyle Simpson: There's a takeaway from this slide that's gonna set us up for our further discussions in this unit. There's a b1 object there, everybody can agree with that, right?

[00:02:02] Where's b1 linked? It's linked to Bar.prototype, isn't it? Bar.prototype is an object. Where's Bar.prototype linked?
>> Speaker 2: Foo.prototype?
>> Kyle Simpson: Foo.prototype is an object.
>> Kyle Simpson: I don't know know who to credit this to, but I've heard it said many times. There's a beautiful program hiding inside of this ugly program.

[00:02:24] The beautiful program in this ugly program is there's an object linked to another object, which is linked to another object. And we get that prototype delegation and that super unicorn magic. That's an amazing system. And it still blows my mind that Brenden Ike was able to create all of this that we've seen over this unit [LAUGH] in the first ten days.

[00:02:47] I couldn't create this if I was given four years and he did it in ten days. But the problem with this program is that it's cluttered by all of this other crap. All of these functions and .prototype references, and new keywords, all of this incidental complexity, that's what it's called.

[00:03:08] There's incidental complexity that is making this program, instead of being nice, and clean, and simple, much harder to understand.