9.16: Prototypes in Javascript – p5.js Tutorial

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

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:


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

Help us caption & translate this video!






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

  1. Ark70 Avatar

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

  2. Kim Avatar

    Also, 10:38. No operator overloading πŸ™

  3. Kim Avatar

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

  4. Kim Avatar

    Wait, isn't this the flyweight pattern?

  5. Kim Avatar

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

  6. Kim Avatar

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

  7. sitra Asaye Avatar

    is p2 a separate object or an instance of p1

  8. cmcdonough mcdonough Avatar

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

  9. Josh Wil Avatar

    This was an amazing explanation. Thank you !!

  10. Andrew Erwin Avatar

    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! πŸ™‚

  11. M Barighzaai Avatar

    Did the inheritance video ever come out?

  12. Gustavo Esteves Avatar

    Awesome, awesome, awesome thank you!

  13. darkfafi Avatar

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

  14. Molto Bene Avatar

    Don't delete this video it's GREAT! πŸ™‚ Thank you!

  15. Junior Dev4Life Avatar

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

  16. Martin Knop Avatar

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

  17. OrOrg Avatar


    I see how they came up with the name p5.

  18. Tushar Sadhwani Avatar

    18:05 holy shit that sounded terrifying

  19. Tushar Sadhwani Avatar

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

  20. Xav Own Avatar

    this is what i need, thank you..

  21. Tran Duc Avatar

    So so fantastic (y). You give me a deeper understanding about prototypes. Followed you πŸ˜‰

  22. Nick Bence Avatar

    Maybe it's something with Vector, but why


    shouldn't it be JUST



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

  23. deadxleaves Avatar

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

  24. Makopa Avatar

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

  25. Sean Avatar

    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.

  26. Hugo Perea Avatar

    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

  27. positive mental attitude Avatar

    i love whiteboard session. i immediately understand what you said

  28. Ee Venn Soh Avatar

    Will be great if we can have a video on Class πŸ˜€

  29. Ugo Arzur Avatar

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

  30. P-YAN Avatar

    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?

  31. entalpa Avatar

    fuck es6 they want to copy Java with classes

  32. entalpa Avatar

    this is es5 not es6.

  33. Bjarke Sporring Avatar

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

  34. Yevhenii Herasymchuk Avatar

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

  35. Claudius Rauter Avatar

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

  36. Dylan James Avatar

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

  37. Mike Tuckerit Avatar

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

  38. Zeke Slavens Avatar

    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 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
    echo Enter your full mass
    set /p fm=
    echo Your full mass is %fm%
    goto :all1
    echo Enter your dry mass
    set /p dm=
    echo Your dry mass is %dm%
    goto :all1
    echo Enter your isp
    set /p isp=
    echo Your isp is %isp%
    goto :result
    echo This is your DeltaV!
    goto :all1

  39. Limberkind Avatar

    you are absolute Legend!

  40. abeechr Avatar

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

Leave a Reply

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