title
JavaScript OOP Crash Course (ES5 & ES6)

description
In this video we will look at some of the object oriented programming concepts in JavaScript including... Object Literals Constructors & This Prototypes & Inheritence Object.create() ES6 Classes & Subclasses MODERN JS FROM THE BEGINNING - $9.99 PROMO https://www.udemy.com/modern-javascript-from-the-beginning/?couponCode=YOUTUBE10 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia The Developer Hangout: Public Discord Server https://discord.gg/developers

detail
{'title': 'JavaScript OOP Crash Course (ES5 & ES6)', 'heatmap': [{'end': 998.245, 'start': 914.544, 'weight': 0.861}, {'end': 1389.304, 'start': 1330.711, 'weight': 1}, {'end': 1577.347, 'start': 1519.391, 'weight': 0.777}, {'end': 2084.904, 'start': 2032.205, 'weight': 0.962}], 'summary': 'Provides a comprehensive crash course in javascript oop, including es5 and es6, covering topics such as object literals, es6 classes, prototype inheritance, and javascript classes, with practical examples and demonstrations from the modern javascript from the beginning course on udemy.', 'chapters': [{'end': 44.436, 'segs': [{'end': 44.436, 'src': 'embed', 'start': 7.188, 'weight': 0, 'content': [{'end': 11.952, 'text': "Hey, what's going on guys? Welcome to my object-oriented programming in JavaScript crash course.", 'start': 7.188, 'duration': 4.764}, {'end': 19.899, 'text': "In this video, we're going to look at some of the basics and core concepts of writing code in an object-oriented fashion in JavaScript.", 'start': 12.332, 'duration': 7.567}, {'end': 24.843, 'text': 'And this content is very closely related to my Modern JavaScript from the Beginning course on Udemy.', 'start': 20.319, 'duration': 4.524}, {'end': 27.526, 'text': "So if you haven't checked that out, I'll put the link in the description.", 'start': 25.184, 'duration': 2.342}, {'end': 30.228, 'text': 'If you have, then some of this might look familiar to you.', 'start': 27.686, 'duration': 2.542}, {'end': 33.571, 'text': "It's not the same code, but we're looking at some of the same concepts.", 'start': 30.508, 'duration': 3.063}, {'end': 36.933, 'text': "So in this video, we're going to look at a lot of different things.", 'start': 34.131, 'duration': 2.802}, {'end': 44.436, 'text': "We're going to look at object literals, which if you've used JavaScript for any amount of time, you probably have used.", 'start': 36.953, 'duration': 7.483}], 'summary': 'Javascript crash course covers object-oriented concepts and related to modern javascript from the beginning course on udemy.', 'duration': 37.248, 'max_score': 7.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA7188.jpg'}], 'start': 7.188, 'title': 'Javascript oop basics', 'summary': 'Provides an introduction to object-oriented programming in javascript, focusing on object literals and core concepts, with relevance to the modern javascript from the beginning course on udemy.', 'chapters': [{'end': 44.436, 'start': 7.188, 'title': 'Javascript oop basics', 'summary': 'Provides an introduction to object-oriented programming in javascript, highlighting the basics and core concepts, with a focus on object literals, and its relevance to the modern javascript from the beginning course on udemy.', 'duration': 37.248, 'highlights': ['The chapter introduces the basics and core concepts of writing code in an object-oriented fashion in JavaScript.', 'It emphasizes the relevance to the Modern JavaScript from the Beginning course on Udemy.', 'The video covers a range of topics, including object literals, a commonly used concept in JavaScript.']}], 'duration': 37.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA7188.jpg', 'highlights': ['The chapter introduces the basics and core concepts of writing code in an object-oriented fashion in JavaScript.', 'The video covers a range of topics, including object literals, a commonly used concept in JavaScript.', 'It emphasizes the relevance to the Modern JavaScript from the Beginning course on Udemy.']}, {'end': 244.746, 'segs': [{'end': 84.538, 'src': 'embed', 'start': 61.925, 'weight': 0, 'content': [{'end': 70.91, 'text': "now it's important to know that when you use es6 classes, these are basically, it's it's called syntactic sugar or a convenient syntax,", 'start': 61.925, 'duration': 8.985}, {'end': 73.632, 'text': "and the reason for that is because you're writing thing.", 'start': 70.91, 'duration': 2.722}, {'end': 81.576, 'text': "you're writing it in a different way, using classes which relates more to other languages like java, um, c, sharp, php and so on.", 'start': 73.632, 'duration': 7.944}, {'end': 84.538, 'text': "but under the hood it's still using those prototypes.", 'start': 81.576, 'duration': 2.962}], 'summary': 'Es6 classes are syntactic sugar, providing a convenient syntax while still using prototypes.', 'duration': 22.613, 'max_score': 61.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA61925.jpg'}, {'end': 163.388, 'src': 'embed', 'start': 107.628, 'weight': 1, 'content': [{'end': 115.029, 'text': "So if it has a property associated with it or if it has a function associated with it, it's actually called a method.", 'start': 107.628, 'duration': 7.401}, {'end': 125.011, 'text': 'So we can either have a property like a string or an array or an object literal, something like that, or it can be a function that actually executes.', 'start': 115.909, 'duration': 9.102}, {'end': 132.092, 'text': 'Now, there are languages where you hear everything is an object, such as Ruby.', 'start': 126.191, 'duration': 5.901}, {'end': 136.233, 'text': "In JavaScript, it's a little weird because almost everything is an object.", 'start': 132.612, 'duration': 3.621}, {'end': 141.075, 'text': 'you have a couple data types like strings, numbers, booleans.', 'start': 136.753, 'duration': 4.322}, {'end': 147.659, 'text': 'these are actually primitives, but you can use methods on a string.', 'start': 141.075, 'duration': 6.584}, {'end': 163.388, 'text': 'okay, so if i were to say cons s, so const string equals, hello, i can actually do like console.log and i can take that string and i can do dot two.', 'start': 147.659, 'duration': 15.729}], 'summary': 'In javascript, almost everything is an object including strings, numbers, and booleans, with the ability to use methods.', 'duration': 55.76, 'max_score': 107.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA107628.jpg'}, {'end': 215.044, 'src': 'embed', 'start': 186.798, 'weight': 3, 'content': [{'end': 193.423, 'text': 'So you can do like const s equals new string like that.', 'start': 186.798, 'duration': 6.625}, {'end': 197.512, 'text': "And I'm just going to show you a different, let me call this something else.", 'start': 195.409, 'duration': 2.103}, {'end': 200.495, 'text': "I'll call this S2 and this S1.", 'start': 197.572, 'duration': 2.923}, {'end': 203.118, 'text': "And let's do S1 right here.", 'start': 200.755, 'duration': 2.363}, {'end': 206.362, 'text': "All right, now let's take a look at the types of these two.", 'start': 203.719, 'duration': 2.643}, {'end': 208.464, 'text': 'Okay, I can actually get rid of this.', 'start': 206.382, 'duration': 2.082}, {'end': 211.207, 'text': "So let's do console.log.", 'start': 209.425, 'duration': 1.782}, {'end': 215.044, 'text': "And let's say type of.", 'start': 213.203, 'duration': 1.841}], 'summary': 'Demonstrating string creation and type comparison in javascript.', 'duration': 28.246, 'max_score': 186.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA186798.jpg'}], 'start': 44.796, 'title': 'Javascript basics', 'summary': "Covers javascript basics including objects, es6 classes, and data types. it emphasizes the use of classes as syntactic sugar and the difference between primitive and object types, showcasing the 'typeof' operator in a code snippet.", 'chapters': [{'end': 186.698, 'start': 44.796, 'title': 'Javascript objects and es6 classes', 'summary': 'Covers the basics of objects in javascript, including properties, methods, and the use of es6 classes as syntactic sugar to work with prototypes, emphasizing that almost everything in javascript is an object, despite having primitive data types like strings, numbers, and booleans.', 'duration': 141.902, 'highlights': ['ES6 classes are syntactic sugar for working with prototypes, allowing developers to write code in a way that relates to other languages like Java and C#, while still using the underlying ES5 syntax and prototypes. ES6 classes provide a convenient syntax for working with prototypes, resembling the syntax of other languages like Java and C#, while still utilizing ES5 syntax and prototypes under the hood.', "In JavaScript, almost everything is an object, including primitives like strings, numbers, and booleans, which can still be used to call methods, demonstrating the language's flexible and object-oriented nature. Despite having primitive data types like strings, numbers, and booleans, JavaScript treats almost everything as an object, allowing the usage of methods on primitives, showcasing the language's object-oriented flexibility.", 'Objects in JavaScript can have properties and methods, with methods being functions associated with the object, and even primitives like strings can be treated as objects when calling methods on them. In JavaScript, objects can have properties and methods, with methods being functions associated with the object, and even primitives like strings can be treated as objects when calling methods on them.']}, {'end': 244.746, 'start': 186.798, 'title': 'Javascript data types', 'summary': "Covers the difference between primitive and object types in javascript, demonstrating the use of the 'typeof' operator to determine the type of variables, showcasing the difference between primitive and object types in a code snippet.", 'duration': 57.948, 'highlights': ["The 'typeof' operator is used to determine the type of variables, displaying 'string' for S1 and 'object' for S2.", 'Demonstrates that primitive data types in JavaScript, such as strings, are not actually objects by default.']}], 'duration': 199.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA44796.jpg', 'highlights': ['ES6 classes provide a convenient syntax for working with prototypes, resembling the syntax of other languages like Java and C#, while still utilizing ES5 syntax and prototypes under the hood.', "In JavaScript, almost everything is an object, including primitives like strings, numbers, and booleans, which can still be used to call methods, showcasing the language's flexible and object-oriented nature.", 'Objects in JavaScript can have properties and methods, with methods being functions associated with the object, and even primitives like strings can be treated as objects when calling methods on them.', "The 'typeof' operator is used to determine the type of variables, displaying 'string' for S1 and 'object' for S2.", 'Demonstrates that primitive data types in JavaScript, such as strings, are not actually objects by default.']}, {'end': 567.668, 'segs': [{'end': 293.784, 'src': 'embed', 'start': 269.833, 'weight': 0, 'content': [{'end': 278.425, 'text': "it just basically gives us like a pop-up, so we can take that window object and we can call the alert method, And I didn't put anything in there,", 'start': 269.833, 'duration': 8.592}, {'end': 279.967, 'text': 'but we could put something in here.', 'start': 278.425, 'duration': 1.542}, {'end': 283.251, 'text': "So let's put like a one and it will alert us with a one.", 'start': 280.067, 'duration': 3.184}, {'end': 289.899, 'text': "Now, since window is the absolute parent object, there's basically in the DOM and the browser, there's nothing above window.", 'start': 283.631, 'duration': 6.268}, {'end': 293.784, 'text': "So anything with window, you don't have to actually do window dot.", 'start': 289.999, 'duration': 3.785}], 'summary': 'Using window object to display pop-up alerts in the dom.', 'duration': 23.951, 'max_score': 269.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA269833.jpg'}, {'end': 347.731, 'src': 'embed', 'start': 319.682, 'weight': 1, 'content': [{'end': 325.77, 'text': "And since navigator is actually part of the window object, we don't have to do window.navigator, even though that would work.", 'start': 319.682, 'duration': 6.088}, {'end': 327.612, 'text': "But let's do navigator.", 'start': 326.25, 'duration': 1.362}, {'end': 331.797, 'text': 'You can see with VS Code, we actually have a dropdown of the available methods and properties.', 'start': 327.652, 'duration': 4.145}, {'end': 334.481, 'text': "But let's do app version, which is a property.", 'start': 332.278, 'duration': 2.203}, {'end': 335.862, 'text': "So we'll save that.", 'start': 335.021, 'duration': 0.841}, {'end': 343.348, 'text': "You can see it's going to give you basically some info on my system, what OS I'm using, what browser I'm using.", 'start': 335.922, 'duration': 7.426}, {'end': 347.731, 'text': "It's a little weird because it says Chrome, which is what I'm using, but it also says Safari.", 'start': 343.608, 'duration': 4.123}], 'summary': 'Accessing navigator object in vs code to retrieve system and browser info.', 'duration': 28.049, 'max_score': 319.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA319682.jpg'}, {'end': 413.491, 'src': 'embed', 'start': 382.901, 'weight': 2, 'content': [{'end': 385.903, 'text': "We're going to work with books in this throughout this course here.", 'start': 382.901, 'duration': 3.002}, {'end': 392.746, 'text': "So let's call it book one and let's create it by adding just some curly braces.", 'start': 386.443, 'duration': 6.303}, {'end': 394.287, 'text': 'So this is an object literal.', 'start': 392.846, 'duration': 1.441}, {'end': 398.449, 'text': 'And in here we can have properties which are just key value pairs.', 'start': 394.807, 'duration': 3.642}, {'end': 399.629, 'text': "So we're going to say title.", 'start': 398.509, 'duration': 1.12}, {'end': 401.89, 'text': "Let's say book one.", 'start': 400.71, 'duration': 1.18}, {'end': 405.692, 'text': "And let's do author.", 'start': 404.872, 'duration': 0.82}, {'end': 413.491, 'text': "and we'll say john doe and let's do year and we'll say 2013.", 'start': 408.084, 'duration': 5.407}], 'summary': 'Creating an object literal for a book with title, author, and year (book one, john doe, 2013).', 'duration': 30.59, 'max_score': 382.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA382901.jpg'}, {'end': 474.607, 'src': 'embed', 'start': 440.753, 'weight': 3, 'content': [{'end': 442.854, 'text': 'And I know a lot of you guys probably know this stuff.', 'start': 440.753, 'duration': 2.101}, {'end': 446.856, 'text': 'You probably want to get into the constructor and prototypes and all that.', 'start': 442.894, 'duration': 3.962}, {'end': 454.2, 'text': "But just for the people that don't really, you know, the people that are new, really new to JavaScript, I just want to kind of explain this stuff.", 'start': 446.896, 'duration': 7.304}, {'end': 460.324, 'text': 'Now, in this book one, we can also put in a function as as a property.', 'start': 454.981, 'duration': 5.343}, {'end': 463.125, 'text': "So let's say we want to do get summary.", 'start': 460.364, 'duration': 2.761}, {'end': 465.847, 'text': 'We can actually set that to a function.', 'start': 464.066, 'duration': 1.781}, {'end': 474.607, 'text': "And what I want this to do is basically return a string that's going to say, like, book one was written by John Doe in 2013.", 'start': 467.901, 'duration': 6.706}], 'summary': 'Introduction to using functions as properties in javascript objects.', 'duration': 33.854, 'max_score': 440.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA440753.jpg'}, {'end': 541.097, 'src': 'embed', 'start': 517.504, 'weight': 4, 'content': [{'end': 525.169, 'text': 'Okay, so now we have a method or a function attached to this object, so I could say book one dot,', 'start': 517.504, 'duration': 7.665}, {'end': 531.812, 'text': 'get summary and save it and we get book one was written by John Doe in 2013..', 'start': 525.169, 'duration': 6.643}, {'end': 533.473, 'text': 'Okay so this is an object literal.', 'start': 531.812, 'duration': 1.661}, {'end': 534.714, 'text': 'Let me just put a comma in here.', 'start': 533.493, 'duration': 1.221}, {'end': 541.097, 'text': 'Now, what if we want to create more than one book?', 'start': 537.795, 'duration': 3.302}], 'summary': "Method attached to object returns 'book one' written by john doe in 2013.", 'duration': 23.593, 'max_score': 517.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA517504.jpg'}], 'start': 245.487, 'title': 'Window, navigator objects & object literals in javascript', 'summary': 'Covers the window and navigator objects in the dom, detailing methods like alert and system information. it also explores object literals in javascript, illustrating property and method definition and multiple object creation with book examples.', 'chapters': [{'end': 356.458, 'start': 245.487, 'title': 'Understanding window and navigator objects', 'summary': 'Discusses the window object in the dom, highlighting its methods such as alert, and also explores the navigator object, showcasing its properties and methods, providing insights into system information like os and browser used.', 'duration': 110.971, 'highlights': ['The window object in the DOM has methods like alert, which provides a pop-up, and is the absolute parent object with no objects above it. The window object in the DOM contains methods like alert, which enables pop-ups. It is the absolute parent object with no objects above it.', 'The navigator object, part of the window object, provides system information like OS and browser through properties such as app version. The navigator object, part of the window object, offers system information like OS and browser through properties such as app version.']}, {'end': 567.668, 'start': 356.879, 'title': 'Object literals in javascript', 'summary': 'Discusses the creation of object literals in javascript, demonstrating how to define properties and methods, and create multiple objects, using book examples with titles, authors, and years published.', 'duration': 210.789, 'highlights': ['Demonstrates creating an object literal with properties like title, author, and year published, and accessing individual properties like title The chapter demonstrates creating an object literal with properties like title, author, and year published, and accessing individual properties like title, providing a clear understanding of defining key-value pairs within an object.', 'Shows how to define a method as a property of an object literal to generate a summary using a function, and accessing the method to display the summary It shows how to define a method as a property of an object literal to generate a summary using a function, and accessing the method to display the summary, showcasing the use of functions within object literals to perform specific actions.', 'Illustrates creating multiple objects based on the same object literal structure by creating another book object and invoking its get summary method It illustrates creating multiple objects based on the same object literal structure by creating another book object and invoking its get summary method, emphasizing the reusability of object literal structures to create and manage multiple objects.']}], 'duration': 322.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA245487.jpg', 'highlights': ['The window object in the DOM contains methods like alert, which enables pop-ups. It is the absolute parent object with no objects above it.', 'The navigator object, part of the window object, offers system information like OS and browser through properties such as app version.', 'The chapter demonstrates creating an object literal with properties like title, author, and year published, providing a clear understanding of defining key-value pairs within an object.', 'It shows how to define a method as a property of an object literal to generate a summary using a function, showcasing the use of functions within object literals to perform specific actions.', 'It illustrates creating multiple objects based on the same object literal structure by creating another book object and invoking its get summary method, emphasizing the reusability of object literal structures to create and manage multiple objects.']}, {'end': 799.896, 'segs': [{'end': 617.903, 'src': 'embed', 'start': 567.668, 'weight': 0, 'content': [{'end': 573.29, 'text': 'um now, oh, one other thing i wanted to show you is if you actually want to see all the values of an object,', 'start': 567.668, 'duration': 5.622}, {'end': 585.915, 'text': "we could do console.log and we could actually do object.values and we can pass in, let's say, book two and save,", 'start': 573.29, 'duration': 12.625}, {'end': 589.238, 'text': 'and that will actually give us an array of the values inside.', 'start': 585.915, 'duration': 3.323}, {'end': 590.939, 'text': 'We can also get the keys.', 'start': 589.618, 'duration': 1.321}, {'end': 592.28, 'text': "Actually, I'll keep this.", 'start': 590.959, 'duration': 1.321}, {'end': 602.607, 'text': "I'll just copy this down, and we can say object.keys of book two, and that'll give us the keys, which is title, author, year, and get summary.", 'start': 592.34, 'duration': 10.267}, {'end': 604.649, 'text': 'Okay, so I just wanted to show you guys that as well.', 'start': 602.627, 'duration': 2.022}, {'end': 611.778, 'text': 'Now if we wanted to keep creating books, or even if we wanted to create two books like this.', 'start': 605.754, 'duration': 6.024}, {'end': 615.301, 'text': "it's kind of a pain because we have to create two object literals.", 'start': 611.778, 'duration': 3.523}, {'end': 617.903, 'text': 'We have to create getSummary twice.', 'start': 615.341, 'duration': 2.562}], 'summary': 'Demonstrates accessing object values and keys using console.log and object methods.', 'duration': 50.235, 'max_score': 567.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA567668.jpg'}, {'end': 679.782, 'src': 'embed', 'start': 646.799, 'weight': 2, 'content': [{'end': 648.66, 'text': "We're not working with classes or anything yet.", 'start': 646.799, 'duration': 1.861}, {'end': 654.582, 'text': "So let's say function book, okay, and you want to give it an uppercase B.", 'start': 649.42, 'duration': 5.162}, {'end': 662.345, 'text': "So function book, and right now I'm just going to console.log, and I'm just going to say book.", 'start': 654.582, 'duration': 7.763}, {'end': 668.595, 'text': "initialized or instantiated, I guess would be a better term, but it's fine.", 'start': 664.372, 'duration': 4.223}, {'end': 674.459, 'text': 'So we have this constructor and now we can actually create books from this constructor.', 'start': 669.415, 'duration': 5.044}, {'end': 679.782, 'text': 'So we can say const book one equals new book.', 'start': 674.519, 'duration': 5.263}], 'summary': 'Introduction to creating a book constructor in javascript.', 'duration': 32.983, 'max_score': 646.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA646799.jpg'}, {'end': 765.002, 'src': 'embed', 'start': 730.048, 'weight': 3, 'content': [{'end': 738.715, 'text': "And we just want to set, we want to take this.title, which is going to refer to whatever instance we're using.", 'start': 730.048, 'duration': 8.667}, {'end': 742.339, 'text': "And we want to set that to the title that's passed in.", 'start': 739.576, 'duration': 2.763}, {'end': 745.561, 'text': 'And we want to do that same thing with all of these.', 'start': 742.799, 'duration': 2.762}, {'end': 748.044, 'text': "So this one, let's do author.", 'start': 745.642, 'duration': 2.402}, {'end': 754.708, 'text': 'So author and then this will be year.', 'start': 751.423, 'duration': 3.285}, {'end': 765.002, 'text': "Year So now what's happening is when we instantiate a book, we want to pass in these three things.", 'start': 757.211, 'duration': 7.791}], 'summary': 'Setting instance attributes like title, author, and year during book instantiation.', 'duration': 34.954, 'max_score': 730.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA730048.jpg'}], 'start': 567.668, 'title': 'Object values, keys, and constructors in javascript', 'summary': 'Covers accessing and displaying object values and keys using console.log and object.values/keys methods, as well as understanding constructors in javascript and demonstrating the instantiation of multiple objects and the utilization of parameters for setting properties.', 'chapters': [{'end': 617.903, 'start': 567.668, 'title': 'Accessing object values and keys', 'summary': 'Demonstrates how to access and display all the values and keys of an object using console.log and object.values/keys methods, highlighting the process and challenges of creating multiple object literals with repeated properties and methods.', 'duration': 50.235, 'highlights': ['The chapter demonstrates how to access all the values of an object using console.log and object.values method, providing an array of values inside the object.', 'It also showcases accessing the keys of an object by using object.keys method, revealing the keys as title, author, year, and get summary.']}, {'end': 799.896, 'start': 617.923, 'title': 'Understanding constructors in javascript', 'summary': 'Covers the concept of constructors in javascript, explaining how to create and use constructors to instantiate objects, and how to pass parameters to the constructor function. it also demonstrates the instantiation of multiple objects and the utilization of parameters for setting properties of the objects.', 'duration': 181.973, 'highlights': ["Constructors in JavaScript allow the creation of objects based on a template function, and the instantiation of objects from the constructor function. The chapter explains the concept of constructors in JavaScript, demonstrating how to create a constructor function 'book' and instantiate objects 'book one' and 'book two' from it.", "The process of passing parameters to the constructor function to set properties of the instantiated objects is illustrated. It demonstrates passing parameters such as title, author, and year to the constructor function to set properties of the objects 'book one' and 'book two'.", "The instantiation of multiple objects from the constructor function is shown, with specific parameters being passed to each object. The process of instantiating multiple objects 'book one' and 'book two' from the constructor function is detailed, showcasing the utilization of specific parameters for each object."]}], 'duration': 232.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA567668.jpg', 'highlights': ['The chapter demonstrates accessing all object values using console.log and object.values method, providing an array of values.', 'It showcases accessing object keys using object.keys method, revealing keys as title, author, year, and get summary.', "The chapter explains constructors in JavaScript, demonstrating the creation of a constructor function 'book' and instantiation of objects 'book one' and 'book two' from it.", 'It illustrates passing parameters to the constructor function to set properties of instantiated objects, such as title, author, and year.', 'The process of instantiating multiple objects from the constructor function is detailed, showcasing the utilization of specific parameters for each object.']}, {'end': 1260.244, 'segs': [{'end': 866.493, 'src': 'embed', 'start': 800.017, 'weight': 3, 'content': [{'end': 805.941, 'text': "We're not going to see anything here because this is getting executed, but all it's doing is assigning properties.", 'start': 800.017, 'duration': 5.924}, {'end': 816.448, 'text': "Now, if I wanted to get, let's say, the title of book one, I could say console dot log book one dot title.", 'start': 806.501, 'duration': 9.947}, {'end': 819.91, 'text': 'OK, just like I could with the object literal.', 'start': 817.989, 'duration': 1.921}, {'end': 824.274, 'text': 'But now we can create as many books as we want with this constructor.', 'start': 820.291, 'duration': 3.983}, {'end': 825.915, 'text': 'All right.', 'start': 825.575, 'duration': 0.34}, {'end': 832.279, 'text': 'if we want to look at just the book one itself, you can see that we get the same thing as we did with the literal,', 'start': 825.915, 'duration': 6.364}, {'end': 837.262, 'text': "except it's now prefixed by the actual type of object it is, which is a book.", 'start': 832.279, 'duration': 4.983}, {'end': 840.753, 'text': 'All right, and you also notice this proto object.', 'start': 838.191, 'duration': 2.562}, {'end': 843.115, 'text': 'This is kind of like a pseudo object.', 'start': 840.773, 'duration': 2.342}, {'end': 846.397, 'text': "And this will show us anything that's in the prototype.", 'start': 843.815, 'duration': 2.582}, {'end': 854.804, 'text': "Now, we don't have any specific prototype methods for the book object, but there is an object.prototype, and that's what you're looking at here.", 'start': 846.477, 'duration': 8.327}, {'end': 857.946, 'text': 'And this actually has a bunch of its own methods.', 'start': 855.344, 'duration': 2.602}, {'end': 866.493, 'text': "All right, I'm not really going to get into object.prototype and stuff, but it is there, and every object is going to inherit that.", 'start': 858.607, 'duration': 7.886}], 'summary': 'Introduction to creating multiple books using a constructor and exploring prototype inheritance.', 'duration': 66.476, 'max_score': 800.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA800017.jpg'}, {'end': 998.245, 'src': 'heatmap', 'start': 914.544, 'weight': 0.861, 'content': [{'end': 921.57, 'text': "in 2013, we can do book two, okay, and if we had a thousand books, we could still call get summary and it's only defined once,", 'start': 914.544, 'duration': 7.026}, {'end': 926.594, 'text': 'rather than defining a thousand object literals with a thousand get summaries.', 'start': 921.57, 'duration': 5.024}, {'end': 928.809, 'text': 'All right.', 'start': 927.648, 'duration': 1.161}, {'end': 938.113, 'text': "now, if we look at book two just book two in our console, you'll see it has the basic properties we added at first,", 'start': 928.809, 'duration': 9.304}, {'end': 940.234, 'text': 'but it also has get summary as a function.', 'start': 938.113, 'duration': 2.121}, {'end': 947.457, 'text': 'Now, this is a good example of where we should use a prototype method instead of putting it right in the constructor.', 'start': 941.014, 'duration': 6.443}, {'end': 950.959, 'text': "So now we're going to move on to prototypes, but I just want to copy.", 'start': 947.737, 'duration': 3.222}, {'end': 953.44, 'text': "Actually, we'll copy the whole thing.", 'start': 951.939, 'duration': 1.501}, {'end': 957.33, 'text': "So I'm going to copy this and go to prototypes.", 'start': 955.489, 'duration': 1.841}, {'end': 960.072, 'text': "And we're going to have our constructor.", 'start': 958.691, 'duration': 1.381}, {'end': 965.355, 'text': "And instead of putting get summary right inside the constructor, let's create a prototype method.", 'start': 960.552, 'duration': 4.803}, {'end': 967.536, 'text': "So we'll say get summary.", 'start': 966.075, 'duration': 1.461}, {'end': 972.019, 'text': 'And what we can do is just say book.', 'start': 970.298, 'duration': 1.721}, {'end': 977.382, 'text': "So we're going to take the object name or the constructor function name, whatever you want to call it.", 'start': 972.279, 'duration': 5.103}, {'end': 980.704, 'text': "And we're going to call prototype dot get summary.", 'start': 977.462, 'duration': 3.242}, {'end': 983.446, 'text': "And we're going to set that equal to a function.", 'start': 981.625, 'duration': 1.821}, {'end': 991.738, 'text': "and I'm just gonna grab the return, paste that in, and we're gonna completely get rid of this from the constructor.", 'start': 985.752, 'duration': 5.986}, {'end': 998.245, 'text': 'Okay, now we should still be able to do book two dot get summary and save.', 'start': 993.12, 'duration': 5.125}], 'summary': 'In 2013, using prototype methods instead of object literals reduced redundant code by defining get summary only once.', 'duration': 83.701, 'max_score': 914.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA914544.jpg'}, {'end': 953.44, 'src': 'embed', 'start': 928.809, 'weight': 0, 'content': [{'end': 938.113, 'text': "now, if we look at book two just book two in our console, you'll see it has the basic properties we added at first,", 'start': 928.809, 'duration': 9.304}, {'end': 940.234, 'text': 'but it also has get summary as a function.', 'start': 938.113, 'duration': 2.121}, {'end': 947.457, 'text': 'Now, this is a good example of where we should use a prototype method instead of putting it right in the constructor.', 'start': 941.014, 'duration': 6.443}, {'end': 950.959, 'text': "So now we're going to move on to prototypes, but I just want to copy.", 'start': 947.737, 'duration': 3.222}, {'end': 953.44, 'text': "Actually, we'll copy the whole thing.", 'start': 951.939, 'duration': 1.501}], 'summary': 'The transcript discusses using prototype methods instead of adding functions directly to the constructor in book two.', 'duration': 24.631, 'max_score': 928.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA928809.jpg'}, {'end': 1090.117, 'src': 'embed', 'start': 1065.11, 'weight': 1, 'content': [{'end': 1070.594, 'text': "But what it's going to do is just give us the number of years that have passed since the book was created.", 'start': 1065.11, 'duration': 5.484}, {'end': 1079.902, 'text': "So let's say book dot prototype dot get age equals function.", 'start': 1070.734, 'duration': 9.168}, {'end': 1082.824, 'text': "And let's return.", 'start': 1081.943, 'duration': 0.881}, {'end': 1090.117, 'text': "Actually, let's create a variable, we'll call it age, or we'll call it years.", 'start': 1083.084, 'duration': 7.033}], 'summary': 'The function will determine the number of years since the book was created.', 'duration': 25.007, 'max_score': 1065.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1065110.jpg'}, {'end': 1208.466, 'src': 'embed', 'start': 1173.468, 'weight': 2, 'content': [{'end': 1179.549, 'text': "So let's create one more prototype method and let's create one where we actually manipulate the data.", 'start': 1173.468, 'duration': 6.081}, {'end': 1183.649, 'text': "So I'm going to call this revise.", 'start': 1180.849, 'duration': 2.8}, {'end': 1192.351, 'text': "And what we want to do is basically just change the year because if it's revised or it's rewritten, then I want to add the new year.", 'start': 1184.01, 'duration': 8.341}, {'end': 1202.109, 'text': "So we'll say book dot prototype dot revise equals a function.", 'start': 1193.573, 'duration': 8.536}, {'end': 1208.466, 'text': 'And this is actually going to take in a parameter of new year.', 'start': 1204.463, 'duration': 4.003}], 'summary': "Creating a prototype method 'revise' to manipulate data by changing the year.", 'duration': 34.998, 'max_score': 1173.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1173468.jpg'}], 'start': 800.017, 'title': 'Javascript object prototypes', 'summary': "Covers creating object literals with prototype methods in javascript, illustrating how to improve memory efficiency and functionality by using prototype methods instead of putting functions inside the constructor, with practical examples and demonstrations of implementing prototype methods for 'get summary', 'get age', and 'revise' in the object prototypes.", 'chapters': [{'end': 866.493, 'start': 800.017, 'title': 'Object constructors and prototypes', 'summary': 'Explains the concept of object constructors and prototypes, demonstrating how to create multiple instances of an object using a constructor and highlighting the inheritance of prototype methods by objects.', 'duration': 66.476, 'highlights': ['The chapter demonstrates the use of object constructors to create multiple instances of an object, providing flexibility and reusability in programming.', 'It explains the presence of the proto object in the constructed object, indicating the inheritance from the prototype, with the example of a book object prefixed by its type.', 'The chapter briefly touches on object.prototype and its inherited methods, emphasizing the inheritance of methods by all objects.']}, {'end': 1260.244, 'start': 868.363, 'title': 'Javascript object prototypes', 'summary': "Covers creating object literals with prototype methods in javascript, illustrating how to improve memory efficiency and functionality by using prototype methods instead of putting functions inside the constructor, with practical examples and demonstrations of implementing prototype methods for 'get summary', 'get age', and 'revise' in the object prototypes.", 'duration': 391.881, 'highlights': ['Prototype methods improve memory efficiency and functionality By using prototype methods instead of putting functions inside the constructor, memory efficiency and functionality are improved, as demonstrated in the examples.', "Demonstration of implementing 'get summary' prototype method The process of implementing the 'get summary' prototype method is demonstrated, showing how it can be called for any number of books, improving memory efficiency.", "Illustration of creating 'get age' prototype method The creation and application of the 'get age' prototype method is illustrated, providing the number of years that have passed since the book was created, enhancing the functionality of the object prototypes.", "Practical example of manipulating data using the 'revise' prototype method A practical example of manipulating data is provided through the 'revise' prototype method, showcasing how the year property can be changed and a revised property can be added to the object."]}], 'duration': 460.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA800017.jpg', 'highlights': ["Demonstration of implementing 'get summary' prototype method The process of implementing the 'get summary' prototype method is demonstrated, showing how it can be called for any number of books, improving memory efficiency.", "Illustration of creating 'get age' prototype method The creation and application of the 'get age' prototype method is illustrated, providing the number of years that have passed since the book was created, enhancing the functionality of the object prototypes.", "Practical example of manipulating data using the 'revise' prototype method A practical example of manipulating data is provided through the 'revise' prototype method, showcasing how the year property can be changed and a revised property can be added to the object.", 'The chapter demonstrates the use of object constructors to create multiple instances of an object, providing flexibility and reusability in programming.', 'It explains the presence of the proto object in the constructed object, indicating the inheritance from the prototype, with the example of a book object prefixed by its type.', 'The chapter briefly touches on object.prototype and its inherited methods, emphasizing the inheritance of methods by all objects.', 'Prototype methods improve memory efficiency and functionality By using prototype methods instead of putting functions inside the constructor, memory efficiency and functionality are improved, as demonstrated in the examples.']}, {'end': 1786.634, 'segs': [{'end': 1313.679, 'src': 'embed', 'start': 1262.571, 'weight': 0, 'content': [{'end': 1268.196, 'text': "All right, so I think that that's as far as I want to go with just creating different prototype methods.", 'start': 1262.571, 'duration': 5.625}, {'end': 1273.961, 'text': "I know that these are kind of weird examples, but I wanted to do something that's simple and understandable.", 'start': 1268.256, 'duration': 5.705}, {'end': 1277.745, 'text': "So now we're going to take a look at inheritance with prototypes.", 'start': 1274.542, 'duration': 3.203}, {'end': 1279.006, 'text': "So let's go to inheritance.", 'start': 1277.805, 'duration': 1.201}, {'end': 1287.213, 'text': "Let's actually copy the constructor and the get summary.", 'start': 1280.908, 'duration': 6.305}, {'end': 1288.915, 'text': "We don't need all the different methods.", 'start': 1287.393, 'duration': 1.522}, {'end': 1291.909, 'text': "So we'll paste that in.", 'start': 1290.888, 'duration': 1.021}, {'end': 1301.313, 'text': 'And then what I wanna do is I wanna be able to create a magazine object, but I want this magazine to inherit the properties of the book.', 'start': 1292.469, 'duration': 8.844}, {'end': 1310.077, 'text': "Okay, so let's do, let's see, what do we wanna do here? Let's say function magazine.", 'start': 1302.233, 'duration': 7.844}, {'end': 1313.679, 'text': 'So this is basically gonna be the magazine constructor.', 'start': 1310.097, 'duration': 3.582}], 'summary': 'Exploring prototype inheritance for creating a magazine constructor.', 'duration': 51.108, 'max_score': 1262.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1262571.jpg'}, {'end': 1398.739, 'src': 'heatmap', 'start': 1330.711, 'weight': 6, 'content': [{'end': 1334.333, 'text': 'Okay And let me just close this sidebar up.', 'start': 1330.711, 'duration': 3.622}, {'end': 1338.301, 'text': 'Now in here.', 'start': 1337.461, 'duration': 0.84}, {'end': 1347.343, 'text': 'what we can do is we can take the book object and we can say dot call and then what this will take in is the magazine itself or the instance itself.', 'start': 1338.301, 'duration': 9.042}, {'end': 1353.264, 'text': 'So this and then the the field so title author year.', 'start': 1347.383, 'duration': 5.881}, {'end': 1355.945, 'text': 'OK Now we also want a month.', 'start': 1354.224, 'duration': 1.721}, {'end': 1361.366, 'text': 'So for that we actually have to specify this dot month equals month like that.', 'start': 1356.045, 'duration': 5.321}, {'end': 1365.736, 'text': 'And then we should be able to create a magazine.', 'start': 1362.455, 'duration': 3.281}, {'end': 1374.639, 'text': "So we'll say, let's say instantiate magazine object.", 'start': 1365.776, 'duration': 8.863}, {'end': 1389.304, 'text': "So we'll say mag one equals new magazine and we'll pass in, we'll call it mag one author.", 'start': 1376.46, 'duration': 12.844}, {'end': 1390.505, 'text': "We'll say John Doe.", 'start': 1389.345, 'duration': 1.16}, {'end': 1398.739, 'text': "year we'll say 2018 and then month we'll say jan, all right.", 'start': 1392.415, 'duration': 6.324}], 'summary': 'Creating a magazine object with author john doe, year 2018, and month jan.', 'duration': 44.515, 'max_score': 1330.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1330711.jpg'}, {'end': 1577.347, 'src': 'heatmap', 'start': 1503.058, 'weight': 4, 'content': [{'end': 1513.907, 'text': "Now, if we look at mag1, there's one other thing I want to show you, and we look at the proto object here and we look at the constructor,", 'start': 1503.058, 'duration': 10.849}, {'end': 1519.251, 'text': "you'll see that it's still using the book constructor, which has title, author year.", 'start': 1513.907, 'duration': 5.344}, {'end': 1539.195, 'text': "If we want to change this to the magazine, let's say use magazine constructor, then we can say magazine dot, prototype.constructor,", 'start': 1519.391, 'duration': 19.804}, {'end': 1544.164, 'text': 'and we can just set that equal to magazine and save.', 'start': 1539.195, 'duration': 4.969}, {'end': 1551.27, 'text': "and now, if we take a look, You'll see that now the constructor is magazine and it uses title, author, year and month.", 'start': 1544.164, 'duration': 7.106}, {'end': 1556.512, 'text': "So that's basic prototype inheritance.", 'start': 1552.731, 'duration': 3.781}, {'end': 1562.473, 'text': "So now I want to look at a different way to create objects, and that's object.create.", 'start': 1557.792, 'duration': 4.681}, {'end': 1565.334, 'text': "And before I forget, I'm going to just rename this file.", 'start': 1562.993, 'duration': 2.341}, {'end': 1570.943, 'text': 'to five underscores object create.', 'start': 1566.44, 'duration': 4.503}, {'end': 1577.347, 'text': "And I know I'm going kind of fast guys, but this is a crash course, so I'm trying to just cram as much information as I can,", 'start': 1571.003, 'duration': 6.344}], 'summary': 'Covered prototype inheritance and object.create method in javascript.', 'duration': 36.137, 'max_score': 1503.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1503058.jpg'}, {'end': 1597.2, 'src': 'embed', 'start': 1571.003, 'weight': 2, 'content': [{'end': 1577.347, 'text': "And I know I'm going kind of fast guys, but this is a crash course, so I'm trying to just cram as much information as I can,", 'start': 1571.003, 'duration': 6.344}, {'end': 1582.23, 'text': 'while still trying to explain it well or semi well hopefully.', 'start': 1577.347, 'duration': 4.883}, {'end': 1589.255, 'text': 'So for object create, we want to first create an object of our prototypes.', 'start': 1583.111, 'duration': 6.144}, {'end': 1591.236, 'text': 'So the methods that we want to use.', 'start': 1589.555, 'duration': 1.681}, {'end': 1595.379, 'text': "Okay, and there's so many ways to do this type of stuff.", 'start': 1592.256, 'duration': 3.123}, {'end': 1597.2, 'text': 'You have all types of design patterns.', 'start': 1595.559, 'duration': 1.641}], 'summary': 'Crash course on creating object prototypes and methods.', 'duration': 26.197, 'max_score': 1571.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1571003.jpg'}, {'end': 1786.634, 'src': 'embed', 'start': 1715.061, 'weight': 7, 'content': [{'end': 1718.002, 'text': 'And if we look at our produce, we have get age and get summary.', 'start': 1715.061, 'duration': 2.941}, {'end': 1725.847, 'text': "OK, so you can see it's it's doing the same thing, all these different ways that we're doing this in another way, another syntax.", 'start': 1718.042, 'duration': 7.805}, {'end': 1731.009, 'text': "If you don't want to do like book one title, book one author, we could do this a little differently.", 'start': 1725.907, 'duration': 5.102}, {'end': 1741.202, 'text': "So I'm going to just Grab this first line and instead of doing it separately,", 'start': 1732.39, 'duration': 8.812}, {'end': 1745.945, 'text': 'we could just add in another parameter of an object and we could put each property.', 'start': 1741.202, 'duration': 4.743}, {'end': 1747.426, 'text': 'so we could say title.', 'start': 1745.945, 'duration': 1.481}, {'end': 1752.349, 'text': 'but we have to set an object with a value key and then whatever the value.', 'start': 1747.426, 'duration': 4.923}, {'end': 1762.776, 'text': 'so book one comma here and this will be what I keep forgetting author.', 'start': 1752.349, 'duration': 10.427}, {'end': 1773.847, 'text': 'And this will be here.', 'start': 1772.486, 'duration': 1.361}, {'end': 1782.051, 'text': 'Okay, so if I save that, we get the same exact thing.', 'start': 1773.867, 'duration': 8.184}, {'end': 1786.634, 'text': 'Okay, I rarely use this type of thing here.', 'start': 1782.071, 'duration': 4.563}], 'summary': 'Demonstration of using object parameters to simplify code for book titles and authors.', 'duration': 71.573, 'max_score': 1715.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1715061.jpg'}], 'start': 1262.571, 'title': 'Prototype inheritance and object creation', 'summary': 'Covers prototype inheritance, creating a magazine object that inherits properties from a book, utilizing object.create, and adding properties to objects using different approaches. it demonstrates inheritance using object.create and underscore inheritance, and introduces object.create as an alternative way to create objects with prototype methods.', 'chapters': [{'end': 1398.739, 'start': 1262.571, 'title': 'Prototype inheritance for magazine object', 'summary': 'Covers the process of creating a magazine object that inherits properties from a book, utilizing prototype inheritance and creating a magazine constructor function with added properties like month and instantiating a magazine object.', 'duration': 136.168, 'highlights': ['Utilizing prototype inheritance to create a magazine object that inherits properties from a book', 'Creating a magazine constructor function with added properties like month', 'Instantiating a magazine object with specific properties such as author, year, and month']}, {'end': 1597.2, 'start': 1398.739, 'title': 'Prototype inheritance & object.create', 'summary': 'Covers prototype inheritance in javascript, demonstrating how to inherit prototype methods using object.create and underscore inheritance. it also shows how to change the constructor of an object to utilize a different prototype. the chapter also introduces object.create as an alternative way to create objects with prototype methods.', 'duration': 198.461, 'highlights': ['Demonstrates prototype inheritance and underscore inheritance in JavaScript The chapter discusses how to inherit prototype methods using object.create and underscore inheritance, illustrating the process with code examples.', 'Shows how to change the constructor of an object to use a different prototype The chapter explains how to change the constructor of an object to utilize a different prototype, demonstrating the process with practical examples.', 'Introduces object.create as an alternative way to create objects with prototype methods The chapter introduces object.create as an alternative way to create objects with prototype methods, providing insights into its usage and benefits.']}, {'end': 1786.634, 'start': 1597.22, 'title': 'Object prototypes and object creation', 'summary': 'Discusses creating object prototypes, object creation, and adding properties to objects using different approaches, showcasing the same logic in various ways.', 'duration': 189.414, 'highlights': ['Creating object prototypes, object creation, and adding properties using different approaches The chapter focuses on demonstrating the creation of object prototypes, object creation, and adding properties to objects through different methods.', 'Demonstrating the same logic in various ways It showcases the consistent logic applied in different ways for object creation and property addition.', 'Illustrating the use of an object parameter to add properties The chapter illustrates using an object parameter to add properties to objects, providing an alternative approach to property addition.']}], 'duration': 524.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1262571.jpg', 'highlights': ['Utilizing prototype inheritance to create a magazine object that inherits properties from a book', 'Demonstrates prototype inheritance and underscore inheritance in JavaScript', 'Creating object prototypes, object creation, and adding properties using different approaches', 'Creating a magazine constructor function with added properties like month', 'Shows how to change the constructor of an object to use a different prototype', 'Introduces object.create as an alternative way to create objects with prototype methods', 'Instantiating a magazine object with specific properties such as author, year, and month', 'Illustrating the use of an object parameter to add properties', 'Demonstrating the same logic in various ways']}, {'end': 2419.814, 'segs': [{'end': 1870.558, 'src': 'embed', 'start': 1811.469, 'weight': 1, 'content': [{'end': 1816.528, 'text': "Let's go to index.html and change this to 6.", 'start': 1811.469, 'duration': 5.059}, {'end': 1819.929, 'text': "Understood Let's do six underscore classes.", 'start': 1816.528, 'duration': 3.401}, {'end': 1823.19, 'text': 'J.S OK.', 'start': 1820.009, 'duration': 3.181}, {'end': 1825.451, 'text': "And here we're going to create a class.", 'start': 1823.35, 'duration': 2.101}, {'end': 1831.353, 'text': 'And if you have any experience with other object oriented languages, this should be very familiar.', 'start': 1825.951, 'duration': 5.402}, {'end': 1837.055, 'text': "So we're going to say class book and we want to do constructor.", 'start': 1831.373, 'duration': 5.682}, {'end': 1843.239, 'text': 'And you can use classes now without having to use Babel or anything like that.', 'start': 1839.557, 'duration': 3.682}, {'end': 1846.461, 'text': "I think it's just IE that there's trouble with.", 'start': 1843.259, 'duration': 3.202}, {'end': 1847.321, 'text': "But I don't know.", 'start': 1846.541, 'duration': 0.78}, {'end': 1850.523, 'text': "When I develop, I don't care about IE.", 'start': 1848.542, 'duration': 1.981}, {'end': 1852.224, 'text': 'No one uses it anymore.', 'start': 1851.183, 'duration': 1.041}, {'end': 1855.726, 'text': "So for our constructor, we're going to do title.", 'start': 1853.304, 'duration': 2.422}, {'end': 1856.846, 'text': 'But you can if you want.', 'start': 1855.846, 'duration': 1}, {'end': 1861.449, 'text': "You can still use Babel to compile, even if you're just using classes.", 'start': 1857.206, 'duration': 4.243}, {'end': 1864.871, 'text': "So let's do title, author, and year.", 'start': 1862.329, 'duration': 2.542}, {'end': 1870.558, 'text': 'then this is going to be no different than our constructor function.', 'start': 1867.336, 'duration': 3.222}], 'summary': "Creating a class 'book' with 'title', 'author', and 'year' as constructor parameters.", 'duration': 59.089, 'max_score': 1811.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1811469.jpg'}, {'end': 2084.904, 'src': 'heatmap', 'start': 2032.205, 'weight': 0.962, 'content': [{'end': 2040.151, 'text': 'then we get 2018 revised, true, so same exact functionality, just a different way to do it.', 'start': 2032.205, 'duration': 7.946}, {'end': 2043.013, 'text': 'now we also have something called static methods,', 'start': 2040.151, 'duration': 2.862}, {'end': 2050.339, 'text': 'where you can actually have a method in your class that you can use without instantiating an object like this.', 'start': 2043.013, 'duration': 7.326}, {'end': 2058.465, 'text': "now, if you're using something that's specific to that instance, like for instance, the title, author year, then you wouldn't use a static method,", 'start': 2050.339, 'duration': 8.126}, {'end': 2062.368, 'text': "But let's say we want to create one.", 'start': 2059.545, 'duration': 2.823}, {'end': 2066.09, 'text': "So we use the keyword static and let's have one called top bookstore.", 'start': 2062.408, 'duration': 3.682}, {'end': 2069.793, 'text': "This is kind of stupid, but it's just to show you how to do this.", 'start': 2066.11, 'duration': 3.683}, {'end': 2075.456, 'text': "And then we're just going to return a string of Barnes and Noble.", 'start': 2070.774, 'duration': 4.682}, {'end': 2076.878, 'text': 'All right.', 'start': 2076.578, 'duration': 0.3}, {'end': 2077.899, 'text': "So that's all that does.", 'start': 2076.938, 'duration': 0.961}, {'end': 2081.181, 'text': "But it's static, meaning we don't have to instantiate it.", 'start': 2078.42, 'duration': 2.761}, {'end': 2084.904, 'text': 'In fact, if we were to let me just comment this out.', 'start': 2081.722, 'duration': 3.182}], 'summary': 'Introducing static methods to enable using methods without object instantiation in 2018 revised version.', 'duration': 52.699, 'max_score': 2032.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA2032205.jpg'}, {'end': 2337.905, 'src': 'embed', 'start': 2290.29, 'weight': 0, 'content': [{'end': 2297.876, 'text': 'So even you know using subclasses is a lot easier than using inheritance with ES5.', 'start': 2290.29, 'duration': 7.586}, {'end': 2302.279, 'text': "We didn't have to add those extra prototype lines and stuff like that.", 'start': 2297.936, 'duration': 4.343}, {'end': 2309.245, 'text': "So it does make it easier, but I also think it's important to kind of understand what goes on underneath.", 'start': 2302.72, 'duration': 6.525}, {'end': 2313.942, 'text': "And it can be really overwhelming because there's a lot of different ways to do things.", 'start': 2310.117, 'duration': 3.825}, {'end': 2321.871, 'text': "You know a lot of times you'll be using a framework which makes it nice because it kind of makes the rules for you and you just follow those standards.", 'start': 2314.643, 'duration': 7.228}, {'end': 2330.74, 'text': "But when you're doing it with vanilla JavaScript, It's hard to decide a design pattern or how you're going to create your objects.", 'start': 2322.452, 'duration': 8.288}, {'end': 2333.982, 'text': 'Are you going to use classes? Are you not?', 'start': 2330.76, 'duration': 3.222}, {'end': 2337.905, 'text': "What I would suggest is taking a project that you're going to create.", 'start': 2334.462, 'duration': 3.443}], 'summary': 'Using subclasses is easier than inheritance with es5, but understanding underlying concepts is important when dealing with vanilla javascript.', 'duration': 47.615, 'max_score': 2290.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA2290290.jpg'}], 'start': 1788.277, 'title': 'Javascript classes and inheritance', 'summary': 'Covers transitioning from es5 prototypes to es6 classes, discussing ease of use, constructors, and highlighting compatibility issues with ie. it also includes creating javascript classes, properties, methods, and static methods, emphasizing the importance of understanding design patterns and seeking guidance from experienced developers.', 'chapters': [{'end': 1870.558, 'start': 1788.277, 'title': 'Es6 classes and constructors', 'summary': 'Discusses transitioning from es5 prototypes to es6 classes, highlighting the ease of using classes and constructors and mentioning the compatibility issues with ie. the instructor also touches upon the option of using babel for class compilation.', 'duration': 82.281, 'highlights': ['The instructor discusses the transition from ES5 prototypes to ES6 classes, emphasizing the increased ease of use.', 'Mentions the ability to use classes without requiring Babel or similar tools, except for potential compatibility issues with IE.', 'Touches upon the option of using Babel for class compilation, while expressing a lack of concern for IE compatibility due to its declining usage.']}, {'end': 2419.814, 'start': 1870.558, 'title': 'Creating javascript classes & subclasses', 'summary': 'Covers the fundamentals of creating javascript classes, including properties, methods, and static methods, as well as creating subclasses with inheritance. it also emphasizes the importance of understanding design patterns and seeking guidance from experienced developers.', 'duration': 549.256, 'highlights': ['The chapter covers creating JavaScript classes with properties, methods, and static methods like top bookstore, which can be used without instantiating an object. It demonstrates the process of creating JavaScript classes with properties, methods, and static methods like top bookstore, allowing for functionality without instantiating an object.', 'The chapter explains the creation of subclasses in JavaScript, showcasing inheritance and the ease of using subclasses compared to inheritance with ES5. It explains the creation of subclasses in JavaScript, highlighting the ease of using subclasses compared to inheritance with ES5 and showcasing inheritance.', 'The chapter emphasizes the importance of understanding design patterns and seeking guidance from experienced developers for creating JavaScript classes and objects. It emphasizes the importance of understanding design patterns and seeking guidance from experienced developers for creating JavaScript classes and objects.']}], 'duration': 631.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vDJpGenyHaA/pics/vDJpGenyHaA1788277.jpg', 'highlights': ['The chapter emphasizes the increased ease of use in transitioning from ES5 prototypes to ES6 classes.', 'It mentions the ability to use classes without requiring Babel or similar tools, except for potential compatibility issues with IE.', 'The chapter covers creating JavaScript classes with properties, methods, and static methods, emphasizing functionality without instantiating an object.', 'It explains the creation of subclasses in JavaScript, highlighting the ease of using subclasses compared to inheritance with ES5 and showcasing inheritance.', 'The chapter emphasizes the importance of understanding design patterns and seeking guidance from experienced developers for creating JavaScript classes and objects.']}], 'highlights': ['The chapter covers creating JavaScript classes with properties, methods, and static methods, emphasizing functionality without instantiating an object.', 'The chapter emphasizes the increased ease of use in transitioning from ES5 prototypes to ES6 classes.', 'Demonstrates prototype inheritance and underscore inheritance in JavaScript', 'The chapter demonstrates the use of object constructors to create multiple instances of an object, providing flexibility and reusability in programming.', 'The chapter introduces the basics and core concepts of writing code in an object-oriented fashion in JavaScript.', "Illustration of creating 'get age' prototype method The creation and application of the 'get age' prototype method is illustrated, providing the number of years that have passed since the book was created, enhancing the functionality of the object prototypes.", 'The chapter demonstrates accessing all object values using console.log and object.values method, providing an array of values.', "The chapter explains constructors in JavaScript, demonstrating the creation of a constructor function 'book' and instantiation of objects 'book one' and 'book two' from it.", "Demonstration of implementing 'get summary' prototype method The process of implementing the 'get summary' prototype method is demonstrated, showing how it can be called for any number of books, improving memory efficiency.", 'The chapter demonstrates the use of object literal with properties like title, author, and year published, providing a clear understanding of defining key-value pairs within an object.']}