The Definitive Guide to Object-Oriented JavaScript

[@digitalsketchguy]

This is one of the highest quality video tutorials i've ever seen.

[@adamromero]

1. Object Fundamentals 1:18 2. Functions & Methods 3:32 3. Prototypal Inheritance 5:46 4. Polymorphism & Method Overriding 9:13 5. Classes & Instantiation 12:11 6. The Classical Model 16:07 7. Instanceof 21:09 8. Future Directions 22:39 9. The Definitive Guide 23:25 10. Recommendations 24:56 :)

[@DavidsKanal]

[@danielreid1177]

Thanks bud ;)

[@SmartWizzard]

How come Object is a primitive type?

[@pinkponyofprey1965]

Thank you very much! :)

[@Bigdaddy91982]

It is not, it is a mistake

[@robertschneiderman5894]

James, it is not presumptuous at all to call this the "Definitive Guide to OO JS", because it is by far the best resource that I have come across that explains this. To anyone trying to learn OO JS, I would point them to this video without hesitation. This is really is "the definitive guide" to JS.

[@jamesshore]

Thanks!

[@Durhamred13]

Robert Schneiderman spot on, I got more out of this than I did from the book "JavaScript: The Definitive Guide" lol!

[@TroyAPeterson]

1:18 Object Fundamentals 3:32 Functions and Methods 5:46 Prototypal Inheritance 9:13 Polymorphism & Method Overriding 12:11 Classes and Instantiation 16:07 Classical Model 21:09 Instance Of

[@bilaltariq50]

among tons of youtube tutorial developers you are a star

[@willl0014]

How in the world i had never seen this channel before. This video is PLUS ULTRA

[@jamesshore]

Sorry about the confusion! You're correct on all counts. When you set object2 = object1, the object2 variable refers to the same object as the object1 variable. If you assign object2 dot a to 42, then object1 dot a will change to 42 as well.

[@lululu302]

8 years later, here I am. THE best oop tutorial for js I've ever seen. Thank you for your great work

[@Stimpy77]

This is really, really freaking good. JavaScript OOP has painfully led 99,000+ bloggers and video producers to come up with the most bewildering concoctions of misunderstandings and smoke-and-mirror pseudo-solutions that it has taken me most of my 16 year career to figure out what the @#$% is going on in this otherwise very simple language. Recent activities in Javascript at work have forced me to understand the topic much better, and this video from the very first screenshot of code validates everything I had finally come to understand.

[@Stimpy77]

www.objectplayground.com/

[@danielreid1177]

Arguably the most professional and in-depth look at OOP in JS on KZbin. Bravo! On a side note, I really wish that this guide could be updated with more recent approaches, such as the ones introduced by ES2016

[@christopherstephens7278]

I remember watching this when I first started programming and having no idea what you were talking about. It is fun coming back and understanding everything. Great job fitting all this information into < 30 minutes.

[@Ausermac]

Btw you could also think about objects as identifier/pointer pairs. Since that each property contains a reference/pointer - I'm using both terms interchangeably - I'm pretty sure they implemented objects as a list with two elements: identifier and pointer. And then stored the actual values being referenced elsewhere in memory. Then you don't have to resize the list if one of the string objects grows in length for example. Same goes for variables, they're just properties of the function object.

[@cristhiancantillo4922]

Man.... I'm at minute 1 and I already know this is a high quality video... amazing

[@spp762]

This is the most precise resource I have found so far regarding the difference between the classical and prototypal inheritance.

[@FernandoBasso]

The way the subject was explained in this video is completely mind blowing. Awesome!

[@Ausermac]

The difference between the examples that you gave at 02:46 is that arithmetical operations return a new object for the new value. The assignment operator simply copies the reference on the right hand side of the expression.

[@mikeruusan]

You explain things very clearly man. I have been looking for explanations about prototypes for almost 2 weeks already! I hope you get a lot of traffic from this. You are F'ing awesome!

[@vishumzn]

This is probably the BEST tutorial I've ever seen on OOJs, kudos to you James! Definitely checking out objectplayground!

[@tinkeringengr]

One of the best tutorials I've ever seen! The world is a little bit more clear :)

[@deeproy7292]

thank you...I appreciate the pain you have taken to dive deeper into the concepts of Object Oriented Javascript. Your lessons are quite addictive and your examples can be very easily done in the console. I recommend everyone to see through the video and practice every snippet in the console. Try to tweak and twist the properties of the objects you created in the console...It will be really great!

[@mdeekshitulu]

The best tutorial I ever came across. Well presented with animations and detailed information about chaining. Thank you.

[@CascadeCaps]

This is an absolutely fantastic video. Truly one of the most visually helpful, well articulated tutorials I've ever seen, in any context.

[@rajeshwarchinna]

this keyword and prototype chain explained in amazing way...bravo James..!!

[@nooxis]

Thanks for this. That's the clearest explanation of JS prototypal inheritance I have seen yet.

[@masteryourself786]

Hi James, at 23:16, if you use super() inside the get method of the FirmAnswer class, you will get an error: SyntaxError: super() outside of class constructor. To resolve this you have to use super.get() + "!!". thoughts?

[@jamesshore]

Yep, that looks like a mistake in the slide. I haven't tried it, but your version looks right to me. Sorry about the mistake!

[@freddietantoco8683]

Great video James! I've been scraping through blogs, videos, articles, etc on OOP in javascript. This is definitely the best guide I've seen, and it really cleared up a lot of topics for me. Thanks!

[@kabirsumn3517]

I've never seen any presentation like this before. greater than great.

[@ThierryLalinne]

Fantastic video! This is so much clearer than all explanations I've seen so far about OO in javaScript. Thank you very much for your effort and for sharing with us.

[@ling6701]

I like your presentation indicating the time of each part, as I was specifically interested in prototypal inheritance. Good idea. And now after watching it, I was looking for some visual clue about inheritance ( as the way to think about it ), and your animations nailed it. Super thanks.

[@Co-Monad]

This is exactly what I needed. This will be my first logical programming language and I needed to understand fundamentally how it works. If you're like me, this is your first language take notes, code the examples, and then review the video with the notes. You'll get be able to grasp the scope of JS faster.

[@gaofan2856]

Brilliant. Never seen such a great tutorial about the JS under the hood

[@lLenn2]

Thx, for this guide. I'm beginning a project in JavaScript shortly which needs OO-programming and this guide and the provided website is going to help me a lot!

[@lLenn2]

Also, the JavaScripts that I copied and altered in the past make more sense to me now. Never quite knew why they kept using functions instead of objects.

[@victorwestmann]

Hi there. this video is trully amazing. Just wondering... how did you make this video sumary? Its amazingly professional. Thanks!

[@jamesshore]

You're welcome! I do plan to add a transcript to objectplayground (.) com. I don't have plans to subtitle the video itself at the moment, though.

[@gloubiboulgazeblob]

Eureka ! I got it now, finally ! Thanks sir ! This explanation about "this" and prototype chain is awesome and so crystal clear !

[@widebandrecords902]

One of the best video's ever on js James no doubt.. I know js well for over 10years by the book and its nice to watch something that explains for once in animation how js truely works and shows that many libs and some frameworks really stop many from fixing bugs when they have to eventually look at the doc's and realise nothing makes sense and now JavaScript looks more like coreJavascript which it shouldnt be called core at all as we should always be building our own methods on the fly helping the standards follow the users wants for a change.

[@giannosfor]

Best video I've seen for OO javascript.,I wish you could provide more videos of letscodejavascript for free.

[@jamesshore]

My video interview with Vojta Jína (of Karma fame) is free: www.letscodejavascript.com/v3/episodes/lab/2

[@patrykkarpinski4711]

one of the best tuts ive ever seen! well done and huge thanks! =D

[@imrannazir6931]

I would also suggest reading Crockfords book 'Javascript the Good Parts' because it can help you develop a best practice by cutting out things that can be problematic like the 'new' keyword.

[@xhappybunnyx]

18:45 was the WOAHHHH moment I was waiting for, 10/10

[@Idontcareatallbro]

This is just excellent! The most interesting presentation I've ever seen.

[@calvinfernandes1054]

Great video James. You describe all the concepts really well. You use of diagrams enhance your explanations and make it very clear. Thanks a lot for doing this. Hope you make more videos like this one. Cheers

[@dumitruungureanu5084]

At 2:16, should there be another arrow pointing to a myObject.bar() also?

[@veeraiahb4196]

Excellent tutorial for understanding OOJS.

[@GooseTheFlick]

This video was great and easy to understand, unlike some other tutorials I have seen.

[@abhimanyuaggarwal8123]

Hey +james shore can you help me out with what you are trying to say at 19:50 "The way it knows to create lifeAnswer with Answer.prototype as its prototype is because javascript looks at the prototype property of the constructor when you use the new keyword".

[@jamesshore]

When you say `new SomeFunction()` JavaScript creates a new object. That object has a prototype that's equal to `SomeFunction.prototype`. It's equivalent to saying `Object.create(SomeFunction.prototype)`.

[@abhimanyuaggarwal8123]

thanx a ton also I'm new to this all coding and open source can you suggest how to proceed in this universe of open source and how to contribute and learn.

[@mohessaid]

This is the best demonstration I ever seen or read about Javascript, the thing that I can't understand is the 31 unlike on the video statistics? Really weird.

[@MarkConnolly-p2b]

This stands the test of time. Great video.

[@iWouldWantSky]

James, you are a very talented teacher!

[@keanukentgargar5743]

@15:50 about constructer, why is there an underscore for val why not just val?

[@jamesshore]

That's to signal that `val` is supposed to be private.

[@DaniloSouzaMoraes]

man this video is absolutely awesome. Best video on the subject hands down

[@LidoFernandez]

This is an incredible guide! Thanks James Shore!

[@DrTube893]

Things are getting clearer now, thanks a lot.

[@skube]

This is a nicely done tutorial. Am I the only one who hears John Hodgman schooling me on JS?

[@fallenentity2]

I like that ES6 makes creating classes almost exactly like Java. So much easier to read.

[@dg1234uk]

The reason why you might need to set the sub classes prototype.constructor (20:16) explained in this stack overflow question stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor

[@tchopel]

wow, this is exactly when i been looking for a very long time. thanks.

[@compromisenonono8762]

hi James,good video,only one thing puzzled me, At 11:39 should "answer.get.call(this)" be "answer.get().call(this)"; can parenferces"()"be omit?

[@ardagok4343]

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call answer : syntax

[@AndFinally]

Really well thought-out, nicely illustrated guide, thanks a lot!

[@kosson]

Thank you very much for this. Your work and the tool provided will help redecorate my knowledge of JavaScript.

[@Yosie432]

Absolutely great tutorial on OOJS and JS prototyping. Thanks for sharing!

[@GuilhermeSa001]

On 5:07 he says use "strict" mode instead of "this". What does he mean?

[@1pauluzz1]

Guilherme Sa That's not what he says. He says "use strict mode whenever you can, because that will force "this" to be "undefined". Strict mode is what it implies: a stricter 'version' of JavaScript - it does more checking. Read: stackoverflow.com/questions/8651415/what-is-strict-mode-and-how-is-it-used

[@GuilhermeSa001]

thank you Paul

[@mikemalone4867]

Great video! You can also use the parasitic inheritance pattern to resolve some of the classical inheritance problems you described. It makes it much easier. It looks like ECMA Script 6 will be the way to go when it's released this year. I can't wait.

[@trungly76]

objectplayground seems like a pretty useful tool

[@WilsonMar1]

Object oriented javascript: kzbin.info/www/bejne/hn7JlKaPr89gb68 by James Shore letscodejavascript.com My notes and when each is covered: [01:18] Object fundamentals - key-value pairs. [02:15] Primitives are copied by value (not connected after copy) [02:42] Objects are stored by reference (to same value) [03:32] Functions & Methods (use strict mode) [05:46] Prototypal Inheritance (look for val up chain to parents) [09:13] Polymorphism & Method Overriding (same var property name, different behavior/method) [12:11] Classes & Instantiation: [13:11] Prototypes are called classes. Objects which extend them are called instances. A class that extends another class is called a subclass. [13:26] Creating an instance is called instantiation. Encapsulation provides access to data value through methods. Use constructors to initialize object value. Define constructor in parent method to initialize object value via inheritance. Underline in front of private property names. [16:07] The Classical Model: new keyword to define constructors. Capitalize first character of constructor names. Function names are all lower case. [19:40] Subclasses [21:03] Prototypal vs. Classical Model side-by-side [21:09] Instanceof: [22.39] Future Directions (in ECMA 6 / ES6 “class” syntax) [23:25] The Definitive Guide objectplayground.com presents a visualization of JavaScript code. [24:56] Recommendations

[@estarshono]

Great video! Clear so many points I didn't get before in JS OOP! I got one question though: at 15:22 you pass to magicAnswer's constructor '3'. JS can't find methof called constructor in magicAnswer itself and in FirmAnswerPrototype so it looks it up to AnswerProto and finds it there. Why 'this' in fn0 refer to the magicAnswer object: so this._val = 3 sets _val of magicAnswer? I thought that it will get the same problem that was outlined at 11:16 Or may be constructor is a kind of keyword and sets 'this' always to calling object or something like this

[@jamesshore]

Thanks! 'this' is set to the object on the left of the dot. We call the constructor by running "magicAnswer.constructor", so 'this' is set to "magicAnswer" because it's on the left side. It's not the same as 11:16--in that case, our function ran another function, which changed the value of 'this'.

[@estarshono]

James Shore get it! Thank you very much!

[@moerion]

Amazing! You're doing the world a great service, THANK YOU!

[@joejavacavalier2001]

What version(s) of JavaScript do I need for the ".prototype" property and the "call()" function? For how long has JavaScript supported those features?

[@Cubinator73]

Best OOP tutorial (for JS) I've seen :)

[@grantfindlay4805]

Hi James, So your advice to use the classical model is in direct opposition to Douglas Crockford... isn't it? Is this something you can comment on to clarify?

[@jamesshore]

Not really, sorry. You'd have to be more specific. I haven't been paying attention to Crockford comments on this subject.

[@grantfindlay4805]

James Shore From 'Javascript The Good Parts': "The pseudoclassical form can provide comfort to programmers who are unfamiliar with JavaScript, but it also hides the true nature of the language. The classically inspired notation can induce programmers to compose hierarchies that are unnecessarily deep and complicated. Much of the complexity of class hierarchies is motivated by the constraints of static type checking. JavaScript is completely free of those constraints. In classical languages, class inheritance is the only form of code reuse. JavaScript has more and better options."

[@jamesshore]

Grant Findlay I agree with Crockford that you need to understand the true nature of JavaScript prototypal inheritance in order to understand the language. That's why I started with the prototypal model in the video. However, I think Crockford goes too far when he conflates the classical model (good) with deep inheritance hierarchies (bad). You can have one without the other. The classical model is nothing more than a way of setting up a prototype chain. Under the covers, using the classical model and using Object.create() both yield the same result. But, in my opinion, the classical model is more common and yields more maintainable code (because it has common conventions). That's why I recommended it. If you disagree with that recommendation, that's fine. There's nothing wrong with using Object.create() instead.

[@AmanGupta_Dev]

Great tutorial James...!, cleared my most of concept regarding javascript, I liked it. Thanks

[@ZaharaMiriam]

This is a very well explained video and easy to follow. Do you have any videos which explain accessing properties within objects that have variable names which don't follow variable naming rules: e.g. "hello": "world" I hope you might have some further videos on this

[@ZaharaMiriam]

I have seen videos which explain this about needing to occur because of word spacing in key names i.e. "hello world": "hello" and using bracket notation, however I am specifically looking for answers which would help with object lookup where they are single words within double quotes for both key and value. thanks

[@adamzerner5208]

*Nevermind* Referencing the screenshot @ 20:49 Regarding whether the line FirmAnswer.prototype.constructor is necessary or not: The way you have it set up, new FirmAnswer() will... - look on FirmAnswer.prototype for a constructor function to run - not find it - look at FirmAnswer.prototype's prototype, which is Answer.prototype - look for a constructor function - find it - run it Note: it will *not* run FirmAnswer's constructor, it'll run Answer's constructor. In this particular case, FirmAnswer's constructor just runs Answer's constructor, so you won't notice a difference between the two. But if you had something in FirmAnswer's constructor that wasn't on Answer's constructor, you would notice a difference. The thing on FirmAnswer's constructor that isn't on Answer's constructor would not be run.

[@jamesshore]

Actually, it *does* run FirmAnswer's constructor. Try this code in the visualizer at objectplayground.com: ```javascript function Answer(value) { this._answer = true; this._val = value; } Answer.prototype.get = function fn1() { return this._value; }; function FirmAnswer(value) { this._firmAnswer = true; Answer.call(this, value); } FirmAnswer.prototype = Object.create(Answer.prototype); // FirmAnswer.prototype.constructor = FirmAnswer; FirmAnswer.prototype.get = function fn2() { return Answer.prototype.get.call(this) + "!!"; }; this.lucky = new FirmAnswer(7); ``` You'll see that this.lucky has "_firmAnswer" set to true, which means that the FirmAnswer constructor was called. When you run `new FirmAnswer()`, JS runs the function you provide. It doesn't look for FirmAnswer.prototype.constructor, it just runs FirmAnswer(). So the value of `constructor` is irrelevant in this case. This is the algorithm `new` uses: 1. A new object is created, inheriting from FirmAnswer.prototype. 2. FirmAnswer is called and `this` is bound to the newly created object. 3. The object returned by `FirmAnswer()` becomes the result of the `new` expression. Because FirmAnswer doesn't return a value, the object created in step 1 is used instead. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new for details.

[@adamzerner5208]

James Shore Thanks, you're right. Also, it seems that "The constructor property makes absolutely no practical difference to anything internally. It's only any use if your code explicitly uses it." - stackoverflow.com/questions/4012998/what-it-the-significance-of-the-javascript-constructor-property

[@akki4u]

Very nice tutorial, really appreciate ur hardwork. Thanks

[@SJ-ci8oi]

Amazingly well presented video! Thanks for the resources and guidance!

[@bashful228]

12:00 Could you please explain the syntax of the line return answer.get.call(this) + "!!"; Saying that tells it this is now firmanswer is something I understand that you are saying but it don't understand how that dot syntax extension of answer.get works to do it in terms of how javascript looks at the child obects appended (i.e. call(this)). Is it passing a special function to answer.get that answer.get knows how to handle because of it's basic object inheritance being a Javascript function or what? Bit confusing.

[@vipinsharma-zx9cb]

Hi James... thanks for this fantastic video.

[@iCPUTips]

During the "Classes and Instantiation" section, doesn't the first example display Polymorphism & Instantiation? Because you are calling the get() method, but the value is changing, just like you did in the Polymorphism section.

[@bornaeon]

Great Job man. Awesome video tutorial and awesome website... Everything's great :)

[@EricDaily]

You're very clear, I totally love this approach.

[@Ascaron50]

7:57 it has to go over all of the objects ? this can take some tome if you have more than 10 i guess :D

[@jamesshore]

Ascaron50 The VM optimizes it, so it doesn't literally search like that. But the effect is the same.

[@eddiegere]

Awesome! This is the nitty gritty I need to know about javascript. Thanks

[@jamesmurphy5499]

James This is a brilliant video. I want to point out there's a few mistakes. In particular you specify first time function declarations as methods incorrectly by giving them an EXTRA name. eg: var X = { name:'James', getName:function extraName() { return } }

[@Laganstoop]

Thanks, i needed a refresher on objects in JS. So many other languages 😵

[@aldialfarnando6813]

Hi first of all you made a great video. Well done! I tried to run the script and found out that at 9:57 --> firmAnswer.get(); will result to 42!! and not "42!!". Or maybe you meant to put "42" and "42!!" instead, ignoring the quotation marks. Thank you.

[@jamesshore]

The quotes indicate that the result is a string. They aren't literally part of the result.

[@denismaximov8902]

Great video, easy to understand, inheritance well explained.

[@tube007tm]

At time 15:39, you mention that _val is private. However its not private. You can do a console.log(lifeAnswer._val) and it will still print 42. Which means its accessible outside and is public. I dont think there is a way to declare private variable inside object literal. However if you are defining a constructor function like below, you can have both private and public variables.. function AnswerFunction(){ var _privateVar = 10; this.publicVar = 20; this.getPrivate = function(){ return _privateVar; } } var x = new AnswerFunction(); console.log(x._privateVar) ; // undefined. console.log(x.getPrivate()) ;// 10 console.log(x.publicVar );// 20

[@jamesshore]

As I said a few seconds before, the underscore is a signal that the variable is private, but JS doesn't enforce it. It's possible to write code that enforces variable privacy, such as the example you provided, but I don't find the added complexity to be worth it.

[@tube007tm]

James Shore So you are saying any variable you put an underscore becomes private, though its not? How can you indicate something to be private which cant be enforced to be private. and.. when a variable is actually private like the example above then it is added complexity and not worth it? By the way this definition of private and public is from Douglas Crockford's video.

[@jamesshore]

rk Sahoo I don't know how to explain it further, sorry.

[@nicholasaurus]

Every time you write call(this) to send the context up the chain even when not necessary for what you want to do it's like you're forcing javascript to act in a way it doesn't want to. You could just use the constructor.

[@2sourcerer]

The memory models constructed from classical model and prototypical model is almost the same (I was mislead to think they are different initially as they are named as different "models", but it really is only different in the construction). However, if I am not mistaken, there is once difference between the two. It is that the prototypical model's constructor's prototype property does not point to the prototype itself. (AnswerPrototype.constructor.property is not AnswerPrototype) Whereas in classical model that would be the case, as when using new, it has to know the constructor's prototype to make the chain. Is what I have said true?

[@donnguyen5164]

Very good in depth explanation. Thanks!

[@maksymdudyk1718]

Thank you! Looking forward to more video on JS software development!

[@codewithlax]

I am calling a method in onchange event of a dropdown , but after calling that method two to three times a delay is happening while calling the method and the screen is getting freeze.Is there any way that i can end the currently running event.

[@dharam1987]

I Have one question which confused me. You have included "Object" in prmitive data type in the video and said they are refered by value. But during further example, Objects are refered by reference. Could you please explain that a bit. After googling a bit, I saw that there are only 5 primitive types in JS and Object should not be a premitive type.

[@jamesshore]

Yes, I misspoke. I should have said "language types," not "primitive types." Objects aren't primitives. Objects are stored as references. Those references are passed by value, like all JS variables, which means that the reference is copied when you call a function or assign a variable. Practically speaking, all variables containing a copy of the same reference look like the same object. The distinction matters when you make changes to an object that's passed into a function: var a = { foo: "bar" }; func1(a); // a now contains { foo: "HI" }; func2(a); // a still contains { foo: "HI" }; function func1(obj) { // We change what's inside the object, but not the object reference itself. obj.foo = "HI"; // This change is visible to the caller. } function func2(obj) { // We change the object reference itself. This creates a new object and a new object reference. obj = { foo: "BOOM" }; // This change is not visible to the caller, because we didn't change the object that the caller sees. }

[@dharam1987]

James Shore Thanks James for such a superfast response. I have completed 6mins of your video in 1hr, Giving a break now. Initially I didnt think that this 27min video really covers a lot. Thanks for sharing this.

[@andresrivera2602]

Thanks for this video..how about making one on ExecutionContext?

[@jamesshore]

Andres Rivera Good idea :-)

[@cesarolavo]

That is a good piece of learning resource. Thumbs up!

[@karlee8608]

Really awesome video. This is how JS should be explained. Such in dept explanation.

[@Ausermac]

var x = {"a": "foo"}; var y = x; y.a; // returns pointer to string object "foo". y.a = "bar"; // changed pointer contained in property "a" of the object referenced by both variables y and x. y = {}; // Changed pointer contained in variable y. y.a = "hello world"; x.a; // returns pointer to string object "bar". When you change the property of a plain object, you don't modify the object itself, because the pointer in the object's variable will still point to the same starting point of the object

[@camerenisonfire]

Informative and well produced. Thank-you.

[@Ausermac]

I disagree about 02:46, properties of functions - commonly called variables - or properties of plain objects return/pass their value by copying the value contained in the property (the reference to the object - could be any type of object). I'll explain how it works in my next post.

[@mightyrighty100]

THX so much for this video i finally understand things i was always confused about . did ypu animate everything yourself?? GREAT work keep it up.

[@TOA65]

Incredible guide James. Thanks a lot!!