So that means where it is in your code. And so if you don't understand what it's doing, it can lead to unexpected results. So it's pretty important that you have some practice using it. Now there are instances where we want to redefine the meaning of this, and we can do that with the bind method. Now bind allows you to execute some code while at the same time redefining the meaning of the this keyword. So let's take a look at an example in JS Bin which is an online code editor.
So you can see right here that we have a pretty simple object right here that I'm calling my module, and inside that, I have an object with a couple of properties. One of them is just called name which right now shows my name and the other one is what we call a method so this is a property that executes a function whenever it's called. And the job of this right now is to return the value of my name.
Now, the this keyword I'm using right here, in normal context, means the current module. So it wouldn't normally be referring to this right here. So let's go ahead and expand that a little bit. So you can see right here that I'm calling the module, and then I'm calling the method in that module and that is what is outputting the value right here of Ray. But if I want to, I can redefine what the keyword this means if I bind it using this bind method like I'm doing right here.
So you can see that this line is lightly different. I'm creating a variable here called some name and then instead of using just the module itself, I'm plugging in directly to the method. So let me show you that if you say my module dot get name, in this context, you are not going to get what you expect. So you probably would expect to get the name Bob here but when we assign my module dot get name to this new variable, what the keyword this means in this context is the entire window.
So right now, JS Bin is giving you this JS Bin output sort of text right here but in reality, you're getting the entire window object for the whole website. And one way that we can sort of guard against this is by defining what the value of the keyword this is. So here, I could actually just bind this to my module and then I would be able to return the proper value again. So I'm actually binding the get name method to the module itself.
So that assures that when I'm passing this to some name, it's getting the right context of the keyword this. But one of the things that I could do in addition to that is just give it a different context. So if I pass a different object here, then what happens is when I'm calling this method, I'm going to tell it what I want the value of name to be. And so when I run this, you'll see that for the second one, we will get the value of Bob.
But whenever we issue a separate return statement right here, if we're not careful, then the value of this is not going to have the right context. In those instances, you see that we make sure that we bind the value of this. Remember, this in the level that we're in is the same as this computed method right here. So if we do an add the text that I'm highlighting right here then this would not get the proper value whenever we have these double returns.
You can see the same thing happening over here as well because we have these two return statements, and the value of this always changes depending on the context, but we can always redefine it using the bind method. So although the keyword this is pretty complicated, it's something that you really need to understand. So make sure that you take a look at the bind documentation on MDN, the Mozilla Developer Network, and we've got some courses that can help you with this.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.