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.
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.
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.
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.
Arguably the most professional and in-depth look at OOP in JS on TH-cam. 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
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.
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.
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!
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.
Object oriented javascript: th-cam.com/video/PMfcsYzj-9M/w-d-xo.html 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
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!
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.
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!
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.
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!
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.
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.
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
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.
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
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?
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.
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.
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.
*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.
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.
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
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".
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)`.
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.
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 } }
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
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'.
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.
Amazing amazing amazing video, this is just brilliant thank you for these amazing explanations please keep the good work up, i was struggling a lot with OOP...
i have question if i have and in JS i have var x = { ...}; is it possible i can use document.getElementByID("box"); and use object x to manipulate div? I know i can use that for variables but is there any way i can use it on objects?
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.
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
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
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?
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.
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
I think that you can optimized code doing the next, wrap the creation of new objects in a function Example : Anwser(Value){ var ans = Object.create(answer); ans.constructor(value); return ans; } it's possible do this?
Awesome tutorial to clear many doubts I had, one correction to the Polymorphism example having "answer" object and "firmAnswer" child object When we return "answer.get.call(this)" in the firmAnswer.get method fn2(), as explained the function fn1() is executed but "val = 3.14159" because "this" points to firmAnswer object. So the answer in this case should be just "3.14159" and not "3.14159 !!" as fn1() is getting executed. Correct me if its wrong !! Thanks
Are you talking about the example at 11:30? If so, what's happening there is that fn2() is called first. It gets the current value from fn1(), adds "!!" to it, and returns that. Try it :-)
Technically, null is a primitive type, even though it responds "object" to the typeof keyword. Check out section 4.2 or 4.3.2 of the EcmaScript 5.1 spec (Ecma-262). That said, 'object' isn't technically a primitive type either, even though I included it in that section. :-) I should have called it "Language types" rather than "Primitive types."
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.
This is one of the highest quality video tutorials i've ever seen.
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
:)
Thanks bud ;)
How come Object is a primitive type?
Thank you very much! :)
It is not, it is a mistake
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
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.
Thanks!
Robert Schneiderman spot on, I got more out of this than I did from the book "JavaScript: The Definitive Guide" lol!
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.
8 years later, here I am. THE best oop tutorial for js I've ever seen. Thank you for your great work
among tons of youtube tutorial developers you are a star
How in the world i had never seen this channel before. This video is PLUS ULTRA
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.
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.
Arguably the most professional and in-depth look at OOP in JS on TH-cam. 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
This is the most precise resource I have found so far regarding the difference between the classical and prototypal inheritance.
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.
www.objectplayground.com/
The way the subject was explained in this video is completely mind blowing. Awesome!
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.
Man.... I'm at minute 1 and I already know this is a high quality video... amazing
The best tutorial I ever came across. Well presented with animations and detailed information about chaining. Thank you.
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!
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.
This is probably the BEST tutorial I've ever seen on OOJs, kudos to you James! Definitely checking out objectplayground!
One of the best tutorials I've ever seen! The world is a little bit more clear :)
This is an absolutely fantastic video. Truly one of the most visually helpful, well articulated tutorials I've ever seen, in any context.
Object oriented javascript:
th-cam.com/video/PMfcsYzj-9M/w-d-xo.html
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
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!
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.
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!
Thanks for this. That's the clearest explanation of JS prototypal inheritance I have seen yet.
Eureka ! I got it now, finally ! Thanks sir ! This explanation about "this" and prototype chain is awesome and so crystal clear !
this keyword and prototype chain explained in amazing way...bravo James..!!
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.
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!
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.
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.
I've never seen any presentation like this before. greater than great.
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
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.
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
one of the best tuts ive ever seen! well done and huge thanks! =D
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?
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!
Brilliant. Never seen such a great tutorial about the JS under the hood
This is just excellent! The most interesting presentation I've ever seen.
This video was great and easy to understand, unlike some other tutorials I have seen.
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.
At 2:16, should there be another arrow pointing to a myObject.bar() also?
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.
man this video is absolutely awesome. Best video on the subject hands down
Excellent tutorial for understanding OOJS.
Best video I've seen for OO javascript.,I wish you could provide more videos of letscodejavascript for free.
My video interview with Vojta Jína (of Karma fame) is free: www.letscodejavascript.com/v3/episodes/lab/2
Absolutely great tutorial on OOJS and JS prototyping. Thanks for sharing!
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.
Hi there. this video is trully amazing. Just wondering... how did you make this video sumary? Its amazingly professional. Thanks!
18:45 was the WOAHHHH moment I was waiting for, 10/10
Really well thought-out, nicely illustrated guide, thanks a lot!
Amazing! You're doing the world a great service, THANK YOU!
This is an incredible guide! Thanks James Shore!
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.
objectplayground seems like a pretty useful tool
Amazingly well presented video! Thanks for the resources and guidance!
*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.
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.
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
I like that ES6 makes creating classes almost exactly like Java. So much easier to read.
Very nice tutorial, really appreciate ur hardwork. Thanks
Thank you very much for this. Your work and the tool provided will help redecorate my knowledge of JavaScript.
Awesome! This is the nitty gritty I need to know about javascript. Thanks
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".
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)`.
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.
wow, this is exactly when i been looking for a very long time. thanks.
James, you are a very talented teacher!
Things are getting clearer now, thanks a lot.
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 } }
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
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'.
James Shore get it! Thank you very much!
Great tutorial James...!,
cleared my most of concept regarding javascript, I liked it. Thanks
Thanks, i needed a refresher on objects in JS. So many other languages 😵
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?
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
answer : syntax
This stands the test of time. Great video.
@15:50 about constructer, why is there an underscore for val why not just val?
That's to signal that `val` is supposed to be private.
Really awesome video. This is how JS should be explained. Such in dept explanation.
Best OOP tutorial (for JS) I've seen :)
Great video, easy to understand, inheritance well explained.
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.
This is a nicely done tutorial.
Am I the only one who hears John Hodgman schooling me on JS?
Amazing amazing amazing video, this is just brilliant thank you for these amazing explanations please keep the good work up, i was struggling a lot with OOP...
Great Job man. Awesome video tutorial and awesome website... Everything's great :)
i have question if i have
and in JS i have
var x = {
...}; is it possible i can use document.getElementByID("box"); and use object x to manipulate div?
I know i can use that for variables but is there any way i can use it on objects?
Informative and well produced. Thank-you.
That is a good piece of learning resource. Thumbs up!
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.
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
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
Very good in depth explanation. Thanks!
Thank you! Looking forward to more video on JS software development!
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?
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.
Hi James... thanks for this fantastic video.
You're very clear, I totally love this approach.
What version(s) of JavaScript do I need for the ".prototype" property and the "call()" function? For how long has JavaScript supported those features?
Subbed and Liked. Thanks for the video and for the accompanying site.
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
I think that you can optimized code doing the next, wrap the creation of new objects in a function
Example :
Anwser(Value){
var ans = Object.create(answer);
ans.constructor(value);
return ans;
}
it's possible do this?
Awesome tutorial to clear many doubts I had, one correction to the Polymorphism example having "answer" object and "firmAnswer" child object
When we return "answer.get.call(this)" in the firmAnswer.get method fn2(), as explained the function fn1() is executed but "val = 3.14159" because "this" points to firmAnswer object.
So the answer in this case should be just "3.14159" and not "3.14159 !!" as fn1() is getting executed. Correct me if its wrong !! Thanks
Are you talking about the example at 11:30? If so, what's happening there is that fn2() is called first. It gets the current value from fn1(), adds "!!" to it, and returns that. Try it :-)
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.
Technically, null is a primitive type, even though it responds "object" to the typeof keyword. Check out section 4.2 or 4.3.2 of the EcmaScript 5.1 spec (Ecma-262). That said, 'object' isn't technically a primitive type either, even though I included it in that section. :-) I should have called it "Language types" rather than "Primitive types."
Incredible guide James. Thanks a lot!!
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.
The quotes indicate that the result is a string. They aren't literally part of the result.
Brilliant Explanation Helped me a lot.... Thanks