Applet Orchard

9.16: Prototypes in Javascript – p5.js Tutorial

[ad_1]
In this video, I examine the concept of “Prototype” in the JavaScript programming language. I look at how you can attach methods to objects via prototype (for both objects of existing JS types or your own). I also discuss the “prototype chain” and prototypal inheritance.

Support this channel on Patreon:

Send me your questions and coding challenges!:

Contact:
Twitter:
The Coding Train website:

Links discussed in this video:
My Steering Behaviors on the word “Train” video:
Douglas Crockford’s video on prototypes(and many more subjects):
Prototypes on MDN:

Source Code for the all Video Lessons:

p5.js:
Processing:

For More Coding Challenges:
For an Intro to Programming using p5.js:

Help us caption & translate this video!

Posted

in

by

appletorchard

Tags:

Comments

42 responses to “9.16: Prototypes in Javascript – p5.js Tutorial”

  1. Ark70 Avatar
    Ark70

    Thank's a lot I couldn't understand the matter with the .prototype when I searched for inheritance in js

    Reply
  2. Kim Avatar
    Kim

    Also, 10:38. No operator overloading 🙁

    Reply
  3. Kim Avatar
    Kim

    The p5 functions are in global namespace. Not a fan of that

    Reply
  4. Kim Avatar
    Kim

    Wait, isn't this the flyweight pattern?

    Reply
  5. Kim Avatar
    Kim

    So if I wanted to attach a value to all instances of that type, I'd be able to use proto? That seems really useful! Does not exist in C++

    Reply
  6. Kim Avatar
    Kim

    JS syntax is so puzzling to me.. a) why is there no class keyword, but instad a function that has a this property? b) when declaring variables inside a class, why don't you use the var keyword? c) why is everything public always? That is so horrible coming from C++

    Reply
  7. sitra Asaye Avatar
    sitra Asaye

    is p2 a separate object or an instance of p1

    Reply
  8. cmcdonough mcdonough Avatar
    cmcdonough mcdonough

    Thanks man. Your videos are so funny and educational. I've learned so much and I really appreciate it.

    Reply
  9. Josh Wil Avatar
    Josh Wil

    This was an amazing explanation. Thank you !!

    Reply
  10. Andrew Erwin Avatar
    Andrew Erwin

    I have been hearing people say for years that js is actually an object oriented language… I think the fact that there are all of these tutorials explaining very basic OOP concepts since ES2015 (and especially since ES6) sort of proves that it wasn't! 🙂

    Reply
  11. SherlockMen Avatar
    SherlockMen

    You're amazing

    Reply
  12. M Barighzaai Avatar
    M Barighzaai

    Did the inheritance video ever come out?

    Reply
  13. Gustavo Esteves Avatar
    Gustavo Esteves

    Awesome, awesome, awesome thank you!

    Reply
  14. darkfafi Avatar
    darkfafi

    You are the best teacher a programmer could wish for <3

    Reply
  15. Molto Bene Avatar
    Molto Bene

    Don't delete this video it's GREAT! 🙂 Thank you!

    Reply
  16. Alexander Wintschel Avatar
    Alexander Wintschel

    Eureka!

    Reply
  17. Junior Dev4Life Avatar
    Junior Dev4Life

    You are brilliant! I have struggled with understanding prototypes and now I do ! I learn so much from your videos. Thank you so much

    Reply
  18. Martin Knop Avatar
    Martin Knop

    Has the followup video never been made? Or am I just crap at finding it?

    Reply
  19. OrOrg Avatar
    OrOrg

    p…
    p2…

    I see how they came up with the name p5.

    Reply
  20. Tushar Sadhwani Avatar
    Tushar Sadhwani

    18:05 holy shit that sounded terrifying

    Reply
  21. Tushar Sadhwani Avatar
    Tushar Sadhwani

    Could I use a closure to serve the purpose of a prototype?

    Reply
  22. Xav Own Avatar
    Xav Own

    this is what i need, thank you..

    Reply
  23. Tran Duc Avatar
    Tran Duc

    So so fantastic (y). You give me a deeper understanding about prototypes. Followed you 😉

    Reply
  24. Nick Bence Avatar
    Nick Bence

    Maybe it's something with Vector, but why

    p5.Vector.prototype.double

    shouldn't it be JUST

    Vector.prototype.double

    ???

    Also, awesome video! Thanks for putting this together! Big fan!

    Reply
  25. deadxleaves Avatar
    deadxleaves

    FINALLY. Thanks for the informative video. Finally figured out prototypes.

    Reply
  26. Makopa Avatar
    Makopa

    this is the teacher we need. makes boring subject very interesting

    Reply
  27. Sean Avatar
    Sean

    Hey Big D. I am using p5 to create interactive models embedded in tablet textbooks for South African government school pupils. I am currently going through your Nature of Code Course but in p5.

    Please will you put out the videos on JavaScript inheritance and polymorphism.

    Thank you for everything you have put into the world. You make learning to code human.

    Reply
  28. Hugo Perea Avatar
    Hugo Perea

    Great Video. I'm confused about proto. You said that the things bellow proto were specific to the single instance. Does proto point to the original functions' prototype? I'm looking at the definition and it says that Object.prototype.proto "Points to the object which was used as prototype when the object was instantiated." What is the parent of the proto in the single instance? thanks fam

    Reply
  29. positive mental attitude Avatar
    positive mental attitude

    i love whiteboard session. i immediately understand what you said

    Reply
  30. Ee Venn Soh Avatar
    Ee Venn Soh

    Will be great if we can have a video on Class 😀

    Reply
  31. Ugo Arzur Avatar
    Ugo Arzur

    I wish u were my teacher when I used to learn at school. U're fantastic !
    Prototypes has no secrets for me now !

    Reply
  32. P-YAN Avatar
    P-YAN

    So just to be clear, prototypes are a way reusing functions within an object that might be repeated within other objects?

    if we created another object Square then called square.show in draw, will it use the properties in Particle.prototype.show (point x and y of particle) and display them too?

    Reply
  33. entalpa Avatar
    entalpa

    fuck es6 they want to copy Java with classes

    Reply
  34. entalpa Avatar
    entalpa

    this is es5 not es6.

    Reply
  35. Bjarke Sporring Avatar
    Bjarke Sporring

    I fucking love your style of teaching.
    Thanks for not being boring!

    Reply
  36. Yevhenii Herasymchuk Avatar
    Yevhenii Herasymchuk

    I think we should share this channel in all tutorials for beginners. Information is so useful. I'm happy that I can learn it with you. Thank you!))

    Reply
  37. Claudius Rauter Avatar
    Claudius Rauter

    oh man, i really love your videos, please never stop!

    Reply
  38. Dylan James Avatar
    Dylan James

    now on to using foreach! haha
    great explanation of prototype.

    Reply
  39. Mike Tuckerit Avatar
    Mike Tuckerit

    Dude, you are a legend, beyond, fucking MEASURE!

    Reply
  40. Zeke Slavens Avatar
    Zeke Slavens

    I NEED HELP
    I've been dabbling in ms notepad bat script and im trying to make a deltaV calculator ive gotten to where they can enter their own variables but i dont know how to get Note to do the formula
    (this is deltav if you dont know) https://en.wikipedia.org/wiki/Delta-v
    this is what i have so far-
    @echo off
    Title dV Calculator
    set fm= 0
    set dm= 0
    set isp= 0
    set gravity= 9.8
    echo !!MAKE SURE YOU GO IN NUMARICAL ORDER!! (1,2,3)
    :all1
    echo Press 1 to enter your "Full Mass"
    Echo Press 2 To enter your "dry mass"
    echo press 3 to enter your "isp"
    set /p dv=
    if %dv%== 1 goto :fm
    if %dv%== 2 goto :dm
    if %dv%== 3 goto :isp
    :fm
    echo Enter your full mass
    set /p fm=
    echo Your full mass is %fm%
    pause
    cls
    goto :all1
    :dm
    echo Enter your dry mass
    set /p dm=
    echo Your dry mass is %dm%
    pause
    cls
    goto :all1
    :isp
    echo Enter your isp
    set /p isp=
    echo Your isp is %isp%
    pause
    cls
    goto :result
    :result
    cls
    echo This is your DeltaV!
    pause
    cls
    goto :all1
    pause

    Reply
  41. Limberkind Avatar
    Limberkind

    you are absolute Legend!

    Reply
  42. abeechr Avatar
    abeechr

    Yet another gem. I too can't wait for the inheritance follow-up. thanks Dan!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *