Prototypes and Prototypal Inheritance - Javascript In Depth
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- We take a look at Prototypes as well as Prototypal Inheritance together in Javascript. This is a concept that underpins everything we do in Javascript and answers questions about the properties on the Objects and types we've been using in Javascript up until now.
Understanding prototypes will also set us up really nicely in our conceptual understanding of how Classes and Object Oriented Programming work in Javascript. These new keywords and additions to the language will leverage the built-in Prototypes that Javascript has to simulate the ideas of "classes" in the language for us.
Note that this is an advanced topic and will take a lot of practice and trying different things over time to really cement. We'll go through some practice exercises together on prototypes in the next video in the series.
This is part of a series where we go over Javascript in depth to learn programming concepts as well as web development: • Javascript In Depth
Chapters:
00:00 Introduction
01:43 Prototypes and Prototypal Inheritance
02:42 Mysterious Properties
04:27 Properties Recap Code Example
10:03 The Object [[ Prototype ]]
13:10 [[ Prototype ]] Getters
14:38 First Prototype Code Example
19:49 The Prototype Chain
23:38 Prototype Chain Code Example
27:28 Static Object Properties
29:45 Static Properties Code Example
32:42 Static vs Prototype Properties
38:27 Setting a Different Prototype
40:42 Prototype Setting Code Example
45:55 The "new" keyword with Prototypes
48:25 Next Steps
📦 Github Repository with the notes and exercise code+solutions: github.com/Nooder/javascript-...
💬 Come join us on Discord to chat with a like-minded community about tech and learning: / discord
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader - วิทยาศาสตร์และเทคโนโลยี
Hey everyone! Just wanted to add a correction to the last section - The "new" keyword with Prototypes:
The Animal prototype does not have "type" in it. "Type" is just in the individual instances of Animal. In order to add it to the prototype of Animal, we'd need to do: Animal.prototype.type = _something_; Just like we saw with the Object.prototype before it.
I also forgot to remove "speak" from the Object prototype from the earlier slide, haha sorry! This again would only be here if we assigned to Object.prototype.speak and then had this code as well.
Hope that helps and doesn't confuse things more! 😊
Discovering this channel is like discovering gold
you have the gift of being able to teach really well , thank u so much , i am currently watching your js in depth playlist and it's amazing , keep going
One of the best JS channels on YT! I've been following u for a while now and I've learned so much! Thank you for the awesome in depth content.
Hey Fln! Thank you so much for the kind words! It really means a lot and it’s comments like this that help me keep going 😊
If you’re interested, here’s a link to the Discord server we have where we’re also building a community on all this: discord.gg/9SZbqWvMrV
wow you just blew my mind with your amazing explanation nader , thank you soo much for providing such a quality content , keep going : )
This guy has some quality content and great explanations
Thanks Shivansh! I’ll keep them coming 😊
your content is so underrated
Thanks Kim! I hope to keep creating more like this and sharing with the community 😊 Would love to know what makes you say that though vs the other content on youtube!
WoW... The only one on YT to actually clear all the fake prototypes.... Really cleared the Objects concepts
Thanks for the kind words! I'm glad this concept makes sense for you, since this is definitely an important but challenging topic! 🤓
But I got stuck....What does Object.getOwnPropertyNames(Object.__proto__) refers to?
Object. getOwnPropertyNames (Object.__proto__._proto__) refers to prototype which contains construtor, definegetsetter....
And one more thing MDN says usage of __proto__ should be discouraged...so how to use Obejct.getPrototypeOf??
Pls help... I shall be highly thankful
Better than 99.9% of prototypal tutorials.
you deserve 100 M subs
Very good explanation
Great explanation of JavaScript prototypes. I truly appreciate your hard work for this video.
Great video as usual
Thanks Mahmoud! 😊
super interesting video, finally a nice explanation of the topic
This is amazing and very clear. Keep up the good work.
Thanks Samuel! Glad you found it helpful - this is a tricky topic 😊
26:58
The tutorial is fantastic