D4mations.com

9.19: 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: https://patreon.com/codingtrain

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/

Links discussed in this video:
My Steering Behaviors on the word “Train” video: https://youtu.be/4hA7G3gup-4
Douglas Crockford’s video on prototypes(and many more subjects): https://youtu.be/DwYPG6vreJg
Prototypes on MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code

p5.js: https://p5js.org/
Processing: https://processing.org

For More Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
For an Intro to Programming using p5.js: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Help us caption & translate this video!

http://amara.org/v/4XSk/

Original source

d4mer

, , , , , , , , , , ,

37 responses to “9.19: Prototypes in Javascript – p5.js Tutorial”

  1. Every now and then I come across your videos randomly. You are by far the best at explaining dry, overly- complex topics. I'm an experienced full-stack developer. I learn something every time time I watch one of your videos. I've taken university courses, professional development training, online subscriptions to e-learning sites. Your approach blows them all out of the water. Clear, fun and to the point. Thank you. I pick up more from you in 20 minutes than I do from a day of reading MDN documentation. Anyone disagrees, I suggest reading https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes, and then watching this video. Cheers.

  3. So when working in ES5, it's often good to keep individual properties inside the constructor and to put common methods within the prototype? Javascript seems to have a lot of workarounds needed to implement OOP. Prototypes, this, bind, call etc. It's almost like it wasn't intended to be an OOP language.

  6. Hey. I have been watching your tutorials for quite a time now.Some functions are not present in the p5 reference. How do I know about them?

    P.S – I like your coding challenges. They are very informative.

  29. //Say user-1 did this
    const product1=new Object({
    name: 'user-1'
    })
    Object.prototype.hasOwnProperty=()=>'This is the new function'
    console.log(product1.hasOwnProperty(name))// o/p: This is the new function

    //Say user-2 did this
    const product2=new Object({
    name: 'user-2'
    })
    console.log(product2.hasOwnProperty(name))// o/p: This is the new function

    Doubt #1
    Ideally user-1 shouldn't have been allowed to add new property to Object object's prototype right ? Because in above example when user-2 wanted to check whether 'name' property exists he is getting different o/p which was set by user-1!!!

    Doubt #2
    product1.prototype.hasOwnProperty=()=>'This is the new function'
    Why is this not allowed ? product1 is an instance of Object, so it is also an object, so even it should have [[Prototype]] property!

    TIA.

Leave a Reply