Understand this in JavaScript

In JavaScript, this is always pointing to the owner of a function or a method.

Function

Let's check out function first.

1. function introduce() {
2.      alert("Hello, I am Laruence\r\n");
3. }

For this function, what does this point to? In JavaScript, a global function's owner is the current page, i.e, the window object. Because its a method of the window object if we define a global function. Now you should know the this will point to the window object in the above function.

If we check the introduce property of window:

1. var name = "I am Laruence";
2. function introduce() {
3.      alert(this.name);
4. }
5. alert(window.introduce);
6. /**
7. * output:
8. * function introduce() {
9. * alert(this.name);
10. * }
11. */

When you call the introduce function, it will alert "I am Laruence".

Event handler

Maybe the biggest confusion about this keyword is coming from the event handler.

<input id="name"type="text"name="name"value="Laruence"/>

For example, if we want to show the value of the name field when we click this text field, we may add below codes:

1. function showValue() {
2.      alert(this.value);
3. }
4. document.getElementById('name').onclick = showValue;

In above codes. the function showValue is defined in global scope, will this point to window? The answer depends. When you assign the showValue to onclick,it means you are assign this function to the method of document.getElementById("name"), now the whowValue becomes one method of it. So this will point to document.getElementById("name"). If we check the value of onclick, we will get:

1. function showValue() {
2.      alert(this.value);
3. }
4. document.getElementById('name').onclick = showValue;
5. alert(document.getElementById('name').onclick);
6. /**
7. * output
8. * function showValue() {
9. * alert(this.value);
10. * }
11. */

However if we write below code:

1. function showValue() {
2.      alert(this.value);
3. }

It will not run as expected. Why? Because now it's not an assignment, it's a call. Now if we check the value of onclick, we will get:

1. alert(dom.onclick);
2. /**
3. * output:
4. * function onclick() {
5. * showValue();
6. * }
7. */

Change what this points to

We can use call or apply to change what this points to.

1. var laruence = {
2.      name : 'laruence',
3.      age : 26,
4.      position : 'Senior PHP Engineer',
5.      company : 'Baidu.inc'
6. };
7.  
8. function introduce() {
9.      alert(this.name);
10. }
11.  
12. introduce.call(laruence);

Source : http://www.laruence.com/2009/09/08/1076.html