9.20: Look away! Inheritance with Prototype in JavaScript - p5.js Tutorial

Поділитися
Вставка
  • Опубліковано 19 гру 2024

КОМЕНТАРІ • 138

  • @Lee14G
    @Lee14G 4 роки тому +26

    I’ve paid for courses on Udemy that didn’t explain this concept clearly and here it is for free. Thank you JS Yoda.

  • @tunafish9112
    @tunafish9112 5 років тому +138

    Lucky me, I just came from your prototype video

  • @conradodelcarlo3332
    @conradodelcarlo3332 2 роки тому +6

    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!!

  • @ekaansh
    @ekaansh 5 років тому +6

    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.

  • @arameskchannel
    @arameskchannel 5 років тому +28

    Never knew “square()” was a thing, I always used rect() and now I can save 0.5s each time, thank you Dan :)

  • @brunodev471
    @brunodev471 2 роки тому

    I've just watched the last video hahah. Happy that you came back 2 years later to finish it

  • @csr.shimada
    @csr.shimada 5 років тому +8

    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

  • @abhishekagrawal4046
    @abhishekagrawal4046 4 роки тому +1

    You are the best I have ever seen. You are a LEGEND.

  • @alifox6056
    @alifox6056 4 роки тому +3

    I have been looking for the explanation of the "Object.create()" so long, and finally I found the BEST one. Thank you !

  • @alinawaz4034
    @alinawaz4034 5 років тому +16

    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!!

    • @TheCodingTrain
      @TheCodingTrain  5 років тому +8

      AMAZING

    • @chuz6
      @chuz6 5 років тому +1

      HAHAHAHAHA me too!!!

    • @battosaijenkins946
      @battosaijenkins946 5 років тому +4

      @@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!!

  • @TheJpwzrd
    @TheJpwzrd 2 роки тому

    I did, in fact, come from 9.19 thank you for completing the video series!

  • @blackchaos23
    @blackchaos23 5 років тому +7

    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.

  • @zacharymcarthur9013
    @zacharymcarthur9013 5 років тому +2

    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.

  • @jeff-creations
    @jeff-creations Рік тому

    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!

  • @nrnoble
    @nrnoble 2 роки тому

    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.😁

  • @codelearner5908
    @codelearner5908 5 років тому

    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!

  • @shanneykar
    @shanneykar 3 роки тому

    Good thing I discovered your channel today, didn't have to wait couple years. :D Your teaching style is rare and awesome.

  • @heksqer1022
    @heksqer1022 5 років тому

    This was a crystal clear explanation of Prototype chains.

  • @MrDoroh
    @MrDoroh 5 років тому +14

    SethBling's redstone timer in your recommened videos. I see you are a man of culture as well

  • @JorgeDecuir
    @JorgeDecuir 2 роки тому

    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!

  • @jagmohanmandre7447
    @jagmohanmandre7447 4 роки тому

    At 14:10 you can use Object.setPrototypeOf(Confetti.prototype, Paritcle.prototype)

  • @minutehistory3032
    @minutehistory3032 4 роки тому

    Thank you for following up. Watching this in 2020. You're incredibly helpful in my path of becoming a js programmer!

  • @TheAlfa127
    @TheAlfa127 4 роки тому +1

    3:55 I'have been coding games who needs to be compatible with Internet Explorer, your past is my present x)

  • @electric.fantasy.87
    @electric.fantasy.87 3 роки тому

    so glad i am late enough to watch both videos successively :)

  • @GabrielLima-og5qd
    @GabrielLima-og5qd 5 років тому +2

    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 😂

  • @remold6149
    @remold6149 4 роки тому

    I just came from 9.19 :)
    Thanks for your videos there are amazing !

  • @shupesmerga4694
    @shupesmerga4694 5 років тому +1

    Wow! Hahaha~! What a long hiatus! I'm glad i watched that and this video today.

  • @tonyblack1981
    @tonyblack1981 4 роки тому

    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.

  • @aquibafzal
    @aquibafzal 4 роки тому

    only one video has allured me enough to subscribe.

  • @SalihZain
    @SalihZain 5 років тому

    Excellent reminder to a topic we take for granted :)

  • @ArjunSingh-oo1mh
    @ArjunSingh-oo1mh 4 роки тому +1

    ```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.

  • @WistrelChianti
    @WistrelChianti 2 роки тому +1

    I can see why this one was left behind... thank goodness for EC6

  • @angeleahhoeppner3148
    @angeleahhoeppner3148 4 роки тому

    I came from your 9.19 prototype video from your intelligence and learning course. :)

  • @jAMES-xy6wh
    @jAMES-xy6wh 4 роки тому

    I too just came from the 9.19 video :) Awesome.

  • @carefree_ladka
    @carefree_ladka 2 роки тому

    So great at explaining things . It really made sense to me now😄. Thank you

  • @WolfKelley1
    @WolfKelley1 5 років тому +2

    Thank you for following up on your video I'm lucky to be in 2019 seeing both so no wait for me! lol

  • @miguelperezpal
    @miguelperezpal 5 років тому

    Good refresher for a javascript god like me. Thank you!

  • @yaolegoleynik
    @yaolegoleynik 2 роки тому

    Thank you! Now it`s clear for me!

  • @evy2710
    @evy2710 5 років тому

    Love your videos and the visuals! Thank you

  • @nick_jacob
    @nick_jacob 4 роки тому

    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.

  • @RADIOSCATRACHASUTAN
    @RADIOSCATRACHASUTAN 4 роки тому

    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 ..

  • @maniac5411
    @maniac5411 3 роки тому

    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 :)

  • @Metempsychopath
    @Metempsychopath 5 років тому

    This is cool. Looking forward to next video.

  • @d14nc4r0
    @d14nc4r0 5 років тому

    So one creates a pointer to the same prototype and the other a separate copy of it :) nice, thanks

  • @grainfrizz
    @grainfrizz 5 років тому +2

    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.

    • @TheCodingTrain
      @TheCodingTrain  5 років тому +3

      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.

    • @grainfrizz
      @grainfrizz 5 років тому

      @@TheCodingTrain nice! Can't wait for that episode (also can't wait for Captain Marvel, sorry off topic lol)

    • @oleksandr8371
      @oleksandr8371 5 років тому

      object inheritance goes deeper than file separation

    • @grainfrizz
      @grainfrizz 5 років тому

      @@oleksandr8371 im only referring to "feeling" or "intuition". Go technical all you want.

  • @anjanakeshavdas294
    @anjanakeshavdas294 5 років тому

    THANKS THE LORD THAT THIS VIDEO EXISTS ELSE IT WAS TIME TO FAIL THAT EXAM LOL

  • @russellabraham9208
    @russellabraham9208 4 роки тому

    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.

  • @thetastefultoastie6077
    @thetastefultoastie6077 5 років тому +1

    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.

  • @anupamdash1102
    @anupamdash1102 3 роки тому

    yes, im of the amazing category Dan :)
    i.e, coming from 9.19

  • @hrantbaloyan4652
    @hrantbaloyan4652 5 років тому +2

    Please do video about solving Eloquent JS problems

  • @RedEyedJedi
    @RedEyedJedi 5 років тому

    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.

  • @Genesis0_o
    @Genesis0_o Рік тому

    You are a legend❤

  • @Flackon
    @Flackon 5 років тому +5

    Don't worry, we all have that very human reaction to JS prototypes like @ 4:33

  • @tsarprince
    @tsarprince 2 роки тому

    1:40 okay so here I am, this happened to me and this is really kind of amazing😂😂

  • @thisissahilkhosla
    @thisissahilkhosla 5 років тому

    I watched the other video ended up here - just searched for "9.20" and it popped up!

  • @6866yash
    @6866yash 4 роки тому +2

    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!

  • @halflaugh747
    @halflaugh747 5 років тому

    1:48 yes thankfully

  • @vicliur2
    @vicliur2 5 років тому

    Great explanation! Thanks !!

  • @Prathameshsb
    @Prathameshsb 4 роки тому

    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!

  • @DiggOlive
    @DiggOlive 5 років тому

    I think setting the constructor property is necessary to get instanceof to behave properly.

  • @Mohammed-tg4bj
    @Mohammed-tg4bj 4 роки тому

    It's not possible to do something like Confetti.prototype.prototype = Particle.particle;?

  • @xavierdupont5772
    @xavierdupont5772 5 років тому

    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;

  • @lorforlinux
    @lorforlinux 5 років тому +1

    fabulous videos sir

  • @Prashantkumar-hy1no
    @Prashantkumar-hy1no 4 роки тому

    It was kind of amazing!!!

  • @rohitraut3980
    @rohitraut3980 5 років тому

    Which font do u use ?

  • @josepena-bk8wd
    @josepena-bk8wd 4 роки тому

    Your are a genius

  • @kresimircosic3753
    @kresimircosic3753 4 роки тому +1

    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.

  • @63montywilliams50
    @63montywilliams50 2 роки тому

    Same energy from 2 years ago!

  • @Nrc599382
    @Nrc599382 3 роки тому

    Here's one time traveler who has jumped 2 years, more than 2 years later.
    From Italy. In a forest during a summer rain.

  • @danielluna7648
    @danielluna7648 3 роки тому

    I literally just watched that video and ended up here.

  • @amogus7
    @amogus7 4 роки тому

    HTMLAnyElement
    HTMLElement
    Element
    Node
    Object
    Yes, HTML DOM elements have that long chain.

  • @gjgiraldo1
    @gjgiraldo1 4 роки тому

    jajaj very well explained with humor

  • @cinnybun739
    @cinnybun739 4 роки тому +1

    Just came from the JS prototype video lol

  • @JasonJBrunet
    @JasonJBrunet 9 місяців тому

    Be amazed!

  • @hi-techlogics3831
    @hi-techlogics3831 3 роки тому

    Lucky me
    Thanks sir love you

  • @amogus7
    @amogus7 4 роки тому

    Prototypes have a prototype? Yes.

  • @slyer7695
    @slyer7695 5 років тому

    Love from Italy!!!! ❤️❤️❤️❤️ 🇮🇹 #LoveFromItaly7

  • @Hamzul.
    @Hamzul. 3 роки тому +1

    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.

  • @yacinehch4533
    @yacinehch4533 5 років тому

    love it

  • @paulosilva-dm1qb
    @paulosilva-dm1qb Рік тому

    It´s confusing but u have skills to convey the conecpts. The rest we must go after. Nothing is easy...

  • @clipsus_clips
    @clipsus_clips 5 років тому +1

    Look away! im not 1st

  • @aidanprattewart
    @aidanprattewart 5 років тому +1

    It is mathematically impossible to explain JS's prototype system.

  • @amanchauhan4356
    @amanchauhan4356 5 років тому

    Hi dan....ur awesome..love from india...how can i meet uh????

  • @anupammaurya6624
    @anupammaurya6624 3 роки тому

    Why u so charged 😁

  • @kite4792
    @kite4792 3 роки тому

    im looking away as i start this video..

    • @kite4792
      @kite4792 3 роки тому

      perhaps i ought to look this time... or at least look more closely lol

  • @aravindpvk
    @aravindpvk 3 роки тому

    Coming right after 9.19, it seems to me that he didnt clear the whiteboard for 2 years :D

  • @bhargavgohil25
    @bhargavgohil25 4 роки тому +1

    this video is not for beginner, i guess??

  • @natalianub6776
    @natalianub6776 5 років тому +1

    Boii

  • @HossynAssghary
    @HossynAssghary 5 років тому

    Hello 🌈 rainbow

  • @thesuperiorman8342
    @thesuperiorman8342 4 роки тому

    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

  • @TheJpwzrd
    @TheJpwzrd 2 роки тому

    Two years later lol

  • @khukuislam4440
    @khukuislam4440 2 роки тому

    everything is fine except overexcitement

  • @wlin6325
    @wlin6325 4 роки тому

    😨

  • @christianmartinez2179
    @christianmartinez2179 4 роки тому

    + JS sucks
    - Go learn it
    *several days later*
    + JS sucks
    - I know

  • @lennethe5299
    @lennethe5299 5 років тому +3

    Why are you using prototypes in 2019? Move on to modern javascript with classes & constructors.

    • @aidanprattewart
      @aidanprattewart 5 років тому

      Because classes are just pointless hacks over the prototype system and they result in (somehow) more confusion for people coming from a classical language?

    • @MrDoroh
      @MrDoroh 5 років тому

      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

    • @miguelarribas9990
      @miguelarribas9990 5 років тому

      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.

    • @colint5103
      @colint5103 5 років тому +1

      Commercial code-bases with prototypes still exist. This is valuable to many.

  • @Seeseeificationable
    @Seeseeificationable 3 роки тому

    Ya, use ES6 classes, prototype is dumb....

  • @r4ndsen
    @r4ndsen 5 років тому

    dreadful