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!
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: ru-vid.com/group/PL0Zuz27SZ-6N3bG4YZhkrCL3ZmDcLTuGd
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!!!
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!
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.
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 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.
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!
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
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.
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 😉😜😛😁
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
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
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. 💯
@@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.
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.
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
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
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5fmifZZeJJ4.html
