Understanding the JavaScript Prototype Chain

This tutorial explains the concept of Prototypes in JavaScript, how a prototype chain gets built, how javascript uses the prototype chain to search for methods, and how you can customized the prototype chain to build your own custom objects.
Methods covered include Object.create, Object.setPrototypeOf, Object.setPrototypeOf, and the difference between _proto_ and prototype.
Starter Code GIST: gist.github.com/prof3ssorSt3v...

[@islombekhasanov]

The part where we both just sat looking at the console thinking WHY IT WORKS 😂😂😂 hilarious. Honestly thanks for the videos! Lots of respect from Uzbekistan 🇺🇿

[@pupdoggify]

I must say that you have the most genuine, easy to understand, well explained/high-quality tutorials on concepts that've been foreign to me forever! Now, who remembers Prototype.js from the good ol' days ;)

[@SteveGriffith-Prof3ssorSt3v3]

I liked scriptaculous.

[@aravindm6124]

Eventhough this prototype concept is bit difficult to understand , watching it again and again ,slowly understanding the purpose of prototype, Thank you Sir , you are a legend at Java Script

[@foysalmohammad3278]

I don’t understand why you are so underrated!!! This guy is so precise and clear.

[@saifullahmansur6607]

You've made that hard to get around topic so easy to me. Thank you Professor

[@maxtayebwa8987]

Amazing, prof! Thanks so much for this. Have you ever considered creating a patron program for this channel where subscribers could say contribute $5 a month to you as a token of appreciation for these great classes? I gladly would consider this without a second thought, you, Prof, alone, rectified my javascript singlehandedly! I am open to suggestions from you and other subscribers! Please keep doing this, blessings!

[@SteveGriffith-Prof3ssorSt3v3]

I have thought about sponsorships (as KZbin calls them). But I need 30k subscribers before I can do that.

[@osamagamal495]

as always you simplify every topic in js. and make it look easy! keep it up, you're really a great teacher.

[@rotrose7531]

I owe you a lot that the fact I can write some javascript from scratch now is all because you have assisted me along the way, Thank you. Now the subscribers are 28K, when it reaches 30k, then you can do the patron program, I will be the first to participate.

[@kaiansaari7398]

This is by far the best vid on js proto's. Thank you!

[@chesterxp508]

Another very cool tutorial!

[@hey.............]

I have not seen a better explanation for this topic. Quality Content💯. Thanks Steve, this really helped me.

[@Nick-we5wg]

Each video - best explanation !

[@alexsilva820]

The best explanation as always. Thanks sir

[@swaroopbhave651]

That was a very clean explanation of prototype and __proto__. Could you please add a video on classical inheritance vs prototypal inheritance. Its a big confusion!

[@richochet]

Brilliant thank you very much for this another great tutorial

[@beatrixdevine4101]

Really helped, thank you so much!

[@totfosk]

thank you Steve!!

[@walltack8826]

I love how you just sit there in silent disbelief for a few seconds at 5:40 when obj.__proto__.someMethod() works

[@Snoo29293]

Is there any difference in the prototype chain for map objects, set objects and arrays? Also, when you create an object with a class, is the prototype chain of that object similar to how it is when you create an object with a constructor?

[@SteveGriffith-Prof3ssorSt3v3]

Maps, Sets, and Arrays all have their own constructor with their own prototype object. Then they are all connected to the Object prototype. Whether you use `class` or `object.create` or `new` you are doing the same thing with a constructor and it's prototype. You might also be interested in my other videos about the prototype chain and classes - kzbin.info/www/bejne/jqC0fIt6jMd_Z68 kzbin.info/www/bejne/ZmLNh5p5gJJ7jpY

[@56BAK]

thanks

[@alexvass]

Thanks

[@SteveGriffith-Prof3ssorSt3v3]

and thank you very much too!

[@juanyang838]

2:30 Are there any ways to inspect in the dev console that all the prototypes chain is heading to null? That part is the only part that I can't understand.

[@SteveGriffith-Prof3ssorSt3v3]

You can always use the Object.getPrototypeOf( obj ) method to get the prototype of an object. You can write that in the console.log. Here is a sample that creates an object with its own custom prototype object. It's prototype object then links to the Object prototype and then it links to null. let myObjProto = { f: function() { return 42; } }; let myObj = Object.create(myObjProto, { prop: { value: "value" } }); let protoT = Object.getPrototypeOf(myObj); console.log("prototype is", protoT); while (protoT !== null) { protoT = Object.getPrototypeOf(protoT); console.log("prototype is", protoT); }

[@MatterAAA]

Hi Steve, I am a little new to this. Is prototypes only a ES5 thing? Is it relevant to ES6?

[@SteveGriffith-Prof3ssorSt3v3]

prototypes are a core part of JS that goes back to version 1 and they will always be part of JS. They are incredibly relevant regardless of which version features you are looking at.

[@MatterAAA]

@@SteveGriffith-Prof3ssorSt3v3 Thank you

[@JosephPachuau]

In 1:52, you said "this object obj has its prototype as otherProto" but when i run the code : console.log(Object.getPrototypeOf(obj)); it just returns {} in VS Code...why?

[@michael.knight]

Got a question, something that I'm trying to understand, so you write otherProto.prototype.someMethod instead of otherProto.someMethod, because if you wrote the latter, the method would not become available to obj? So modifying otherProto does not automatically modify its prototype?

[@SteveGriffith-Prof3ssorSt3v3]

When you create an Object, that object will automatically have a prototype object. The prototypes are what gets linked to create the prototype chain. If you want methods to be available to the objects that are below then you typically place them on the prototype. The prototypes then get connected to form the prototype chain. You can alternatively create an object to specifically be the prototype of your object. In this case you would put the methods inside the object and then set the object as the prototype for your other object.

[@pythonfinance8607]

that was a great video. I also create simillar content.

[@maksymantoshkin2896]

Hmm🤔, is it possible to point Object.prototype to some custom object? Will it extend every instance of Object?

[@SteveGriffith-Prof3ssorSt3v3]

Object is the built in top of the chain. Its prototype points to null. You can't change it. But you can build as many custom objects as you like and extend them. It all leads back to Object.prototype and /or null. You can point your object prototypes to null if you want.

[@SteveGriffith-Prof3ssorSt3v3]

This is the error that you get if you try to overwrite the Object prototype: TypeError: Cannot assign to read only property 'prototype' of function 'function Object() { [native code] }'

[@SteveGriffith-Prof3ssorSt3v3]

Here is a good reference to read about __proto__ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto Along with the recommendations to avoid changing the prototype of an Object for performance reasons. Using Object.create( protoObj ) when you create an Object is fine. Try to avoid changing prototypes after the fact and especially with built-in objects. This link too - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

[@bikramchettri9405]

Hey Steve can you please explain two sum algorithm?

[@SteveGriffith-Prof3ssorSt3v3]

Please post requests for tutorials on my tutorial request video - kzbin.info/www/bejne/gnTIq5SuZ9qBacU

[@kaos092]

When I create an object it does not have a prototype object on it. It has a reference to object with proto.

[@anagabriele7340]

thanks, would be awesome if you had a course on udemy!!!!

[@SteveGriffith-Prof3ssorSt3v3]

I'm starting to work on some courses that I will be posting here on KZbin.

[@Retrofire-47]

i have to be honest JavaScript kind of feels retarded sometimes because of systems like this. it's like an object is creating an object using another object? it's just weird and confusing. but i guess it works