What is __proto__ ? | Javascript Prototypes Tutorial
HTML-код
- Опубликовано: 17 июн 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
What is _proto_ ? This Javascript prototypes tutorial will help you understand Javascript prototype inheritance and the prototype chain. Javascript prototypes are a popular interview question topic and what is "under the hood" of the modern syntactic sugar behind ES6 Classes.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 JavaScript for Beginners: Full Course (8 hours): • JavaScript Full Course...
📺 Javascript ES6 Classes Tutorial: • Javascript Classes Exp...
What is _proto_ ? | Javascript Prototypes Tutorial
(00:00) Intro
(0:16) Good Reasons to know about Javascript Prototypes
(1:03) Hello _proto_
(2:59) New Modern Methods vs _proto_
(4:34) More than one link in the prototype chain
(8:11) 3 Rules of Prototypal Inheritance
(9:05) Inheriting a Getter and a Setter
(11:50) Inheriting from the Javascript Object
(13:34) Looping through direct and inherited keys
(14:56) Object Constructor Functions and Prototypes
(19:05) Javascript ES6 Classes and Extending Classes
References:
🔗 MDN Web Docs: developer.mozilla.org/en-US/d...
🔗 More from MDN Web Docs: developer.mozilla.org/en-US/d...
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about Javascript Prototypes helpful? If so, please share. Let me know your thoughts in the comments.
#javascript #prototypes #tutorial 
Наука
I watched 6 or 7 videos on this, and this one was BY FAR the clearest. Such an excellent use of simple, relevant examples... and clear precise explanations of a topic that can be confusing. Before watching, why syntax differences in syntax - this video clarified there was an dated/current way to doing the exact same thing! Thank you so much!
Every video of Dave is a ton of clarity even for the concepts which are esoteric. Thank you Dave !
You're welcome!
I don't stick to one programming language so I plan to come back to this video every time I need a refresher. Really well done. The pacing was great and it was comprehensive.
my friend, these advanced topics are hardly ever explained this well on youtube. great work
Glad it was helpful!
I always go back to this video everytime i do a refresher on closure. Thank you 😊
I have gone through his video couple of times and it kept getting clearer and clearer. This helps a lot for improving my fundamentals. I am surprised how simple you made everything!
Glad to hear this!
I needed a refresher on JS prototypes and this was the perfect explanation. Thanks!
Glad it was helpful! 💯
Dave, you're just amazing, you explain everything so clear. Thank you so much!
You're welcome!
Javascript Prototypes - Prototypal Inheritance and the Prototype Chain - are topics that may come up more as interview questions than when you are really writing code. That said, the more you know about Javascript, the better. Also, ES6 Classes are the "syntactic sugar" that keeps the prototype chain and ___proto___ "under the hood". This tutorial takes a look at the modern approaches, but also, it takes a look at what is going on "under the hood" with Javascript prototypes. If you are interested in learning more, check out my Advanced Javascript Concepts playlist here: ruclips.net/p/PL0Zuz27SZ-6N3bG4YZhkrCL3ZmDcLTuGd
I really likes this series and have learned a ton. Thanks you for making these great content!
Glad to hear it! 💯🚀
Thank you very much Dave, for your great advanced topics for JavaScripters! Much easier to understand than what I have read and watched before!
You're welcome!
man... i just absolutely love how clear, and precise, and detailed this advanced Javascript playlist is. thanks again for making these!!! I am not going to name the OTHER one whenever I recommend Javascript videos to other people, I only recommend 2 channels on youtube, and THIS IS ONE!!!!!! GREAT CHANNEL for anyone trying to go further!!!
Glad you like them! And thank you for the kind words! 🙏💯🚀
@@DaveGrayTeachesCode you are so welcome. i'm watching this advanced playlist multiple times. i freaking love javascript~!
Dave you are a Good Mentor from who I learned a lot of things , I always recommend your tutos to all my friends .I can't beleive that these leesons are free of charge.Thank you man
You are very welcome!
This topic finally clicked for me when I realized that "__proto__" and "prototype" are literally the same thing. We have the actual object constructs and then references to them making up the chain. But it's so tricky at first with these terms. Great video as always!
Thank you! Yes, I thought the comparisons of ___proto___ and prototype might help. I appreciate the comment! 💯
Really want this to click for me too, but how can they be the same when an object/array can contain both as separate props? As in we’d see “[[Prototype]]” and “__proto__ “ within that [[Prototype]] in an object/array
@@hulkaroyj.4960 [[Prototype]] and __proto__ are 2 names for the same thing. If i am not mistaken, accessing and manipulating the prototype of an instance with __proto__ is considered unsafe and is deprecated in some browsers, you should be doing it with Object.getPrototypeOf() and Object.create().
Some browsers will display [[Prototype]] while others __proto__, but they are the same thing, and even in the browsers that display the former, you can use __proto__ in your code to access it.
Unlike those two, "prototype" is pretty universal and that's an object attached to a Function/constructor as a property. When that constructor is used for instantiating with the new keyword, the instance will get a __proto__/[[Prototype]] property that is a reference pointing to the prototype of its constructor, this is why __proto__ of instance === prototype of constructor. literally the same object, same reference.
@@konstantinospascal1892 I see, thank you for explaining in depth!!
I created a function here to check some things and the result made me really confused. The [[Prototype]] points to the base Object, but __proto__ points to the base function, and only __proto__.__proto__ points to the base Object. Can you explain that? You said they are the same, but that was not the result
I love you Dave Gray.Your course helps me a lot please do more advanced course like this.
Thank you for the request!
Only tutorial that enabled me to understand this. Thank you very much!
Glad it helped!
Awesome! Thank you so much for this very well explained and easy to understand tutorial! 💛
You're very welcome!
This explanation is BEAUTIFUL! Thank you!
You're very welcome!
Thanks for the clear and easy explanation on confusing subject !!
You're welcome 🙂🙏
Merci pour ce cours !
Thanks a lot for the straightforward content!
Glad it was helpful!
Beautiful EVH guitar in the background! Immediate respect as soon as I clicked on the video \m/
Thank you!
video helped a lot thanks
so much new info. Great!
Glad it was helpful!
I would rate this video as one of the greatest video I have watched in recent times.
Your explanation skills are awesome Dave.. It's like content is being injected to my brain 🧠
I love your channel in such a way that I have subscribed to your bell notifications which is something I usually won't do for any other channels 😉😜😛😁
Thank you for the kind words! 🙏💯
I went through about 5 other videos trying to get an explanation on this in a way that I understood....then saw this....the guy with the EVH Frankie in the back.
"I bet this guy is going to explain it in a way that makes sense to me" and I was right.
From one player to another. Thanks man.
You're welcome! 🎸🎸
Super clear explanation. Thanks!
You're welcome! Thanks for the support!
This was really well explained thanks.
You're very welcome! 💯
best explanation ever
Awesome thank you ☺️☺️
You're welcome!
Hi Dave, Another excellent video and superb explanation of the role and difference between the __proto__ and prototype properties. One think I think some viewers might query is why the accessor functions are preferable to using the __proto__ property directly? You did explain the rules and limitations of setting the __proto__ property but do the accessor functions provide and safeguards?
Regards, Tracy
Legendary video thank you sir
You're welcome! I'm glad it helped! 🙏💯
pure gold.
Really good discussion.
Thanks! 🙏
Great content keep doing this
Thank you! 💯
this is very clearly explained
I'm glad I could help 💯
Best explanation of prototype ever
Thank you!
Wow I wonder why this channel got very less subscribers people are really weird this channel deserve a million subs just for this video .
Thank you for the kind words! It keeps growing every day! 🚀
This tuts make my JS journey much more easier . Thanks a lot . Can u please make a tuts on iterators and generators please.
You're welcome, Abu! And great request! I look forward to doing that! 🙏🚀
I remember that I used to create a function to represent a model then I use prototype to extend it or tweak it so that any new instance of this function will have new extended properties and methods,
of course inside the function will make use of "this" keyword to assign and access properties/methods
For the new ES6 classes, calling super() from within the constructor of extended class might not be necessary when the parent class constructor is not defined, but it's still very recommended to call super() because:
- most of the time you don't want to check the parent class to see if its constructor is defined (especially when the class is not yours)
- you may need to add a constructor for your parent class and then forget to update its extended classes.
so calling super() doesn't hurt but not doing so might causes you some headache similar to reading this comment I guess 🤔
Thanks Dave you always bring great topics
😂 Good joke Ahmad... but I always enjoy your comments. Thanks once again! 🙏
@@DaveGrayTeachesCode 😎😁
thank you
thank you
thank you
thank you
Truly mindfuck. I love it😂
Amazing content
Thank you, Giorgi! 🙏
thanks
Perfect
Succinct, incredible.
Thanks
Welcome!
I like your explanation. Thanks from Ukraine.
Thank you! And hello to Ukraine! 👋🌻 Fun fact: I'm from Kansas and the sunflower is our state flower as well as your national flower. 🌻🌻🌻
This is basically OOP with plain JS? Didnt know you could do that :)
Yes it is! 💯
Thanks for the helpful video! Does "__proto__: musician" mean guitarist inherits all props and methods from super class musician?
You're welcome! Can you provide a video timestamp to reference your question? I made this nearly a year ago and do not remember each example.
@@DaveGrayTeachesCode thanks for reply! It refers to 6:30.
@@jiweihe3413 not only musician, but notice it also inherited the alive property from Person which is the parent of musician. Of course, musician inherits this as well so you could say it is passed down the chain.
❤
🚀🌍🌠
This channel is from my very top list.
Whenever I listen smth, I like it 🍯
Happy to hear that!
Dave, what do you think about this statement from mozilla docs about Object.setPrototypeOf()? Should we still use it?
"Warning: Changing the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, currently a very slow operation in every browser and JavaScript engine. In addition, the effects of altering inheritance are subtle and far-flung, and are not limited to the time spent in the Object.setPrototypeOf(...) statement, but may extend to any code that has access to any object whose [[Prototype]] has been altered. You can read more in JavaScript engine fundamentals: optimizing prototypes.
Because this feature is a part of the language, it is still the burden on engine developers to implement that feature performantly (ideally). Until engine developers address this issue, if you are concerned about performance, you should avoid setting the [[Prototype]] of an object. Instead, create a new object with the desired [[Prototype]] using Object.create()."
I think Mozilla / MDN is a great source for accurate and up-to-date information. While many in the past have said they need to know about __proto__ during interviews, tech is always changing and I made this video around a year and a half ago. The concept hasn't changed and I think the video is still helpful, but reviewing any info MDN has to share is a good idea. 💯
Awesome thanks! Why `_proto_ ` is not working now?
You need 2 underscores on each side.
when i do this 'a ${this.species} is walking' the whole thing is a string and it dosent place the value in where the $ is. how do i fix?
So at 10:00 on line 29: luxuryCar.seatMaterial = "leather" you are using the setter that starts on line 22 correct? But the setter seems to impy that it should be called as a method with the desired material passed to it as an argument. i.e instead of luxuryCar.seatMaterial = "leather", it should be luxuryCar.seatMaterial("leather")
when you use dot notation luxuryCar.seatMaterial = "leather" why does it not create a property called seatMaterial and set its value to "leather"? How does it know to execute the setter method?
Good question! This is through the use of the keyword set in the object. Here is the reference from MDN with more examples: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
happy to see that someone had notificed this
I wanted to watch this to distract my mind but my mother in law just passed yesterday from lung cancer and object "alive" got me... I hope to come back to this... pain sucks
Sorry for your loss.
@@DaveGrayTeachesCode thank u
Nice voice)
Thank you! 🙏
You should change your name to David Grayt after this class
i didn't know cars had hwheels!
Some people born rich, others had to learn this...
Minute 2:42, when I open the object, it says [[Prototype]] twice. And with you it says __proto__ why is that?
It has been over a year since I made this. Chrome may have had an update that presents this differently. I just checked. Expand the 2nd Prototype you get and you will see the __proto__ further down in the expanded list.
Dave, everything made sense for me up until you started explain ES6 classes. You kinda skipped over very important concepts that I'm still trying to grasp. What is 'class'? what is 'extend'? what is 'constructor'? what is 'super()'? and yes, they are basically what you explained earlier in the video, but I guess what I'm trying to understand is what's really happening in constructor function, or what is really happening when you call super()
And of course, it goes without saying, your work is very appreciated it, thank you
Thanks for asking Mohamed. To go over the basic foundational knowledge of JS classes, I'm going to refer you to my separate classes tutorial: ruclips.net/video/5fmifZZeJJ4/видео.html To expand on the brief examples of "extend", here is the MDN link: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends and here is MDN for super, too: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super I hope that helps!
That extends (no pun intended) the objective of this class. All of it will be answered if you study about Javascript Classes. The topic of this video is about the Prototype object, so that's why he didn't explain such things.
# An Object can only directly inherit from one object
- this statement I am not understood. can you please say me in more easier way.
If the musician in your first example is alive and playing, why can't we hear their music?
It may be beyond the scope of this tutorial, but it could happen: developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
Unfortunately you're using structurally different examples when comparing functional syntax to class syntax. Your function-based example does not involve inheritance, which is what I'm really having trouble wrapping my head around. Can you show the exact same thing with Vehicle and Motorcycle in funtion-syntax? The only way I got it to work so far is using what Nicholas Zakas calls contructor theft, that is, doing Vehicle.call(this) in the Motorcycle constructor, and even that is unclear to me.
I wouldn't say it is unfortunate. Abstract your thinking to properties and methods and not what their names are. That said, good question and good job on being inquisitive while wanting to take this to the next level. I gave examples of ES6 classes last and did not show an equivalent way to create an extended object with a function. It is a different approach because functions do not use inheritance like ES6 classes do. Functions can use what is called "composition", and you can pass a created object into another function as a parameter to avoid repeating all of the property and method definitions. I'm planning on a tutorial next week on functional composition. That said, I completed your request and you can see an example of functional composition for Vehicle and Motorcycle in this gist: gist.github.com/gitdagray/40d7117dcea6ea1274cd68f8204a3896 More on functional composition coming soon. If you would like a more fundamental understanding of ES6 classes, view my dedicated tutorial here: ruclips.net/video/5fmifZZeJJ4/видео.html
thanks
Welcome!