Check out a free preview of the full JavaScript: The Hard Parts, v2 course

The "Prototype Chain" Lesson is part of the full, JavaScript: The Hard Parts, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Will introduces the prototype chain, or `__proto__` as a way to access functions that were set when Object.create() is used to instantiate an object.

Preview
Close

Transcript from the "Prototype Chain" Lesson

[00:00:00]
>> Will Sentance: Can anybody propose a better way than having copies of each function on every single user? But remembering I still wanna be able to do this. Well, hold on that thought for a moment. Can someone think of a better way? Jeff, you've got a wry smile on, you wanna.

[00:00:20]
>> Jeff: Well, you could use a project create a prototype.
>> Will Sentance: Yes, maybe Kelly, you will have a thought what intuitively could we do rather than have copies of all our functions one on every single object? What could we do, just in a very straightforward sense, Todd?
>> Todd: Well, I just have a main user that we can reference each.

[00:00:40]
>> Will Sentance: Close, just very, very intuitive and simple, Braydon?
>> Braydon: Make functions that accept the object you're using.
>> Will Sentance: That is another way, but the problem with that then, then we fall back into the old world of where's my function? I can apply it to anything. So, we want them to be bundled in the same way, yeah, Matt?

[00:00:53]
>> Matt: Just add the one function.
>> Will Sentance: Just add the one function in an object and somehow have JavaScript know that when it doesn't find increment on user2, not give up. Have us no increment function on user2. No increment function on user1, but a single object,
>> Will Sentance: We could call it, I don't know, function store.

[00:01:31]
Or user function, I don't know, and in there have our increment functionality. And somehow hope that JavaScript has some feature that will mean that when it does not find. It goes user2, looks for the memory, looks for the increment property on it, doesn't find, doesn't panic, doesn't give up, but somehow knows to go and find the function in this object, grabs its code, and runs it.

[00:02:07]
And that's exactly what JavaScript's gonna do. The prototype chain, we're gonna store the increment function in just one object. And have the JavaScript interpret it. That's the bit that looks at it and goes what do I do with that? What's this word mean? While I go look for that.

[00:02:23]
Have it, if it doesn't find the function on user1, or in this case user2, not give up, but somehow look up to that object, find increment, and use it. We've gotta link user1 or user2, and this function store object that I've created. So the interpreter, we're not finding increment, makes sure to check up to function store, where it would find it.

[00:02:48]
And exactly as Jeff hinted, make that link using the object.create technique. Here it is people. Have a look, how user created functions change, we're still making our new user. But now we're using the object.create technique to create the object, and look at this. It's still gonna be an empty object.

[00:03:11]
But I have a feeling that the fact that we're passing in user function store, we're gonna call it user function store, which is by the looks of it a bigger object here with two functions. I've added another one, increment and login. And I'm somehow gonna have a link behind the scenes on this object.

[00:03:33]
There's gonna be no increment function. There's gonna be no increment function on it. Anybody see me adding an increment function to new user object? I don't see one. But somehow it is gonna have a link to the shared storage functions. Meaning when we return the object out, that link is gonna still be that shared store functions.

[00:03:56]
>> Will Sentance: It's gonna be very, very nice. By the way, this approach here is gonna fundamentally achieve all the things we wanna achieve. Besides the fact that it's gonna involve a bit of writing a code. And there might be some shorthand ways of achieving this. And solution three and four are just gonna be shortened ways of doing just this thing.

[00:04:15]
This is the absolute core.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now