Understanding the JavaScript Prototype Chain

all right today i want to talk about linking prototype objects and how to build a prototype chain so what a prototype is how it's connected to objects how you can get to all of these methods that exist inside prototypes that are nested way deep in the prototype chain okay now we have here a function called other proto this function is going to be used as a constructor function so it's a function that will build other objects inside of the function you can see we're using the keyword this here and that's a that's a good sign that this is a constructor function whenever we use the keyword this we're talking about the instance so we call new and then the function name when you do that it runs this constructor function and it builds an object for you I don't have to put the keyword return here it automatically returns the instance of the object now after we have this function defined we can on that function say it's prototype is going to get some method so we are adding a method into the prototype object the function is the constructor a constructor function automatically gets a prototype object and we're creating some method inside of that object so you can think of it like this we have down here this is our instance Abdu so there's an object inside of all it will have as its prototype other proto now other proto is in itself an object this function is an object in JavaScript functions aren't special things well they are special things but they are considered to be just another object so when you create a function what you're really doing behind the scenes is calling new object and that it's an object of type function so this is going to be going up to the object prototype and then that points to null so as you go all the way up the prototype chain at the very top of it is always null now object this is the one that we get when we call new object this is the function that we're running other proto is a function that we're running so it has a prototype and it's prototype points to object prototype and then we have our instance which is using other proto as its constructor function as its prototype so we've got this is the chain that we're working with here object points to other prototype prototype which points to object to prototype which points to no so when we call this when we say new is equal to other proto we have created an object and this object has everything that's attached to this so we can say Abdal prop one that's going to exist there that's not a problem we can console.log that out if we want that will give us the four five six and that property exists inside of object li inside here inside that this method here inner also is being placed inside of here because we put this in front of it so we can call a dot inner and that's gonna work that's gonna write out this inner method so let's open up our console here and we'll run that just to see those things there's the four five six I'll scroll this up here's the four five six and then inner ok great now some method exists inside the other prototype inside this part right here that's where some method exists but because it's on the prototype chain I am allowed to use it I can call some method like that this is other proto that's the message that we had right here okay great so we've got this instance which has its own property 1 and inner method it can also use the things that are up on its prototype chain and object prototype has things like to string and that's why we can do this to string that's going to work we're not going to get an error there no errors because the to string method exists on this prototype chain inside of object prototype there is a to string method that's why we can do that now this one here inner because we put this in front of it it means that the inner method exists inside of objects what can do this but it doesn't exist inside of other proto even though we wrote it here because of this it exists inside of abdu object and then get its prototype so we can do underscore underscore proto that will get me the prototype of this object and try to call some method that's going to crash that is not gonna work oh sorry of course it's gonna work we've got that there in her this is the one that I was trying to use you probably caught that long before I did there's the one crashing so inner is not on the prototype chain inner only exists inside of objects or proto this is a special property and I put it up in the comments here proto belongs to any object so an instance of an object of any kind of object there is a proto property this is what points to here this prototype guy the other way of getting it is object get prototype of and then you put in this or set prototype of if you wanted to change it so I'm going to do it this way just to show you the alternate syntax so the same way of doing this is this so objets placed inside of here object get prototype of so I'm talking about the prototype of this function right here so this is the object that we're talking about and here if I try to call inner that will fail but I can do some method that will work that will fail just like this fails okay so let's comment those out I'm gonna show you another way of doing this just calm at all those there we go alright moving on to part number two the alternate way of doing this instead of doing this a constructor function which is going to create your object and then create this prototype I want to talk about what happens if you just do this if I say let Anna create something called proto Abdi an object and inside of it there's going to be a prop one I'll say it's four five six just like that we can add inside of here some method ok now this in itself looks like an object instance and it is proto is an object it's an instance of an object so how do we get this well doing this was the exact same thing as saying new object and then giving it the properties so if I said let proto abdu object and then proto abs top prop one equals four five six proto hobs dot sum method equals function and so on just like that this new object this is the actual syntax this is our constructor to remember back up here let me clear that out and close this console for a moment so I can scroll this up right here we called new to create it that's the constructor function this is the thing that creates the object instance and creates the prototype and down here we're doing the same thing we're calling a constructor function to build our object and it creates the prototype so if we wanted to we could do proto object I dot other method equals function just like this just like we did with the sum method up above so we have a prototype on Prolog but this syntax isn't going to work because this is an instance it's not a function so we can't do this prototype what we need to do to get to the prototype of an instance is what we did right here the underscore proto so we could do that or alternatively we can say object get prototype of and then you put it in prototype proto abdon other method like that okay so we do have a prototype here when I do this what I'm really doing is I'm saying here's an instance and the prototype of this is the object prototype so I'm adding this onto the object prototype for this guy now if I want to use this as a prototype to kind of stick it in the middle we can do something similar to what we did above we can say let's declare a child object just keep it empty for the moment just to keep this simple and then what I want to build here is I want to say that child Abba - proto objets prototype which is in turn going to point to the object prototype which points to as always no so I want to use I've got my child object instance I want to use proto objets prototype because this was an instance I had to use this property to get to its prototype but I want to use that itself as my prototype here so we can say object dot set prototype of child o j-- and we're going to use proto AUB's as the prototype so we are inserting this right here up above child and that way child aaj now has access to everything inside of here we can say child objects that out we can do child abdu child object and what happens is we go up this prototype chain looking for other method which is sitting up here we're looking for some method which is sitting right here so we're here and we have this prototype prototype chain that's built we can crawl up the chain and use that there we go four five six that was prop one this you can see there's nothing inside of child ah but inside of prototype aaj that is what we've just set as our prototype right here we have access to the four five six and the Sun method and the other method so because they're on our prototype chain sitting somewhere along this chain we have access to all these things even though they're not defined specifically in here unlike a class based object where when you are creating a class and you're saying it extends some other class what happens then is you copy everything down so child AUB's will actually have copies of everything if this were a class based language you would have copies of everything that's inside prototype bobs in the object prototype but we don't or prototype which means there's links created we have this chain that we've built and javascript is allowed to crawl up this chain looking to see hey do you have this property do you have this method do you have this property do you have this method and it's not until it gets to this point where it says okay this is the end of the line I could not find that property so if I said child objet non method which doesn't exist anywhere in this prototype chain that's when I get an error there we go child obscene and Method is not a function because it does not exist anywhere along this chain okay now there's a newer syntax for doing what we did here number three this object set prototype of there's an alternate way of doing that and that is with the object create method so if I create a child of two I can say object don't create and I'm going to use proto objects prototype so effectively I've done these two lines together in a single line that's what we're doing here we're creating a blank object I haven't defined any additional properties so this is a blank object and this is set as the product just those two lines combined that's what we're doing right here all right so we do have child Abdu which is pointing to proto objets prototype which in turn is pointing to object prototype which finally gets up to null so that's our big long chain that we've got and as always we can access from child AUB's to anything that is inside the chain which means this prop one up inside the prototype ah just gonna comment these out so we stop getting errors or anything there we go there's the four five six so this is coming from proto homage now the interesting thing about properties is if I now do this if I do child to dot prop 1 because this told me four five six so it looks like I have a property called prop one inside of child object but if I chant try and change the value let's say two seven seven seven and I console dot log I know we've got an extra see there shall table to prop one if I write that out I am going to get the seven seven seven so I will get what you would expect there's the seven seven seven so what we've done here is we've actually created a new property inside child a table 2 called broth 1 we have not done anything to the original prompt 1 if we come back up here prompt one inside of proto Hobbs we haven't touched that at all so this is where prompt one was when we console logged that out we were getting the value from here by doing this we're adding the property to here so if I do this and I also say but what is the value inside my proto my prototype will be able to see both values coming up here you can see 777 that's the brand-new one that's inside of channel Dobbs 2 but there is still one up inside the proto Lodge which is four five six and the same idea applies to methods as well you've got methods that can exist inside of here or inside of here or inside of here down at this level if you just write the name of the method javascript is going to go up the chain looking for that when you add methods or change methods what you're doing is you have to point it which one that you want to change so inside of proto oven up here I can add a brand new one down inside of child abdu so child off to some method calls the one inside proto ah but if I do child obtuse some method if I can type it equals function we are actually creating a brand new some method sitting right here this is where the method sits that we're gonna call if I do child ups to some method but if I go child augs to dot proto some method then I'm going up that chain I am actually crawling up the prototype chain and you can see the last two lines here this is the one that's inside of channel dogs too this is the one that's up the prototype chain but if this one didn't exist what we're going to do is JavaScript will crawl up the chain looking to see if it can find it until it gets to the very end to this null and if it hasn't found it by that point that's when it gives up and gives us an error all right so copy of this code is available down in the description as a link to a code gist if you have any questions please feel free to put those in the comments down below I hope this helps you understand the prototype chain a little bit better and where things get placed and what's going on just remember when you're using a function as a constructor you're getting a prototype created for you if you are just using this syntax then the object prototype is what you're getting at the very beginning it's like you're calling new object you still get a prototype but it's the new it's the object prototype that you're getting and use the methods get prototype of set prototype of to get or change the prototype or the new syntax which is right here object create that's probably the simplest and easiest way to do it it's a great new method alright as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 5,100

Rating: 5 out of 5

Keywords: MAD9014, MAD9022, web development, JavaScript, JS, MAD9135, web dev, javascript tutorial, js prototypes, javascript prototypes, prototype chain, prototype inheritance, inheritance, getPrototypeOf, setPrototypeOf, Object.create, Object create, Object.getPrototypeOf, Object.setPrototypeOf, __proto__, proto, proto vs prototype, __proto__ vs prototype

Id: GhJTy5-X3kA

Length: 21min 45sec (1305 seconds)

Published: Fri Jul 26 2019