Let me spoil this terrific video with some pedantic comments: 1. __proto__ isn't a property on myCat directly, it is in fact an accessor property ("get"/"set") on Object.prototype. You can in fact see this later in the video once Object.prototype is printed. 2. It is not true that all objects ultimately delegate to Object.prototype, I can totally create, using Object.create, an object with a null prototype, or a chain which doesn't lead to Object.protoype. And because of point 1. above, __proto__ will not be available on such an object.
@@stiventson4464 , That is because, JavaScript engines traverses up the prototype chain for the "myobject" object and ___proto___ accessor is a property defined on the Object constructor function's "prototype" object.
Great explanation for the "__proto__" property, but I'm sure that some beginners could not grasp what ''prototype'' property means. For me, it seems like we define a static property in C# for example. So, all the objects that will be created by a constructor function, and if the constructor function has a property in the 'prototype' property, the property that is inside of the 'prototype' property will be a static property or a static function if it was a function for the created objects. It's so easy in C# and Java to implement it, but when I came to JavaScript it really took me time to understand it. this simple example will give some idea of what I'm trying to explain : function foo() { this.prop = 'No Name'; } foo.prototype.prop2 = 'Hi'; let obj1 = new foo(); let obj2 = new foo(); // Try first this : obj1.prop2 = 'Hello'; // Then this : //obj1.__proto__.prop2 = 'Hello'; console.log(obj1.prop2); console.log(obj1.__proto__.prop2); console.log(obj2.prop2); console.log(obj1); console.log(obj2); console.log(foo); ==> Great video, You really have a good content, plz don't stop doing more explanations on JS.
Thank you so much for this video! It really helped me finally to somehow understand the magic behind __proto__ vs prototype a little bit better! Keep up the good work! Cheers
As current iterations of ES add more deceiving styling it feels as if it's more important than ever to bind ourselves to the root functionality in order to more cautiously apply the new syntax. Thank you so much for taking the time to demystify some of the more daunting aspects of JavaScript architecture. For me personally this lecture series has been the most valuable of all funfunfunction tutorials! (My comment didn't start out as wordplay, for the record...)
To be completely honest, I've been working with JS for almost 8 years, and by watching your videos, I pretty much revisited a bunch of stuff that I actually forgot how to work, but was using it at daily for years. I totally forgot some of the foundation topics and realized that, IMHO, JS community pushed many of us a lot into frameworks and hype, instead of relying on the core stuff. Very good videos, I'm gonna show these to my wife so she can learn :)
Good Monday morning and welcome to Fun Fun Object :D Long winded siide note: about 2 months ago I discovered Elixir and Elm from perusing your tweets, and I've been falling in love with Elm, so thanks for that! Elm's Maybe.andThen function has helped me to finally kind of understand monads, and more specifically the monadic bind operator (>>= in haskell), which `andThen` is surprisingly an implementation of for Maybe. It's funny that they can low-key teach you a notoriously difficult to grasp concept that gets avoided at every frp conference by just naming it something else. Several days ago I finished rewriting a big project for a Minecraft redstone channel of which I am a member(although the project in question won't see the light of day until another much bigger project is completed), and once I got a hang of solving problems in a purely functional paradigm, it became almost trivial to write large-ish blocks of code that either work the first time, or after I fix some typos or minor type errors that the compiler kindly points out.
Two-and-three-quarter minutes: pause video, stop laughing, wipe eyes. Now I have to decide whether I just press Play or if I rewind That. I truly love the InterWebs. Thanks MPJ. You make Mondays better. :)
Two-and-three-quarter minutes: pause video, stop laughing, wipe eyes. Now I have to decide whether I just press Play or if I rewind That. I truly love the internet. Thanks MPJ. You make Mondays better. :)
I am reading Kyle Simpson's book series and I had doubts about the prototype property, but after watching your video, I don't have them anymore. Amazing content
Keep up the good work! Im a professional PHP and Java-developer for about 10-12 years now. Your videos really opened my eyes. Just learnt React, MongoDB & GraphQL last week. Awesome technology! Were also in the process to migrate over to a more javascript-based application for our services.. since we run everything on Java atm. Also really entertaining to watch, it makes it much more fun to learn than just scrolling through thousands of pages of Documentations... Im really excited and keep up the good work!
This video helped tons, but it really sank in after experimenting on my own. In my experiments, I can describe it like this: When you do function Dog() {}, then Dog will have a "prototype" but not "__proto__. When you instantiate the dog into an object... const myDog = new Dog() Then myDog will have a __proto__ but no prototype. If you create an object from an "object literal". For example: const Dog = {} Then Dog will not have a prototype, but will have a __proto__. But the __proto__ will be equal to the global object. (Object.prototype).
MPJ you are amazing! I was watching this while my wife was next to me. She told me she was able to follow along even though she's never done any programming herself. Thank you so much for putting up these videos! One thing I would like to see, I wonder if I will even be able to describe it well, is an explanation of how an object goes down a rabbit hole. Sometimes I will be debugging with dev tools and see an object that goes Child/Parents/Child/Parent all the way down without showing me any usable information. I know that likely isn't very clear so will try to do a screen grab next time it comes up. Thanks again!
To make things more confusing: Object is also an object because all functions are objects. Another interesting thing is that __proto__ of a function is a function. Yay!
this was awesome, and honestly better than the earlier ones. Might be the browser environment and the knowledge build up at this point in the series, but, I think it's a significant improvement.
Object.newPrototype ? Loved this video, I understand object creation so much better because of this series! Have also really enjoyed your pair programming stuff. Seeing experienced developers go through the trial and error of real projects is really helpful to me in my journey learning javascript. Great to see that everyone runs into silly problems and, useful to see you work through them!
The final few minutes were really gold - it was unclear at first - but revisiting it makes it a little bit more understandable Also - THANK YOU this series is great
Nice! That was very insightful. Totally agree with the term "Prototypal Delegation". ;) Just to add my 2 cents: Basically everything is objects in JavaScript. (or that's how I try to understand it) I will refer to "created from" as "instantiation of the type's prototype field". Maybe "instantiation" is not the right word here, couldn't think of a better term. "Object", "Function", "Array", or custom ones such as function abc () { } are all "Function" objects. Yes, "Function" is a "Function" object. Will elaborate it later. > typeof Object -> 'function' > tyepof Function -> 'function' > typeof abc -> 'function' > typeof Array -> 'function' Next, "Object" is a function object so that tells us that it was created from "Function", which means: > Object.__proto__ == Function.prototype -> true > Array.__proto__ == Function.prototype -> true > abc.__proto__ == Function.prototype -> true "Function" is bit special and is used to create a function object, which means > typeof Function.prototype -> 'function' For others: > typeof Array.prototype -> 'object' > typeof Number.prototype -> 'object' As usual (for custom ones): > typeof abc.prototype -> 'abc {}', because > abc.prototype.__proto__ == Object.prototype -> true and: > typeof Object.prototype -> 'object', which I believe is the root of all objects, because: > Object.prototype.__proto__ -> null > Array.prototype.__proto__ -> 'object' > Array.prototype.__proto__ == Object.prototype -> 'true' > Array.prototype.__proto__.__proto__ -> null > Function.prototype.__proto__ -> 'object' > Function.prototype.__proto__ == Object.prototype -> 'true' > Function.prototype.__proto__.__proto__ -> null Now, at the beginning I had mentioned that "Function" is a "Function" object, because > Function.prototype == Function.__proto__ -> true, which makes me think that "Function" is created from itself :)
The outcome I got from this: 'prototype' property only exists on functions, so objects can be created with 'new' keyword. It is empty by default and it is what get assigned as '__proto__' of an object returned by 'new'. The object where actual property lookup is delegated to (down to the chain) is the content of '__proto__' property which exists both on functions and on objects (though '__proto__' is not part of the language and can not be used reliably).
After watching and reading different explanations of the topic, at last, I understood the difference between properties "prototype" and "__proto__". Even though explanation already was in this video, I still couldn't figure out, if prototype and __proto__ basically means the same thing and even points to the same object, why they can't be just one property, why we need both? So, the reason is - it's actually two different things. "__proto__" points to the parent prototype which "created" current object, and "prototype" points (creates) to new prototype object which can be later used as a parent prototype for objects inherited from the current object. Here's a code example: function foo1() {} foo2 = new foo1(); foo3 = new foo3(); In this case foo2.__proto__ === foo1.prototype, foo3.__proto__ === foo2.prototype and so on. I hope this explanation will help somebody.
again, thank you for your great videos about JavaScript. suggest you should mention, that a function always returns this by default, unless you do not return something else. for that to remember I always write return this; into the last line of a Constructor function or in this case a no constructor finction. function no_constructor() { var myList = [ "cat","dog","crocodile"]; this.showItem = function( id ) { return myList [ id ]; }; this.howMuch = function( id ) { return myList.length; }; return this; } var animal = no_constructor(); alert(animal.showItem( 0 ) ); alert(animal.howMuch() );
While I understand your example, I think you should add a note that it's considered bad practice to define methods like that. Secondly, I think this kind of practice only adds bloat to your code and is very unnecessary! You should also fix: "unless you do not return something else" to "unless you return...".
Thank you so much !!! Everything is so cristal clear now ! Thank you man really really appreciated ! The internet and the youtube is full of confusion about this prototype topic . I watched many videos and those guys confused me more . Your video clicked , everything makes sense now , Thank you I can't say enouth , thank you !
Please continue your series next week. You discussing all the type of questions I asked for as I began as a JS-deveoper one year ago. I almost gave up because all this stuff confused me so much but after all, JS just makes more fun as c# for me :-) (never thought that..). I've really NOWHERE found that simple reference, that describes the difference between __proto__ and prototype. I wasted approximately 4 days of time to explore that and as a result, I lost my motivation and gave up... So annoying. Thanks for all your stuff and go on :-*
+Pad0r thanks a lot for your kind words! Can't promise I'll continue next week, but I definitely want to continue this series, in learning a lot myself.
funfunfunction You spend so much time to us, I just want you recognize that there are people out there who are very great full for that. :-) I worked for a large company in past and I think, one of the biggest issues is, that everyone has to be perfect. Any tasks have to be done in time and fails are not allowed. It's most of the time a estimate failing to catch up customers (to tell the truth). But this digital world is just to complicated to give accurate estimations without getting time trouble. I hope that attitude will be change in the future.
Another great video! I'm really looking forward to more info on prototypal 'inheritance'. Thanks for all your hard work on these videos MPJ, please keep them coming! :)
Well explained, I will use the pen delegation example when I explain prototype to others. You should do an episode about the difference between changing a property value on the prototype object vs changing it on an object with the same prototype. It also confuses a lot of people.
Mpj i was curious to know what kind of books would you recommend to know a bit more about javascript underlines and also about design patterns. Maybe you could do a video about this topic and talk about your professional path and what resources you used to help you grow as a developer?
Object.prototypeAddProperty seems like the most logical thing it could have been to me since this is exactly what it does: adds a property. Although then it probably should have been a method like Object.prototypeAddProperty('foo', 'bar') or something
Great great video! I have learned so much because it's fun watching your videos. My only suggestion is that you use a small whiteboard instead of paper. It seems like an awful lot of paper being used.
+Francis Ngo whiteboards have glare and I can throw them around and tear them. ;) also, considering food packaging, newspaper, advertising and postal main, the paper I use in these videos is by far my best use of paper all week among myself and everyone I know.
Another excellent video! If I could change one thing about JavaScript's new-object-this-mess, it would be to dump ".prototype" completely, or rather use .prototype directly and ditch constructor functions. Basically, I would have the new keyword act like Object.create or Object.setPrototypeOf. // How Will would have 'new' would work function new (prototype) { return Object.setPrototypeOf({}, prototype) } let Dog = { breed: 'munchkin', bark () { console.log('woof') } } let jim = new(Dog) jim.breed // 'munchkin' jim.bark() // 'woof' jim.prototype // undefined jim.__proto__ // undefined jim.constructor // undefined jim.__prototype__ // Object {breed: '"munchkin"}
Hi MPJ, really enjoying your videos - you make them a lot of fun to watch. I just had to ask as I've seen you use it in several of your prototype related videos ... MDN actually lists Object.setPrototypeOf() as a method *not* to use based on what it calls poor performance in all JS engines. I haven't done any speed testing myself. In this case I decided to trust the makers of the engine. :) Instead, I use: object_with_prototype = Object.assign( Object.create( proto_obj ), data_obj ); And it has been working very well. But, I'm also relatively new to using prototypes. I've been using plain objects for data and calling static methods to work with that data for quite some time. But I like the simpler code and ease of accessing functionality that prototypes afford so I started converting over to them. Interested in your thoughts! Some reading that I've come across. MDN Object.setProtoTypeOf: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf StackOverflow discussion: stackoverflow.com/questions/23807805/why-is-mutating-the-prototype-of-an-object-bad-for-performance
+Micheal Hall yeah, I mention briefly in the videos that you don't use setProtypeOf in real apps, but I don't dwell on it too much, the purpose here is to explain how the prototype works, and for that, setPrototypeOf is great. I plan to talk about the performance problems of setProtypeOf in the Object.create episode.
I must have missed that! I'll keep an eye out for the video. On another note, the other day I was refactoring a function that accesses an options object rather extensively and thought, "Aha! The perfect place for destructuring ..." Of course the day prior I had watched your video on that very subject. So thanks for that!
+ibuprofen303 I'm a religious user of Lernberger Stafsing Soft Wax. It's an upgrade over my former Weapon of choice which was Fudge Hair Shaper. Sweden doesn't have hot weather. ;)
funfunfunction Oh yeah fudge, I remember that. The pots seemed to get progressively smaller. Lovely smell though. Of course, Sweden, you don't have the hot weather problem. Last summer here in the UK my hair started melting LOL so I'm trying a bit of Layrite next, see how that goes. Anyway great videos, some of the best I've seen. Keep up the good work, my man.
+Albert Ozimek im not a fan of the question because it's like asking if I prefer hammers or bandsaws, I know nothing of your project. But I don't think Angular 2 seems like a very good product.
Before I started watching your videos, I thought that Angular 2 and Typescript is the future of the web development. It is backed by Google and Microsoft and it's getting traction. Code is much cleaner in comparison to Angular 1. However, after watching your videos I can see that very often the solution is much more elegant in functional way. I'm wondering whether the Object-Oriented or functional programing is going to be the future. Do you think it is good idea to mix functional programing concepts inside Angular/Typescript Object-oriented project? Is it good idea to marry two different animals?
+Albert Ozimek I really don't understand what it is people see in Angular 2. It's of course better than Angular 1 but that's not saying much. I am also not sure I agree that it's gaining traction - considering the vast install base of Angular 1 it has a lukewarm reception at best. As for an FP or OO future, history has shown us that these things are not black and white, but it's pretty clear that the extreme dominance and "OO is better" religion that OO has enjoyed the last 30 years will be reduced and we will adopt more and more functional concepts into our programming, because this is a trend that is already happening and has been happening the last 5 years. You can even see this in languages like Java which has many new functional features in its latest version, such as streams and lambdas.
10:50 Had I defined breed inside of dog, or like Dog.breed = value, what would be the difference from Dog.prototype.breed when using new? Wouldn't you have access to breed either way?
+malkeynz it's coming! I just have to give a proper introduction to the prototype first, and how new works, because new is the reason why Object.create exists. Also, Object.create is pretty complicated and needs its own episode, possibly two.
+Anenth Vishnu why you should use the standardized promise built into JavaScript instead of some implementation in a DOM library that is 10 years old? That would be a pretty short episode.
I've learned more about JavaScript from this channel (and been entertained in the process) in a week than I had learned in 6 months I swear.
ElderSnake90 Amen
i had one problem
tried to solve it using prototypes and 'this'
Now I've 3 problems
Use regex too.
I decided to use an example. Now I have 4 problems.
i got 99 problems but this aint one
same here :p @@jakobsternberg1807
Let me spoil this terrific video with some pedantic comments:
1. __proto__ isn't a property on myCat directly, it is in fact an accessor property ("get"/"set") on Object.prototype. You can in fact see this later in the video once Object.prototype is printed.
2. It is not true that all objects ultimately delegate to Object.prototype, I can totally create, using Object.create, an object with a null prototype, or a chain which doesn't lead to Object.protoype. And because of point 1. above, __proto__ will not be available on such an object.
So, how the *** does myCat have access to the __proto__ property?? o.O
Nice!
Stephan's referring to 12:29 for point#2 here.
@@stiventson4464 , That is because, JavaScript engines traverses up the prototype chain for the "myobject" object and ___proto___ accessor is a property defined on the Object constructor function's "prototype" object.
I am already on my way to the terrace xD
Best take away from this episode? Your newfound love for munchkin cats 😂
+Joel Eisner (jeis93) yes
... and refusal to use autocomplete
Joris Griffioen ?
Ahhh just realized you beat me to this by 2 years hahahaha
i watched 14 videos before and lastly i got perfect understanding from here
I just got a job that requires javascript. I come from working using C# C++ and java, your videos are very helpful, thank you.
prototype should have called "prototypeToConfuseYou"
has to watch is twice to understand it.. __proto__ and prototype
This guy and Anthony Alicea are the best at describing js oddities.
+Brandon Brigance thanks!
I think I watched this Object series 2 or 3 times as a reference.
After about a month, I finally get it. Thank god.
I'm a simple JS developer
I see new episode of FunFunFunction, I press like!
Come to see Australia, man. You will press like every time you hear the word Koala too. :)
Great explanation for the "__proto__" property, but I'm sure that some beginners could not grasp what ''prototype'' property means.
For me, it seems like we define a static property in C# for example.
So, all the objects that will be created by a constructor function, and if the constructor function has a property in the 'prototype' property, the property that is inside of the 'prototype' property will be a static property or a static function if it was a function for the created objects.
It's so easy in C# and Java to implement it, but when I came to JavaScript it really took me time to understand it.
this simple example will give some idea of what I'm trying to explain :
function foo() {
this.prop = 'No Name';
}
foo.prototype.prop2 = 'Hi';
let obj1 = new foo();
let obj2 = new foo();
// Try first this :
obj1.prop2 = 'Hello';
// Then this :
//obj1.__proto__.prop2 = 'Hello';
console.log(obj1.prop2);
console.log(obj1.__proto__.prop2);
console.log(obj2.prop2);
console.log(obj1);
console.log(obj2);
console.log(foo);
==> Great video, You really have a good content, plz don't stop doing more explanations on JS.
OMG, you are the first guy who explains this __proto__ and prototype thing so clearly. Even better than my teacher. Thank you!
Thank you so much for this video! It really helped me finally to somehow understand the magic behind __proto__ vs prototype a little bit better! Keep up the good work! Cheers
Perfectly clear! Best explanations i ever heard, thanks!
As current iterations of ES add more deceiving styling it feels as if it's more important than ever to bind ourselves to the root functionality in order to more cautiously apply the new syntax. Thank you so much for taking the time to demystify some of the more daunting aspects of JavaScript architecture. For me personally this lecture series has been the most valuable of all funfunfunction tutorials! (My comment didn't start out as wordplay, for the record...)
To be completely honest, I've been working with JS for almost 8 years, and by watching your videos, I pretty much revisited a bunch of stuff that I actually forgot how to work, but was using it at daily for years. I totally forgot some of the foundation topics and realized that, IMHO, JS community pushed many of us a lot into frameworks and hype, instead of relying on the core stuff. Very good videos, I'm gonna show these to my wife so she can learn :)
Good Monday morning and welcome to Fun Fun Object :D
Long winded siide note: about 2 months ago I discovered Elixir and Elm from perusing your tweets, and I've been falling in love with Elm, so thanks for that! Elm's Maybe.andThen function has helped me to finally kind of understand monads, and more specifically the monadic bind operator (>>= in haskell), which `andThen` is surprisingly an implementation of for Maybe. It's funny that they can low-key teach you a notoriously difficult to grasp concept that gets avoided at every frp conference by just naming it something else.
Several days ago I finished rewriting a big project for a Minecraft redstone channel of which I am a member(although the project in question won't see the light of day until another much bigger project is completed), and once I got a hang of solving problems in a purely functional paradigm, it became almost trivial to write large-ish blocks of code that either work the first time, or after I fix some typos or minor type errors that the compiler kindly points out.
Great way to explain it all - passing this video around to my students in the future.
Two-and-three-quarter minutes: pause video, stop laughing, wipe eyes. Now I have to decide whether I just press Play or if I rewind That. I truly love the InterWebs. Thanks MPJ. You make Mondays better. :)
Two-and-three-quarter minutes: pause video, stop laughing, wipe eyes. Now I have to decide whether I just press Play or if I rewind That. I truly love the internet. Thanks MPJ. You make Mondays better. :)
i love the style of your videos great work!
I am reading Kyle Simpson's book series and I had doubts about the prototype property, but after watching your video, I don't have them anymore. Amazing content
You can also check that Object is a function by typing:
> typeof Object
< "function"
Great channel, thank you!
Wish i had known this channel sooner. All of my struggle with Javascript for the past 6 months finally has a cure!!!
Hello , are you Vietnamese. I AM Vietnamese too. Can we learn together?
@@lenhu7089 okay bạn mà học chung sao bạn? Mình đang học front end
__proto__ is also known as dunder proto.
This episode was much more clear than the one that was teaching 'new' keyword. Thanks
Keep up the good work! Im a professional PHP and Java-developer for about 10-12 years now. Your videos really opened my eyes.
Just learnt React, MongoDB & GraphQL last week. Awesome technology!
Were also in the process to migrate over to a more javascript-based application for our services.. since we run everything on Java atm.
Also really entertaining to watch, it makes it much more fun to learn than just scrolling through thousands of pages of Documentations...
Im really excited and keep up the good work!
00:00 "good morning morning!!!" energetic and ready to be productive
02:40 falls into rabbit hole watching cats on the Internet.
I've heard people pronounce __proto__ "dunder proto".
Yep. Short for "double underscore".
This video helped tons, but it really sank in after experimenting on my own. In my experiments, I can describe it like this:
When you do function Dog() {}, then Dog will have a "prototype" but not "__proto__.
When you instantiate the dog into an object...
const myDog = new Dog()
Then myDog will have a __proto__ but no prototype.
If you create an object from an "object literal". For example:
const Dog = {}
Then Dog will not have a prototype, but will have a __proto__. But the __proto__ will be equal to the global object. (Object.prototype).
Great
Permit me to screenshot your comment
It will be good for health 😅
Thank you for this episode. I have read a lot about __proto__ vs prototype, but only now I start to understand the difference.
MPJ you are amazing! I was watching this while my wife was next to me. She told me she was able to follow along even though she's never done any programming herself. Thank you so much for putting up these videos! One thing I would like to see, I wonder if I will even be able to describe it well, is an explanation of how an object goes down a rabbit hole. Sometimes I will be debugging with dev tools and see an object that goes Child/Parents/Child/Parent all the way down without showing me any usable information. I know that likely isn't very clear so will try to do a screen grab next time it comes up. Thanks again!
I like these javascript episodes it's clearify confusing concepts in JS. Thank you for doing it 😊
To make things more confusing: Object is also an object because all functions are objects. Another interesting thing is that __proto__ of a function is a function. Yay!
this was awesome, and honestly better than the earlier ones. Might be the browser environment and the knowledge build up at this point in the series, but, I think it's a significant improvement.
Object.newPrototype ?
Loved this video, I understand object creation so much better because of this series!
Have also really enjoyed your pair programming stuff. Seeing experienced developers go through the trial and error of real projects is really helpful to me in my journey learning javascript. Great to see that everyone runs into silly problems and, useful to see you work through them!
Except it doesn't add a new prototype, it adds a property to the existing prototype.
Tack som fan för de här videona! Du är sjukt pedagogisk, till skillnad från de flesta som försöker lära ut programmering...
Thank you from all Australian JS developers for mentioning KOALA and crocodile. It means a lot to us. Come over and hug one.
Just a little tip on typing in Chrome console - press whenever you want autocomplete the thing you're typing :)
Thanks for the video!
This video really helped me understand how to implement prototype semantics in my own scripting language. Thanks!
Thx man, I've just discovered your channel for myself as for guy which trying to switch from .Net world into the JS one. Your videos really help me ;)
The final few minutes were really gold - it was unclear at first - but revisiting it makes it a little bit more understandable
Also - THANK YOU this series is great
Your comment made me watch the video to end
myDoggie__proto__
myDoggie.prototype
Just explain everything
Nice! That was very insightful. Totally agree with the term "Prototypal Delegation". ;)
Just to add my 2 cents:
Basically everything is objects in JavaScript. (or that's how I try to understand it)
I will refer to "created from" as "instantiation of the type's prototype field".
Maybe "instantiation" is not the right word here, couldn't think of a better term.
"Object", "Function", "Array", or custom ones such as
function abc () {
}
are all "Function" objects. Yes, "Function" is a "Function" object. Will elaborate it later.
> typeof Object -> 'function'
> tyepof Function -> 'function'
> typeof abc -> 'function'
> typeof Array -> 'function'
Next, "Object" is a function object so that tells us that it was created from "Function",
which means:
> Object.__proto__ == Function.prototype -> true
> Array.__proto__ == Function.prototype -> true
> abc.__proto__ == Function.prototype -> true
"Function" is bit special and is used to create a function object, which means
> typeof Function.prototype -> 'function'
For others:
> typeof Array.prototype -> 'object'
> typeof Number.prototype -> 'object'
As usual (for custom ones):
> typeof abc.prototype -> 'abc {}', because
> abc.prototype.__proto__ == Object.prototype -> true
and:
> typeof Object.prototype -> 'object', which I believe is the root of all objects, because:
> Object.prototype.__proto__ -> null
> Array.prototype.__proto__ -> 'object'
> Array.prototype.__proto__ == Object.prototype -> 'true'
> Array.prototype.__proto__.__proto__ -> null
> Function.prototype.__proto__ -> 'object'
> Function.prototype.__proto__ == Object.prototype -> 'true'
> Function.prototype.__proto__.__proto__ -> null
Now, at the beginning I had mentioned that "Function" is a "Function" object, because
> Function.prototype == Function.__proto__ -> true, which makes me think that "Function"
is created from itself :)
The outcome I got from this: 'prototype' property only exists on functions, so objects can be created with 'new' keyword. It is empty by default and it is what get assigned as '__proto__' of an object returned by 'new'. The object where actual property lookup is delegated to (down to the chain) is the content of '__proto__' property which exists both on functions and on objects (though '__proto__' is not part of the language and can not be used reliably).
Excellent episode as usual. Very clear to understand the difference between __proto__ and prototype. Thanks Mattias!
After watching and reading different explanations of the topic, at last, I understood the difference between properties "prototype" and "__proto__". Even though explanation already was in this video, I still couldn't figure out, if prototype and __proto__ basically means the same thing and even points to the same object, why they can't be just one property, why we need both?
So, the reason is - it's actually two different things. "__proto__" points to the parent prototype which "created" current object, and "prototype" points (creates) to new prototype object which can be later used as a parent prototype for objects inherited from the current object. Here's a code example:
function foo1() {}
foo2 = new foo1();
foo3 = new foo3();
In this case foo2.__proto__ === foo1.prototype, foo3.__proto__ === foo2.prototype and so on. I hope this explanation will help somebody.
I had a tough start to my morning, and wanted to thank you for making me laugh with the munchkin cat. You're the best
again, thank you for your great videos about JavaScript.
suggest you should mention, that a function always returns this by default, unless you do not return something else. for that to remember I always write return this; into the last line of a Constructor function or in this case a no constructor finction.
function no_constructor() {
var myList = [ "cat","dog","crocodile"];
this.showItem = function( id ) { return myList [ id ]; };
this.howMuch = function( id ) { return myList.length; };
return this;
}
var animal = no_constructor();
alert(animal.showItem( 0 ) );
alert(animal.howMuch() );
Var has better performance and works everywhere, so don't be a fool.
You just said stop using bar without any reason, just because you feel it is old and outdated. Instead I gave you two good reasons for using it.
While I understand your example, I think you should add a note that it's considered bad practice to define methods like that. Secondly, I think this kind of practice only adds bloat to your code and is very unnecessary!
You should also fix: "unless you do not return something else" to "unless you return...".
Thank you so much !!!
Everything is so cristal clear now ! Thank you man really really appreciated !
The internet and the youtube is full of confusion about this prototype topic .
I watched many videos and those guys confused me more .
Your video clicked , everything makes sense now , Thank you I can't say enouth , thank you !
This is very helpful.I was just wondering what is this __proto__ and prototype.Then your explanation made everything clear
Thanks man. I've finally understood Prototypes.
If you are standing alongside Chris Hemsworth, I will run over him to shake your hands instead. That's how happy this series has made me.
Please continue your series next week. You discussing all the type of questions I asked for as I began as a JS-deveoper one year ago. I almost gave up because all this stuff confused me so much but after all, JS just makes more fun as c# for me :-) (never thought that..). I've really NOWHERE found that simple reference, that describes the difference between __proto__ and prototype. I wasted approximately 4 days of time to explore that and as a result, I lost my motivation and gave up... So annoying. Thanks for all your stuff and go on :-*
dont give up. I am coding JavaScript since 1998 and I am still confused by it. This Video helped me a lot.
+Pad0r thanks a lot for your kind words! Can't promise I'll continue next week, but I definitely want to continue this series, in learning a lot myself.
funfunfunction You spend so much time to us, I just want you recognize that there are people out there who are very great full for that. :-) I worked for a large company in past and I think, one of the biggest issues is, that everyone has to be perfect. Any tasks have to be done in time and fails are not allowed. It's most of the time a estimate failing to catch up customers (to tell the truth). But this digital world is just to complicated to give accurate estimations without getting time trouble. I hope that attitude will be change in the future.
Another great video! I'm really looking forward to more info on prototypal 'inheritance'. Thanks for all your hard work on these videos MPJ, please keep them coming! :)
Probably the best name convention should be `.prototypePrototype` haha
Best explanation about mad __proto__. Till next monday morning ; )
I don't know which is growing faster... MPJ's plant, or his hair.
my language is not english but i understood it really really clear. Thanks for your big contribution
Well explained, I will use the pen delegation example when I explain prototype to others. You should do an episode about the difference between changing a property value on the prototype object vs changing it on an object with the same prototype. It also confuses a lot of people.
+Slava Shp. I do some of that in this one: ua-cam.com/video/PIkA60I0dKU/v-deo.html
+Slava Shp. Or now that I look at it again, it might still warrant some more examples. Perhaps while explaining the chain.
Google search for munchkin cats has skyrocketed immediately after this video
Mpj i was curious to know what kind of books would you recommend to know a bit more about javascript underlines and also about design patterns. Maybe you could do a video about this topic and talk about your professional path and what resources you used to help you grow as a developer?
Now everyone is trying Object.prototype={} . Thanks for the video!
Object.prototypeAddProperty seems like the most logical thing it could have been to me since this is exactly what it does: adds a property. Although then it probably should have been a method like Object.prototypeAddProperty('foo', 'bar') or something
100% sure that between the cut from 2:32 and 2:33 MPJ spent two hours + looking at munchikin pictures
__proto__ should not be used commonly as it is a part of javascript engine's internal linking, nice tutorial. well explained.
You are amazing! Thanks from Brazil.
@mpjme I know it would be a lil bit weard. But may i know where did you buy this lamp?
I guess the next episode will start with how you should avoid mutating `__proto__` and why `Object.getPrototypeOf` and `Object.setPrototypeOf` exist.
prototype=prototypeToBeUsed
perfect!!! Thank you.
Very clear explanation , thanks
Great great video! I have learned so much because it's fun watching your videos. My only suggestion is that you use a small whiteboard instead of paper. It seems like an awful lot of paper being used.
+Francis Ngo whiteboards have glare and I can throw them around and tear them. ;) also, considering food packaging, newspaper, advertising and postal main, the paper I use in these videos is by far my best use of paper all week among myself and everyone I know.
Another excellent video! If I could change one thing about JavaScript's new-object-this-mess, it would be to dump ".prototype" completely, or rather use .prototype directly and ditch constructor functions. Basically, I would have the new keyword act like Object.create or Object.setPrototypeOf.
// How Will would have 'new' would work
function new (prototype) {
return Object.setPrototypeOf({}, prototype)
}
let Dog = {
breed: 'munchkin',
bark () {
console.log('woof')
}
}
let jim = new(Dog)
jim.breed // 'munchkin'
jim.bark() // 'woof'
jim.prototype // undefined
jim.__proto__ // undefined
jim.constructor // undefined
jim.__prototype__ // Object {breed: '"munchkin"}
Amazing content!! love your style
This video cleared everything finally
__proto__ is often called "dunder proto" by the cool kids.
very nice. But worth to note.....while reading The MDN docs ......it actually flung over my head
1:53
Hahahahahahaa. I feel your pain. Same thing with naming stuff in programming
that was azaming and I liked your wristwach mpj :D
I love how he searched to find a cat breed in the middle of the tutorial just to come up with an example! 😂
Parabéns funfunfunction pelo excelente vídeo. Volte logo ao Brazil!!! \o/
Congratulations funfunfunction for excelent video. Com back to brasil, ok!
I understood that __proto__ is the same to the prototype of the constructor function. I mean:
objFromConstructor.__proto === Constructor.prototype
Yeah, that's a good way of thinking about it.
I think we have found "Fluffykins" 2:30
Hi MPJ, really enjoying your videos - you make them a lot of fun to watch.
I just had to ask as I've seen you use it in several of your prototype related videos ... MDN actually lists Object.setPrototypeOf() as a method *not* to use based on what it calls poor performance in all JS engines. I haven't done any speed testing myself. In this case I decided to trust the makers of the engine. :)
Instead, I use:
object_with_prototype = Object.assign( Object.create( proto_obj ), data_obj );
And it has been working very well.
But, I'm also relatively new to using prototypes. I've been using plain objects for data and calling static methods to work with that data for quite some time. But I like the simpler code and ease of accessing functionality that prototypes afford so I started converting over to them.
Interested in your thoughts!
Some reading that I've come across.
MDN Object.setProtoTypeOf:
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
StackOverflow discussion:
stackoverflow.com/questions/23807805/why-is-mutating-the-prototype-of-an-object-bad-for-performance
+Micheal Hall yeah, I mention briefly in the videos that you don't use setProtypeOf in real apps, but I don't dwell on it too much, the purpose here is to explain how the prototype works, and for that, setPrototypeOf is great. I plan to talk about the performance problems of setProtypeOf in the Object.create episode.
I must have missed that! I'll keep an eye out for the video.
On another note, the other day I was refactoring a function that accesses an options object rather extensively and thought, "Aha! The perfect place for destructuring ..."
Of course the day prior I had watched your video on that very subject.
So thanks for that!
I want him back with react tutorials this time.
How many guys thought of a crocodile when the 10 minutes break was showing? :))
Thank you Sir. funny the cat part and smooth __proto__ delegation to comedy.
What hair pomade do you use? Is there a special one for programmers, for example, that doesn't melt onto the keyboard in hot weather?
+ibuprofen303 I'm a religious user of Lernberger Stafsing Soft Wax. It's an upgrade over my former Weapon of choice which was Fudge Hair Shaper. Sweden doesn't have hot weather. ;)
funfunfunction
Oh yeah fudge, I remember that. The pots seemed to get progressively smaller. Lovely smell though. Of course, Sweden, you don't have the hot weather problem. Last summer here in the UK my hair started melting LOL so I'm trying a bit of Layrite next, see how that goes.
Anyway great videos, some of the best I've seen. Keep up the good work, my man.
Object is a function but Object() is an object
You got distracted by looking up cat pictures. That is a true real world problem for developers today haha.
15:00
This is definitely the trickiest part in programming!
Too many options
MIND.. BLOWN..
Do you use vanilla ES6 in your project? Would you recommend to use Aungular 2 or ReactJs?
+Albert Ozimek im not a fan of the question because it's like asking if I prefer hammers or bandsaws, I know nothing of your project. But I don't think Angular 2 seems like a very good product.
Before I started watching your videos, I thought that Angular 2 and Typescript is the future of the web development. It is backed by Google and Microsoft and it's getting traction. Code is much cleaner in comparison to Angular 1. However, after watching your videos I can see that very often the solution is much more elegant in functional way. I'm wondering whether the Object-Oriented or functional programing is going to be the future. Do you think it is good idea to mix functional programing concepts inside Angular/Typescript Object-oriented project? Is it good idea to marry two different animals?
+Albert Ozimek I really don't understand what it is people see in Angular 2. It's of course better than Angular 1 but that's not saying much. I am also not sure I agree that it's gaining traction - considering the vast install base of Angular 1 it has a lukewarm reception at best.
As for an FP or OO future, history has shown us that these things are not black and white, but it's pretty clear that the extreme dominance and "OO is better" religion that OO has enjoyed the last 30 years will be reduced and we will adopt more and more functional concepts into our programming, because this is a trend that is already happening and has been happening the last 5 years. You can even see this in languages like Java which has many new functional features in its latest version, such as streams and lambdas.
fun, clear and informative!
#KeepUpTheGoodWork !!
__proto__ is not part of the language(at least prior ES6) and shouldn't be used in production.
Completely agree! However its useful to reference to build an understand of how javascript objects work.
Thank you for mentioning that.
10:50 Had I defined breed inside of dog, or like Dog.breed = value, what would be the difference from Dog.prototype.breed when using new? Wouldn't you have access to breed either way?
The hard part of programming is that declare variable and function name. xD
Instead of Object.setprop you can just use Object.create and it will do the same thing link the prototype to the object
I feel like you missed (another) chance to introduce Object.create
+malkeynz it's coming! I just have to give a proper introduction to the prototype first, and how new works, because new is the reason why Object.create exists. Also, Object.create is pretty complicated and needs its own episode, possibly two.
Object.assign too.
he mentioned Object.assign in another video "Composition over inheritance"
I agree. I don't think that Object.create is more complicated than Object.assign but it is more standard (Es5) and correct. Regards
Loved this one. Will you able to make a video around A+ Promise and why we should use it over jquery.defer
+Anenth Vishnu why you should use the standardized promise built into JavaScript instead of some implementation in a DOM library that is 10 years old? That would be a pretty short episode.
Okay cool
15:36 I guess, you were searching for the word "template"...