JavaScript Objects – Object Method Binding — Transcript

Learn how this is bound to an object when a method is called from that object. In this example, we are going to be looking at how a function is called as an object method and that showing that the this keyword refers to that object itself. So together, let's go through the steps of creating this example. Now, inside my script tag, I have some steps that I've already commented out for streamlining the process of making this example. That is why I did that, so that we don't have to be going over it from scratch again.

So I've outlined the steps. Number one says you should create an object for a person, add a method inside it, inside the method return the this, and then call the method and display the result.

So what we are talking about here is this that you can see on the screen. This actually is a keyword in JavaScript, and you want to see how it refers to an object where it is being used and also how you can call a function as an object method. That is what we are about to learn in this example. So let's move on. The first thing is that we need to create a person object.

So, and what is how do you do that? Where the name of the object is person, and we follow the normal way of writing an object, and inside the subject I'll add a first name, call it John, last name call it Doe, and I'm just going to add an I inside this. Aside from that, I also want to add a method. You can see add method my function inside this, so I'll go ahead and add the function. So the name of the function, the name of the method rather, should be my function, so I will go ahead and make my function and add it as a method inside the object. So function, and I'll just return this just like this. So now that I have this object created, created. Now I can move down and say, okay, I need a way to call the method and display the data from our object.

So how do we do that? Well, usually we document getElementById, and then how do I update the element? I'll use innerHTML property to update it. Now, before I finally call the method to display the result, I want to quickly take us through the process. You can see that the first thing we did here is that we created the person object, and inside it we added a function, a method, sorry, called my function. So this is a method inside an object, and then our function is simply basically returning this, as you can see. So now we want to call that method inside the object and show us how what we have here refers to this same person object and also display data on the screen. So let's go ahead and do that. So how do we call the method and display the result? Well, let's add this string and say this is person dot the object name, and then how do you call a function in this scenario?

Well, it could have been enough in order to just do this since I'm accessing the properties that I have inside the object. What I'm saying is this, you know, it would have been enough if I just do something like this first name, and you can see this is John, or I change this to something like maybe last name. This as well will work or ID using the dot notation. So this as well. But if I do the same thing for function my function, which happens to be a method inside my object, what do you think is going to happen? As you can see, so it's not actually passing or processing the value. It is instead returning this, which is the property of our method. But in order to actually make this display a result, let's add an opening and closing bracket as if we are calling a function to it and see what happens. Now you can see this is object object, which is the correct thing that we expect to see on our screen. So a key concept here is that method call binds this to object. So what we have here is simply referring to this, and that is why you are saying object object. So it automatically binds this to object and not even just the value alone. So this keyword can return the whole object, and binding as well can happen at call time. As you can see when we call the method here, you can see that it immediately gives us this is object object. So here we return this inside the method, which is what we did here. And then since we call it as a person dot my function method, this refers to the person object. So the entire object is what is returned, as you can see on the screen. Call it from the object, and this becomes that object, and that exactly is what we have here in our code. So this is how JavaScript links method to their object during execution. Ideally, this is not fixed. I mean, the this keyword is not fixed. It is determined when a function is called, and object method binds it automatically.

So and what is how do you do that? where the name of the object is person and we follow the normal way of written an object and inside the subject I'll add a first name call it John last name

call it do and I'm just going to add and I inside this and aside from that uh I also want to add a method you can see add method my function inside this so I'll go ahead and add the function so

the name of the function the name of the method rather should be my function so I will go ahead and make my function and add it as a method inside the object so function and I'll just return this

just like this so now that I have this object created created. Now I can move down and say okay I need a way to call the method and display the data from our object.

So how do we do that? Well usual we document getelement by id and then how do I update the element?

I'll use inner html property. to update it. Now before I finally call the method to display the uh result, I want to quickly take us through the process. You can see that the first thing we did here is that we created the person object and

inside it we added a function a method sorry called my function. So this is a method inside an object and then our function is simply basically returning this as you can see. So now we want to call that method inside the object and

show us how what we have here it refers to this same person object and also display data on the screen. So let's go ahead and do that. So how do we call the method and display result? Well, let's

add this string and say this is person dot the object name and then how do you call a function in this scenario?

Well, it could have been enough in order to just do this since I'm accessing the um properties that I have inside the object. What I'm saying is this, you know, it would have been enough if I just do something like this first name.

And you can see this is John or I change this to something like maybe last name.

This as well will work or ID using the dot notation. So this as well. But if I do the same thing for function my function which happens to be a method inside my object. What do you think is

going to happen? As you can see so it's not actually um passing or processing the value. it is instead returning this which is the uh meth the property of our method. But in order to actually make this display a result, let's add an

opening and calling an opening and closing bracket as if we are calling a function to it and see what happens. Now you can see this is object object which is the correct thing that we expect to see in our screen. So a key concept here

is that method call bind this to object. So what we have here is simply referring to this and that is why you are saying object object. So it automatically binds this to object and not even just the value alone. So this keyword can return

the whole object and binding as well can happen at call time. As you can see when we call the uh method here you can see that it immediately give us this is object object. So here we return this

inside the method which is what we did here. Uh and then since we call it as a person do my functions method this refer to the person object. So the entire object is what is returned as you can

see on the screen. call it from the object and this becomes that object and that exactly is what we have here in our code. So this is how JavaScript links method to their object during execution.

Ideally this is not fixed. I mean the this keyword is not fixed. It is determined when a function is called and object method binds it automatically.