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.
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. :)
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
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. :)
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 :)
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...)
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
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.
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!
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!
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.
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
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!
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 !
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 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).
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...".
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 :)
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.
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.
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! :)
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.
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!
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?
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).
+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.
+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.
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?
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.
Thanks for this clear and entertaining video! There is however one thing that I don't understand about setting prototype properties, I'll show with an example: const test = ['one', 'two']; Array.prototype.wot = function wot() { return 'm8'; }; console.log(test.__proto__.slice); console.log(test.__proto__.wot); for(let x in test) console.log(test[x]); Output: [Function: slice] [Function: wot] one two [Function: wot] Why does 'wot' show up in the loop, but 'slice' doesn't? Or why does 'wot' appear there at all?
@Nerbiz Dijkstra When using a for-in loop, you are using the property approach to access indices, the method that you add to the Array.prototype are included inside of your properties In the case of the "slice" method, it's an existing one, it was not added by you. If you do not want this behavior your better use a for-loops instead. Regards
Thank you for your reply :) it's a bit clearer now. And I guess I could've used a different type, it's weird to use for-in loops with arrays. Anyway, thanks for your explanation!
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"}
great video thanks. when you say assign a prototype to a function do you mean a Constructor function? I always thought prototype should ideally exist on Constructors only.
+froggerabc the thing is that a constructor IS just a function. There is no concept of a constructor per se in JavaScript - when we say "constructor" we are really just referring to normal function that we use the "new" keyword on. So all functions get a prototype property in case you want to ever use them as a constructor.
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
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 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
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. :)
OMG, you are the first guy who explains this __proto__ and prototype thing so clearly. Even better than my teacher. Thank you!
I think I watched this Object series 2 or 3 times as a reference.
After about a month, I finally get it. Thank god.
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. :)
Perfectly clear! Best explanations i ever heard, thanks!
I just got a job that requires javascript. I come from working using C# C++ and java, your videos are very helpful, 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
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.
This guy and Anthony Alicea are the best at describing js oddities.
+Brandon Brigance thanks!
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. :)
Great way to explain it all - passing this video around to my students in the future.
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
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 :)
00:00 "good morning morning!!!" energetic and ready to be productive
02:40 falls into rabbit hole watching cats on the Internet.
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...)
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
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.
This episode was much more clear than the one that was teaching 'new' keyword. Thanks
i love the style of your videos great work!
prototype should have called "prototypeToConfuseYou"
has to watch is twice to understand it.. __proto__ and 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!
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
Thank you for this episode. I have read a lot about __proto__ vs prototype, but only now I start to understand the difference.
I like these javascript episodes it's clearify confusing concepts in JS. Thank you for doing it 😊
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...
You can also check that Object is a function by typing:
> typeof Object
< "function"
Great channel, thank you!
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.
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.
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
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 really helped me understand how to implement prototype semantics in my own scripting language. Thanks!
Excellent episode as usual. Very clear to understand the difference between __proto__ and prototype. Thanks Mattias!
Thanks man. I've finally understood Prototypes.
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 !
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!
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.
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 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 😅
This is very helpful.I was just wondering what is this __proto__ and prototype.Then your explanation made everything clear
Google search for munchkin cats has skyrocketed immediately after this video
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...".
Amazing content!! love your style
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 :)
Thank you from all Australian JS developers for mentioning KOALA and crocodile. It means a lot to us. Come over and hug one.
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.
__proto__ is also known as dunder proto.
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.
Very clear explanation , thanks
This video cleared everything finally
Best explanation about mad __proto__. Till next monday morning ; )
I love how he searched to find a cat breed in the middle of the tutorial just to come up with an example! 😂
I've heard people pronounce __proto__ "dunder proto".
Yep. Short for "double underscore".
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! :)
You are amazing! Thanks from Brazil.
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.
@mpjme I know it would be a lil bit weard. But may i know where did you buy this lamp?
fun, clear and informative!
#KeepUpTheGoodWork !!
great munchkin cat exposure!
Probably the best name convention should be `.prototypePrototype` haha
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!
Great video..Learnt alot..Thanks👍👍👍
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?
As usual... GREAT !!) Thanks
my language is not english but i understood it really really clear. Thanks for your big contribution
MIND.. BLOWN..
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).
This is some brilliant comedy
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.
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.
I finally understand. Thank you!!!
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?
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: ruclips.net/video/PIkA60I0dKU/видео.html
+Slava Shp. Or now that I look at it again, it might still warrant some more examples. Perhaps while explaining the chain.
so glad for let and const
Now everyone is trying Object.prototype={} . Thanks for the video!
awesome video, thank you
You got distracted by looking up cat pictures. That is a true real world problem for developers today haha.
great video as always!
I love your Videos.
ahahaha "shiatsu" is a type of massage you can get! Lol
once more, you are amazing man...
prototype=prototypeToBeUsed
perfect!!! Thank you.
Good explanation, thanks
Thanks for this clear and entertaining video! There is however one thing that I don't understand about setting prototype properties, I'll show with an example:
const test = ['one', 'two'];
Array.prototype.wot = function wot() { return 'm8'; };
console.log(test.__proto__.slice);
console.log(test.__proto__.wot);
for(let x in test)
console.log(test[x]);
Output:
[Function: slice]
[Function: wot]
one
two
[Function: wot]
Why does 'wot' show up in the loop, but 'slice' doesn't? Or why does 'wot' appear there at all?
@Nerbiz Dijkstra
When using a for-in loop, you are using the property approach to access indices, the method that you add to the Array.prototype are included inside of your properties
In the case of the "slice" method, it's an existing one, it was not added by you.
If you do not want this behavior your better use a for-loops instead.
Regards
Thank you for your reply :) it's a bit clearer now. And I guess I could've used a different type, it's weird to use for-in loops with arrays. Anyway, thanks for your explanation!
Loving the watch!
you are surprisingme everytime
__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.
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"}
great vid. thanks!
Parabéns funfunfunction pelo excelente vídeo. Volte logo ao Brazil!!! \o/
Congratulations funfunfunction for excelent video. Com back to brasil, ok!
great video thanks.
when you say assign a prototype to a function do you mean a Constructor function? I always thought prototype should ideally exist on Constructors only.
+froggerabc the thing is that a constructor IS just a function. There is no concept of a constructor per se in JavaScript - when we say "constructor" we are really just referring to normal function that we use the "new" keyword on. So all functions get a prototype property in case you want to ever use them as a constructor.
Most important thing to learn from this video... Munchin cats hahahaha
I don't know which is growing faster... MPJ's plant, or his hair.
that was azaming and I liked your wristwach mpj :D