title
9.19: Prototypes in Javascript - p5.js Tutorial

description
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/ 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '9.19: Prototypes in Javascript - p5.js Tutorial', 'heatmap': [{'end': 293.049, 'start': 264.921, 'weight': 0.707}, {'end': 619.87, 'start': 592.142, 'weight': 1}], 'summary': "Tutorial on 'prototypes in javascript - p5.js' covers the understanding and usage of prototypes in javascript, constructors, prototype chain, object chaining with p5 vector object, troubleshooting uncaught type errors, and modifying a library using prototypes, providing valuable insights for javascript programmers.", 'chapters': [{'end': 459.199, 'segs': [{'end': 83.7, 'src': 'embed', 'start': 58.475, 'weight': 0, 'content': [{'end': 66.659, 'text': 'And so I wanted to try to make a video to at least cover what is a prototype in JavaScript, and why is it kind of relevant, or why might you use it,', 'start': 58.475, 'duration': 8.184}, {'end': 78.196, 'text': 'and how does it relate to this concept of inheritance and maybe also this concept of Polymorphism?', 'start': 66.659, 'duration': 11.537}, {'end': 80.418, 'text': 'Okay, whatever, I gotta workshop this.', 'start': 78.857, 'duration': 1.561}, {'end': 81.739, 'text': 'This could use some work.', 'start': 81.018, 'duration': 0.721}, {'end': 83.7, 'text': "But I'm trying, I'm trying new stuff, new material.", 'start': 81.779, 'duration': 1.921}], 'summary': 'Video covers javascript prototype, inheritance, and polymorphism. new material being tried.', 'duration': 25.225, 'max_score': 58.475, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah858475.jpg'}, {'end': 181.248, 'src': 'embed', 'start': 151.581, 'weight': 1, 'content': [{'end': 158.523, 'text': 'The new keyword indicates to JavaScript that, aha, that function that you wrote is not a regular.', 'start': 151.581, 'duration': 6.942}, {'end': 160.943, 'text': 'I mean all functions are the same.', 'start': 158.523, 'duration': 2.42}, {'end': 164.704, 'text': "It's a function, it's a function, it's a function, it's a function, it's a function, it's a function.", 'start': 162.003, 'duration': 2.701}, {'end': 172.026, 'text': 'But functions can be executed in a slightly different way as constructor function if you use the new keyword.', 'start': 165.104, 'duration': 6.922}, {'end': 181.248, 'text': 'The new keyword says execute that function as a constructor function, meaning make a new object and assign that object to the keyword this.', 'start': 172.066, 'duration': 9.182}], 'summary': "The 'new' keyword in javascript executes functions as constructor functions, creating and assigning a new object to the keyword 'this'.", 'duration': 29.667, 'max_score': 151.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8151581.jpg'}, {'end': 293.049, 'src': 'heatmap', 'start': 264.921, 'weight': 0.707, 'content': [{'end': 271.704, 'text': "So I'm going to add a function to the object where I draw it as a point.", 'start': 264.921, 'duration': 6.783}, {'end': 277.887, 'text': "And actually, what I'm going to do is I'm going to say var p, just so I don't have to keep typing that in the console, p equals new particle.", 'start': 271.744, 'duration': 6.143}, {'end': 281.869, 'text': "So now I'm going to load, reload the page, and I'm going to type p again.", 'start': 278.968, 'duration': 2.901}, {'end': 283.81, 'text': 'So now I have, come on.', 'start': 282.69, 'duration': 1.12}, {'end': 285.811, 'text': 'Whoa, OK, something went wrong here.', 'start': 284.471, 'duration': 1.34}, {'end': 286.952, 'text': 'Oh, there it is, sorry.', 'start': 286.171, 'duration': 0.781}, {'end': 288.986, 'text': "It's there.", 'start': 288.686, 'duration': 0.3}, {'end': 290.968, 'text': 'So now it has three properties.', 'start': 289.327, 'duration': 1.641}, {'end': 293.049, 'text': 'Show, which is a function.', 'start': 291.428, 'duration': 1.621}], 'summary': 'Adding a function to the object to draw as a point, resulting in three properties including a function.', 'duration': 28.128, 'max_score': 264.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8264921.jpg'}], 'start': 0.336, 'title': 'Javascript prototypes and constructors', 'summary': "Covers the understanding of prototypes in javascript, their relevance, usage, and relation to inheritance and polymorphism. it also explains javascript constructor functions, demonstrating the use of the 'new' keyword and exploring the concept of prototypes for efficient code implementation.", 'chapters': [{'end': 102.159, 'start': 0.336, 'title': 'Understanding prototypes in javascript', 'summary': 'Discusses the concept of prototypes in javascript, including its relevance, usage, and relation to inheritance and polymorphism, while also showcasing a coding challenge involving the creation of a word train using prototype-based syntax.', 'duration': 101.823, 'highlights': ['The video covers the concept of prototypes in JavaScript, discussing its relevance, usage, and relation to inheritance and polymorphism.', 'The speaker attempts to demonstrate prototypes by showcasing a coding challenge involving the creation of a word train using prototype-based syntax.', 'The speaker expresses a degree of uncertainty and acknowledges the need for improvement in presenting the topic.']}, {'end': 459.199, 'start': 102.159, 'title': 'Javascript constructor functions', 'summary': "Explains the concept of constructor functions in javascript, demonstrating the use of the 'new' keyword to create objects with specific properties and functions, and explores the concept of prototype for more efficient code implementation.", 'duration': 357.04, 'highlights': ["The 'new' keyword in JavaScript indicates a constructor function, allowing the creation of objects with specific properties and functions. By using the 'new' keyword, a constructor function in JavaScript can create objects with specific properties and functions, providing a way to differentiate the function's execution and its binding to the 'this' keyword.", "Demonstrating the use of the 'show' function for displaying the objects, and the concept of unnecessary duplication of individual 'show' functions for each object. The explanation delves into the inefficiency of providing individual 'show' functions for each object and considers the idea of having a common 'show' function for multiple objects, leading to the exploration of the concept of prototype for more efficient code implementation.", 'Introduction to the concept of prototype in JavaScript and its implementation for more efficient code. The discussion introduces the concept of prototype in JavaScript and its implementation to streamline code efficiency, showcasing the assignment of functions to the prototype property of a constructor function.']}], 'duration': 458.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8336.jpg', 'highlights': ['The video covers the concept of prototypes in JavaScript, discussing its relevance, usage, and relation to inheritance and polymorphism.', "The 'new' keyword in JavaScript indicates a constructor function, allowing the creation of objects with specific properties and functions.", 'Introduction to the concept of prototype in JavaScript and its implementation for more efficient code.']}, {'end': 640.007, 'segs': [{'end': 492.041, 'src': 'embed', 'start': 460.079, 'weight': 0, 'content': [{'end': 467.222, 'text': "So what I'm suggesting here is this object, all objects, p1 has an x and has a y.", 'start': 460.079, 'duration': 7.143}, {'end': 472.964, 'text': 'Now, I could also add a show function, but I could also just add a prototype.', 'start': 467.222, 'duration': 5.742}, {'end': 481.027, 'text': 'And that prototype is going to point to particle.prototype.', 'start': 474.184, 'duration': 6.843}, {'end': 484.976, 'text': 'and particle.prototype has a show function.', 'start': 482.034, 'duration': 2.942}, {'end': 492.041, 'text': "So this is kind of what's often referred to as the prototype chain, so to speak, although the chain isn't very long yet.", 'start': 485.717, 'duration': 6.324}], 'summary': 'Suggesting an object with x and y properties, and prototype with a show function.', 'duration': 31.962, 'max_score': 460.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8460079.jpg'}, {'end': 619.87, 'src': 'heatmap', 'start': 564.859, 'weight': 1, 'content': [{'end': 578.502, 'text': "For example, let's say you want to use, actually a good example, array is a good example of this, but I'm going to use the p5 vector object.", 'start': 564.859, 'duration': 13.643}, {'end': 583.063, 'text': "So let's say you have a vector.", 'start': 578.862, 'duration': 4.201}, {'end': 591.522, 'text': "I'm going to say, I'm going to make this a global variable just in case I want to look at it in the console.", 'start': 583.103, 'duration': 8.419}, {'end': 598.085, 'text': 'V equals create vector, you know, 3 comma 4.', 'start': 592.142, 'duration': 5.943}, {'end': 605.149, 'text': 'Now, V has functions like, and so if I go to the console and hit refresh, I can say V dot mag.', 'start': 598.085, 'duration': 7.064}, {'end': 608.018, 'text': 'The magnitude of that vector is five.', 'start': 606.496, 'duration': 1.522}, {'end': 611.681, 'text': "It's a three, four, five triangle actually if you look at the sides and the hypotenuse.", 'start': 608.158, 'duration': 3.523}, {'end': 613.403, 'text': "That's the magnitude of that vector.", 'start': 612.182, 'duration': 1.221}, {'end': 619.87, 'text': 'Now what if I wanted to say v dot, what is the magnitude, actually that is a function.', 'start': 613.724, 'duration': 6.146}], 'summary': 'Using the p5 vector object, creating a vector and finding its magnitude, which is 5.', 'duration': 33.226, 'max_score': 564.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8564859.jpg'}], 'start': 460.079, 'title': 'Javascript prototype chain and object chaining', 'summary': 'Explains the prototype chain in javascript, inheritance of functions from prototypes, and demonstrates object chaining using p5 vector object. it includes an example of doubling vector values and its significance for javascript programmers.', 'chapters': [{'end': 640.007, 'start': 460.079, 'title': 'Javascript prototype chain and object chaining', 'summary': 'Explains the prototype chain in javascript, how objects can inherit functions from prototypes, and demonstrates the power of object chaining using p5 vector object, with an example of doubling the values of a vector and explaining its significance for javascript programmers using existing javascript objects.', 'duration': 179.928, 'highlights': ['The chapter explains the prototype chain and how objects can inherit functions from prototypes.', 'It demonstrates the power of object chaining using the p5 vector object, showing an example of doubling the values of a vector.']}], 'duration': 179.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8460079.jpg', 'highlights': ['The chapter explains the prototype chain and how objects can inherit functions from prototypes.', 'It demonstrates the power of object chaining using the p5 vector object, showing an example of doubling the values of a vector.']}, {'end': 1152.943, 'segs': [{'end': 669.087, 'src': 'embed', 'start': 640.207, 'weight': 0, 'content': [{'end': 644.19, 'text': "Well, of course I'm going to need an error that says uncaught type error v.double.", 'start': 640.207, 'duration': 3.983}, {'end': 649.754, 'text': "Well, where is the multiply function? Let's look at p5 vector.", 'start': 644.35, 'duration': 5.404}, {'end': 653.803, 'text': "Right, let's look here.", 'start': 652.403, 'duration': 1.4}, {'end': 658.344, 'text': 'All of these functions are in p5.vector prototype.', 'start': 654.423, 'duration': 3.921}, {'end': 660.085, 'text': 'All of that is down here.', 'start': 658.864, 'duration': 1.221}, {'end': 662.565, 'text': "This is all the stuff listing what's in the prototype.", 'start': 660.325, 'duration': 2.24}, {'end': 669.087, 'text': 'So, and I got to talk about what this underscore proto thing is, but down, the things listed below are part of the prototype.', 'start': 663.825, 'duration': 5.262}], 'summary': 'Discussion about p5 vector functions and prototype.', 'duration': 28.88, 'max_score': 640.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8640207.jpg'}, {'end': 733.498, 'src': 'embed', 'start': 706.81, 'weight': 1, 'content': [{'end': 715.038, 'text': "And what would I do in that function? I could say this.x, because whatever object gets called, look at that object's x property, times equals two.", 'start': 706.81, 'duration': 8.228}, {'end': 721.47, 'text': 'this.y times equals to this.z because the vectors actually have three components.', 'start': 716.206, 'duration': 5.264}, {'end': 728.314, 'text': "So now I've actually added, I've modified the p5.js library by adding something to p5 vectors prototype.", 'start': 721.77, 'duration': 6.544}, {'end': 733.498, 'text': 'Any vector, any time in my code in this sketch will always now suddenly have a double function.', 'start': 728.675, 'duration': 4.823}], 'summary': 'Modified p5.js library to add a double function to all vectors in the sketch.', 'duration': 26.688, 'max_score': 706.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8706810.jpg'}, {'end': 857.315, 'src': 'embed', 'start': 831.907, 'weight': 3, 'content': [{'end': 837.109, 'text': 'Of course, you can mess around with all this stuff by creating objects with null and destroying the prototype.', 'start': 831.907, 'duration': 5.202}, {'end': 839.909, 'text': "But that's a little less practical or relevant to this video.", 'start': 837.149, 'duration': 2.76}, {'end': 844.871, 'text': 'All objects, if you go all the way up the prototype chain, get object.prototype.', 'start': 840.53, 'duration': 4.341}, {'end': 845.911, 'text': 'And there are methods here.', 'start': 844.911, 'duration': 1}, {'end': 848.852, 'text': 'There are methods like hasOwnProperty.', 'start': 846.371, 'duration': 2.481}, {'end': 852.493, 'text': 'This is actually a really easy, interesting thing to look at.', 'start': 849.332, 'duration': 3.161}, {'end': 857.315, 'text': "HasOwnProperty Let's just investigate this function hasOwnProperty for a second.", 'start': 852.693, 'duration': 4.622}], 'summary': 'Objects can relate via prototype chain, with methods like hasownproperty.', 'duration': 25.408, 'max_score': 831.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8831907.jpg'}, {'end': 1095.003, 'src': 'embed', 'start': 1059.754, 'weight': 4, 'content': [{'end': 1061.636, 'text': 'that has all the functions from object.prototype.', 'start': 1059.754, 'duration': 1.882}, {'end': 1063.918, 'text': 'How can I do something called inheritance?', 'start': 1061.876, 'duration': 2.042}, {'end': 1070.764, 'text': "How can I have objects inherit from other objects that I'm defining through prototypical inheritance in JavaScript?", 'start': 1064.138, 'duration': 6.626}, {'end': 1072.685, 'text': "So that's going to be in the next video.", 'start': 1070.944, 'duration': 1.741}, {'end': 1075.948, 'text': 'It might not come out for a little bit, but it will come out eventually.', 'start': 1072.785, 'duration': 3.163}, {'end': 1079.912, 'text': "Maybe you're watching this in the future and they're all there, or I've deleted them because these videos are a disaster.", 'start': 1075.988, 'duration': 3.924}, {'end': 1083.474, 'text': 'So look for it, it might be there.', 'start': 1082.273, 'duration': 1.201}, {'end': 1095.003, 'text': "Now, I should mention once again that what I'm showing you is part of the JavaScript language from the version that is informally known as ES6.", 'start': 1083.635, 'duration': 11.368}], 'summary': 'Discussing prototypical inheritance in javascript, part of es6.', 'duration': 35.249, 'max_score': 1059.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah81059754.jpg'}, {'end': 1140.007, 'src': 'embed', 'start': 1115.08, 'weight': 2, 'content': [{'end': 1121.647, 'text': 'The newest version of JavaScript, ES6, has a different model and syntax for this involving something called class.', 'start': 1115.08, 'duration': 6.567}, {'end': 1129.802, 'text': 'And if you have programmed as I have in Java or other classical programming environments, so to speak,', 'start': 1122.779, 'duration': 7.023}, {'end': 1132.864, 'text': 'this is more of a classical model of inheritance.', 'start': 1129.802, 'duration': 3.062}, {'end': 1137.866, 'text': 'So at some point, I also want to look at that in this continuing series.', 'start': 1133.704, 'duration': 4.162}, {'end': 1140.007, 'text': 'But first, I want to figure out this prototype stuff.', 'start': 1137.906, 'duration': 2.101}], 'summary': 'Es6 introduces a new class syntax for inheritance, relevant to java programmers.', 'duration': 24.927, 'max_score': 1115.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah81115080.jpg'}], 'start': 640.207, 'title': 'Javascript prototypes and inheritance', 'summary': "Discusses troubleshooting a 'uncaught type error v.double' and examines the p5 vector prototype, highlighting the functions and properties specific to the object instance and the shared functions for all objects. it also explains the concept of prototypes in javascript, demonstrating how to modify a library using prototypes, explaining the prototype chain, and exploring the use of hasownproperty to detect properties in the prototype chain. additionally, it hints at a follow-up video on prototypical inheritance in javascript.", 'chapters': [{'end': 680.389, 'start': 640.207, 'title': 'Javascript error and prototype analysis', 'summary': "Discusses troubleshooting a 'uncaught type error v.double' and examines the p5 vector prototype, highlighting the functions and properties specific to the object instance and the shared functions for all objects.", 'duration': 40.182, 'highlights': ["The 'uncaught type error v.double' error is being troubleshooted in the chapter.", 'The functions specific to the object instance and the shared functions for all objects created from the prototype are discussed.', 'The chapter explores the p5 vector prototype and its functions and properties.']}, {'end': 1152.943, 'start': 681.838, 'title': 'Javascript prototypes and inheritance', 'summary': 'Discusses the concept of prototypes in javascript, demonstrating how to modify a library using prototypes, explaining the prototype chain, and exploring the use of hasownproperty to detect properties in the prototype chain. it also hints at a follow-up video on prototypical inheritance in javascript.', 'duration': 471.105, 'highlights': ["The ability to modify a JavaScript library by adding functions to a prototype, demonstrated by adding a 'double' function to p5 vectors, providing a practical example of prototype usage.", 'Explanation of the prototype chain in JavaScript, detailing the inheritance of properties and methods from object.prototype and the practical use of hasOwnProperty to detect specific properties in the prototype chain.', 'Discussion about the upcoming topic of prototypical inheritance in JavaScript, hinting at a future video to delve deeper into the concept and its implementation.']}], 'duration': 512.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hS_WqkyUah8/pics/hS_WqkyUah8640207.jpg', 'highlights': ["Troubleshooting the 'uncaught type error v.double' in the chapter", 'Exploring the p5 vector prototype and its functions and properties', 'Demonstrating the ability to modify a JavaScript library by adding functions to a prototype', 'Detailing the inheritance of properties and methods from object.prototype in the prototype chain', 'Hinting at a future video to delve deeper into prototypical inheritance in JavaScript']}], 'highlights': ['Introduction to the concept of prototype in JavaScript and its implementation for more efficient code.', 'The video covers the concept of prototypes in JavaScript, discussing its relevance, usage, and relation to inheritance and polymorphism.', "The 'new' keyword in JavaScript indicates a constructor function, allowing the creation of objects with specific properties and functions.", 'The chapter explains the prototype chain and how objects can inherit functions from prototypes.', 'It demonstrates the power of object chaining using the p5 vector object, showing an example of doubling the values of a vector.', "Troubleshooting the 'uncaught type error v.double' in the chapter", 'Exploring the p5 vector prototype and its functions and properties', 'Demonstrating the ability to modify a JavaScript library by adding functions to a prototype', 'Detailing the inheritance of properties and methods from object.prototype in the prototype chain', 'Hinting at a future video to delve deeper into prototypical inheritance in JavaScript']}