Jump to content
Larry Ullman's Book Forums

I Am Always Confused With The Keyword "This" ? Some One Pls Give Me Explanation In Way That I Can Understand Better .


Recommended Posts

raziqijr, I'm not exactly sure what you're asking (and your JS syntax is incorrect), so I'm going to provide a simple explanation of what this means in JS, and hope that I answer your question in doing so.

 

If you have a method (i.e., a function) within an object, and you use this within that method, then this refers to the object that contains the method. Expressed graphically, this in the following rudimentary diagram refers to the object that contains the method in which this is being used:

 

object <-- "this" below refers to this object.
|
|__method
   |
   |
   |__this

 

Now, if you use this in a globally-defined function (i.e., a function not within an object), then this will always refer to the window object. The reason why is because all globally-defined functions are implicitly attached to the window object as methods in JS (and thus a globally-defined function is actually just a method of the window object).

 

By correcting the syntax in your example, we can observe the following behavior:

If we execute the following code, then an error will occur, because str is not defined within the sayHello method:

 

var obj = {
  
  str: 'Hello',
  
  sayHello: function () {
    
    alert(str);
    
  }
  
}
 
obj.sayHello();

 

However, if we change str in the alert function to this.str, then "Hello" is alerted because this refers to the obj variable (which is an object), and this.str will reference the str property in the obj variable:

 

var obj = {
  
  str: 'Hello',
  
  sayHello: function () {
    
    alert(this.str);
    
  }
  
}
 
obj.sayHello();

 

Does that make sense?

 

It's worth noting that the above code is kind of pointless because you could easily reference the str property of the obj variable directly, meaning that there's no reason to have the sayHello method at all. For example, the following code would accomplish exactly the same thing:

 

var obj = {
  
  str: 'Hello',
  
}
 
alert(obj.str);

 

Please let me know if you have any other questions.

  • Upvote 1
Link to comment
Share on other sites

 

raziqijr, I'm not exactly sure what you're asking (and your JS syntax is incorrect), so I'm going to provide a simple explanation of what this means in JS, and hope that I answer your question in doing so.
 
If you have a method (i.e., a function) within an object, and you use this within that method, then this refers to the object that contains the method. Expressed graphically, this in the following rudimentary diagram refers to the object that contains the method in which this is being used:
 
object <-- "this" below refers to this object.
|
|__method
   |
   |
   |__this
 
Now, if you use this in a globally-defined function (i.e., a function not within an object), then this will always refer to the window object. The reason why is because all globally-defined functions are implicitly attached to the window object as methods in JS (and thus a globally-defined function is actually just a method of the window object).
 
By correcting the syntax in your example, we can observe the following behavior:
If we execute the following code, then an error will occur, because str is not defined within the sayHello method:
 
var obj = {
  
  str: 'Hello',
  
  sayHello: function () {
    
    alert(str);
    
  }
  
}
 
obj.sayHello();
 
However, if we change str in the alert function to this.str, then "Hello" is alerted because this refers to the obj variable (which is an object), and this.str will reference the str property in the obj variable:
 
var obj = {
  
  str: 'Hello',
  
  sayHello: function () {
    
    alert(this.str);
    
  }
  
}
 
obj.sayHello();
 
Does that make sense?
 
It's worth noting that the above code is kind of pointless because you could easily reference the str property of the obj variable directly, meaning that there's no reason to have the sayHello method at all. For example, the following code would accomplish exactly the same thing:
 
var obj = {
  
  str: 'Hello',
  
}
 
alert(obj.str);
 
Please let me know if you have any other questions.

thank you very much HartleySan, so it means that the this keyword can only be used within the function of an object.

Link to comment
Share on other sites

Yeah, no problem. The first time I encountered this, I was quite confused as well.

 

Something I didn't mention in my previous post is that this can also be used in functions called by event handlers.

For example, if I have the following event handler:

 

 

someDiv.onclick = changeColor;
 
function changeColor() {
  
  this.style.background = 'red';
  
}

 

Then this in the changeColor function will refer to the JS DOM object someDiv (which likely refers to some div on the screen).

Note however that this in the above context is not carried over to any other functions called within the changeColor function.

For example, if we have the following extension of the above code:

 

 

 

someDiv.onclick = changeColor;
 
function changeColor() {
  
  anotherFunction();
  
}
 
function anotherFunction() {
  
  alert(this);
  
}
 

 

Then this in the anotherFunction function will not refer to the someDiv DOM object. It will instead refer to the window object.

To keep the this in the original context, you have to pass this as an explicit argument in the function call.

  • Upvote 1
Link to comment
Share on other sites

Yeah, no problem. The first time I encountered this, I was quite confused as well.

 

Something I didn't mention in my previous post is that this can also be used in functions called by event handlers.

For example, if I have the following event handler:

 

 

someDiv.onclick = changeColor;
 
function changeColor() {
  
  this.style.background = 'red';
  
}

 

Then this in the changeColor function will refer to the JS DOM object someDiv (which likely refers to some div on the screen).

Note however that this in the above context is not carried over to any other functions called within the changeColor function.

For example, if we have the following extension of the above code:

 

 

 

someDiv.onclick = changeColor;
 
function changeColor() {
  
  anotherFunction();
  
}
 
function anotherFunction() {
  
  alert(this);
  
}
 

 

Then this in the anotherFunction function will not refer to the someDiv DOM object. It will instead refer to the window object.

To keep the this in the original context, you have to pass this as an explicit argument in the function call.

thanks again, i understand the use of this keyword , another confusion is say if we have an obj which has some method inside so now the method belong to object that mean we can change obj properties inside the function so why should we use this keyword 

Link to comment
Share on other sites

this is generally the most useful when dealing with JS DOM objects.

Let's say, for example, that there are 10 divs in an HTML document, and we store an array of DOM objects referring to those divs into a JS variable as follows:

 

var divs = document.getElementsByTagName('div');

 

Now let's imagine that we want to attach onclick event handlers to each of those divs.

We can easily do this with the following for loop:

 

var divs = document.getElementsByTagName('div');
 
for (var i = 0; i < divs.length; i++) {
  
  divs[i].onclick = changeBGColor;
  
}

 

Now let's imagine that within the changeBGColor function attached to the onclick event handlers, we want to change the background color of the divs to red:

 

var divs = document.getElementsByTagName('div');
 
for (var i = 0; i < divs.length; i++) {
  
  divs[i].onclick = changeBGColor;
  
}
 
function changeBGColor() {
  
  this.style.background = 'red';
  
}

 

This is a perfect example of why this is useful.

By using this, we can write one function that can refer to any of the divs in the DOM, and depending on which div is clicked on, the context will change, and this will automatically refer to the DOM object connected to the div that was clicked on.

 

this makes it possible to quickly and easily write flexible code that can adjust for any situation and handle a variable amount of objects.

To do the same thing without using this would actually be quite difficult.
  • Upvote 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...