9.20: Look away! Inheritance with Prototype in JavaScript - p5.js Tutorial
Вставка
- Опубліковано 14 жов 2024
- You should go and watch my videos on ES6 classes instead, but if you choose to be here, I will discuss how inheritance works with prototypes in JS.
🎥 Prototypes in JavaScript: • 9.19: Prototypes in Ja...
🎥 Introduction to Polymorphism: • 4.7: Introduction to P...
🚂 Website: thecodingtrain....
💖 Patreon: / codingtrain
🛒 Store: www.designbyhu...
📚 Books: www.amazon.com...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...
Lucky me, I just came from your prototype video
Me too
Me too. UA-cam algorithm is working.
me too
Me three
Ikr!
I’ve paid for courses on Udemy that didn’t explain this concept clearly and here it is for free. Thank you JS Yoda.
Never knew “square()” was a thing, I always used rect() and now I can save 0.5s each time, thank you Dan :)
:D
Just watched 9.19 and got lucky to have 9.20 available.
You're awesome and your teaching skills are great, keep up the good work!!
I'm the person you wished for who just saw the old video and came here to this video and it just existed. I love you so much for making this, thank you.
YAY!
Hahaha, same
I literally JUST watched the 9.19 and didn't see the inheritance in the follow up. Good thing I checked the full playlist. :p
Nice video btw
I just want to say that I learned JS after ES6 was introduced. So I'm essentially watching this video so that I can understand WHY JS moved to the class "system".
I learned a lot from this. Thank you very much for making it!!
I actually came here right after watching your old video from 2 years ago. Crazy how much change can happen in 2 years.
Love hearing this!
I have been looking for the explanation of the "Object.create()" so long, and finally I found the BEST one. Thank you !
OMG😱 i literally watch your first part of this video yesterday then find the other part was missing and today you made you made its second part!!
AMAZING
HAHAHAHAHA me too!!!
@@TheCodingTrain , while this may be a tiny insignificant drop in a sea of comments, I just wanted to say that I literally live in html5 canvas. It took me years to understand html, css, php, mysql, javascript, and c++ but I always return to canvas! And coding particles, physics, and animations from scratch while watching your videos made me understand concepts even more because you make it fun! THANK YOU!!
I've just watched the last video hahah. Happy that you came back 2 years later to finish it
SethBling's redstone timer in your recommened videos. I see you are a man of culture as well
This video was useful for me. I was reading some old code by someone using prototype like an absolute madman and it was very confusing. This made that code very clear.
Core foundations of Javascript, so yes, we must understand prototype inheritance. Thanks so much for the crystal clear explanation. I'm glad we don't do it this way anymore either!
I did, in fact, come from 9.19 thank you for completing the video series!
Yes, I just watched the previous video. Love the age of binge watching, rather than have to wait 2 years between episodes like when Game Of Thrones was on HBO one episode at a time.😁
Amazing explanation about Prototypical inheritance! I was struggling with this but now it is very clear for me coming from a Class based Programming Language like Java. Thanks a lot!
```Confetti.prototype = Particle.prototype``` is object shallow copy example which means both pointing to the same memory address and ```Confetti.prototype = Object.create(Particle.prototype)``` is an example of object deep copy which means both pointing to the different memory location.
You are the best I have ever seen. You are a LEGEND.
I ended up here right after watching your 9.19 prototype video !!! Thank you so much for making this video! Lots of thankfulness from Tokyo!
Thanks for following up with this video.
I've been watching your videos mostly for the JS content and never commented.
You are great, love the way that you make videos mixing good knowledge with fun. We need more of you in the world.
Ps: I'm one of who just watched the video from 2017 and didn't notice the date of this one until you mentioned 😂
Yay!
Thank you for following up. Watching this in 2020. You're incredibly helpful in my path of becoming a js programmer!
This was a crystal clear explanation of Prototype chains.
Good thing I discovered your channel today, didn't have to wait couple years. :D Your teaching style is rare and awesome.
I'm so fortunate to be coming to the last prototype video and this one on 6th April 2020. Waiting 2 years for the next part would have pissed me right off.
so glad i am late enough to watch both videos successively :)
3:55 I'have been coding games who needs to be compatible with Internet Explorer, your past is my present x)
Oddly enough i watched the 2017 video, came here and felt this was better explained. But I did have to read the prototype MDN documentation first so I understand the call() method. It's not that hard to understand. But yeah, using class extends is easier for sure. I learned that way first actually and realize that it's much better to get the original way first, then the class way.
Do you have courses on Udemy or something?
Also, one of those folks that saw the 9.19 and got straight to this, I guess no knowledge is wasted knowledge huh?
Thank your for your work!
Wow! Hahaha~! What a long hiatus! I'm glad i watched that and this video today.
Let's not forget that this gives an advantage in performances because we are adding members method to the prototype instead of recreating them in the constructor every time we instantiate the Constructors ..
Your videos are amazing Dan, but I noticed, you always need to refresh your browser to update the page. As you seem to be using Visual Studio Code, you could install the Live Server extension and then, every time you save, the browser will be automatically refreshed.
only one video has allured me enough to subscribe.
So great at explaining things . It really made sense to me now😄. Thank you
I came from your 9.19 prototype video from your intelligence and learning course. :)
I just came from 9.19 :)
Thanks for your videos there are amazing !
Thank you! Now it`s clear for me!
Thank you for following up on your video I'm lucky to be in 2019 seeing both so no wait for me! lol
Excellent reminder to a topic we take for granted :)
Thanks, good video. I write prototype syntax all the time, but class is a lot better to setup inheritance of scope. Even though type of everything is either object or function. First language, sounds like other languages might be less confusing lol.
I can see why this one was left behind... thank goodness for EC6
At 14:10 you can use Object.setPrototypeOf(Confetti.prototype, Paritcle.prototype)
Dan, I have a suggestion. I think it's going to be easier for newbies to follow if when you say "I wanna create a new class/object", you write the code on a separate file. I think in that way, the viewers can have this feeling of object oriented. I think writing 2 classes in one file makes it feel like they're all just functions of 1 object.
This is a good suggestion! I agree! The good news is that this is the approach I take in the next video on this subject.
@@TheCodingTrain nice! Can't wait for that episode (also can't wait for Captain Marvel, sorry off topic lol)
object inheritance goes deeper than file separation
@@oleksandr8371 im only referring to "feeling" or "intuition". Go technical all you want.
I too just came from the 9.19 video :) Awesome.
I get that you said that this is the old way of writing JavaScript but if you have updated on how the newer ways work and if you have videos or if you could guide me to some article or topics I could refer to on the newer way of writing JS Code, I would really appreciate that. BTW Love your work and thank you so much. Doing my best to learn JS so that it helps me land a job!
Good refresher for a javascript god like me. Thank you!
Please do video about solving Eloquent JS problems
yes, im of the amazing category Dan :)
i.e, coming from 9.19
So one creates a pointer to the same prototype and the other a separate copy of it :) nice, thanks
You are a legend❤
Your are a genius
Love your videos and the visuals! Thank you
I think this is due to objectA = objectB is passing a reference, not making a new objectA with the same stuff objectB has. This is just basic JavaScript 'problem' and a solution.
Don't worry, we all have that very human reaction to JS prototypes like @ 4:33
jaja es verdad, no se entiende nada de js
I just watched that video, thank god I didn't watch at that time, I'd died waiting for so long! Anyways thanks for the great content :)
Be amazed!
This is cool. Looking forward to next video.
I think setting the constructor property is necessary to get instanceof to behave properly.
1:48 yes thankfully
I watched the other video ended up here - just searched for "9.20" and it popped up!
Same energy from 2 years ago!
Great explanation! Thanks !!
1:40 okay so here I am, this happened to me and this is really kind of amazing😂😂
HTMLAnyElement
HTMLElement
Element
Node
Object
Yes, HTML DOM elements have that long chain.
I literally just watched that video and ended up here.
THANKS THE LORD THAT THIS VIDEO EXISTS ELSE IT WAS TIME TO FAIL THAT EXAM LOL
fabulous videos sir
It was kind of amazing!!!
Here's one time traveler who has jumped 2 years, more than 2 years later.
From Italy. In a forest during a summer rain.
jajaj very well explained with humor
4:32 This is nothing. Before ES6 super() was a thing I used to do:
this.__proto__.__proto__.constructor.apply(this, arguments);
Which calls the parent constructor like super() in java and you don't need to specify the parent class explicitly.
Lucky me
Thanks sir love you
love it
Is there anything wrong with using the following instead of Object.create ? I'm trying to figure out how Object.create is special
for(var k in Particle.prototype) { Confetti.prototype[k] = Particle.prototype[k]; }
Confetti.prototype.show = myAwesomeConfettiFunction;
It´s confusing but u have skills to convey the conecpts. The rest we must go after. Nothing is easy...
It's not possible to do something like Confetti.prototype.prototype = Particle.particle;?
Prototypes have a prototype? Yes.
Can't we just say "Confetti.prototype = new Particle()". Confetti has own show() and update() functions. Also we don't have to call particle's constructor in Confetti function.
Just came from the JS prototype video lol
Which font do u use ?
Love from Italy!!!! ❤️❤️❤️❤️ 🇮🇹 #LoveFromItaly7
Boii
It is mathematically impossible to explain JS's prototype system.
Coming right after 9.19, it seems to me that he didnt clear the whiteboard for 2 years :D
Look away! im not 1st
Hi dan....ur awesome..love from india...how can i meet uh????
im looking away as i start this video..
perhaps i ought to look this time... or at least look more closely lol
Isn't this a weak point of JavaScript; that you have to resort to syntactical sugar because the prototype paradigm which it is based on is ugly and convoluted
Why u so charged 😁
this video is not for beginner, i guess??
Hello 🌈 rainbow
Two years later lol
everything is fine except overexcitement
😨
+ JS sucks
- Go learn it
*several days later*
+ JS sucks
- I know
Why are you using prototypes in 2019? Move on to modern javascript with classes & constructors.
Because classes are just pointless hacks over the prototype system and they result in (somehow) more confusion for people coming from a classical language?
This is exactly the point of the video, to show how obsolete and confusing old semantics were. He will show new way in the next video
Because "modern javascript", when talking about classes, is (as Daniel says) just sintactic sugar. It does not modify, updates, makes better or fixes any othe the 'problems' with prototypal inheritance.
Please, read 'You Don´t Know Javascript', a free (and very technical) text that wonderfully explains how prototypal inheritance works and the common misconceptions about it. The problems with prototypal inheritance appear only when people still think that prototypes and classes are the same animals and should have identical behaviors. They are not. The dynamic nature of JS fits very well with prototypal inheritance, where you can change everything about an object during its lifetime, including its constructor and its prototype (not to mention its properties, and I say intentionally properties since in JS objects just have properties that can be either data or functions, and if they are functions they are unrelated to the owning object and can have a life independent of it).
The broken thing is not the mechanism of prototypal inheritance, but the effort make it look like class inheritance, starting with the existance of the so called 'constructor functions', the 'new' operator and the way the instances are linked to the prototype through the constructor functions.
Commercial code-bases with prototypes still exist. This is valuable to many.
Ya, use ES6 classes, prototype is dumb....
dreadful
You're my hero!