Easy Learning JavaScript 29: This in JavaScript

These days in the read a lot of JS code, multiple occurrences of this keyword, sometimes expressed that do not understand, and carefully read the knowledge of this aspect.

in the JavaScript language, this is defined as: This is the object that owns the function that contains it when the method is invoked. Description: This sentence is a bit biting

Mouth, but an extra word does not, the definition is very accurate, we can be divided into 3 parts to understand it: 1 contains its function. 2 As the method is invoked. 3 the

The object of the genus. The value of this will change as the function is used in different situations. But there is a general principle, that is, this refers to the function that is called

An object.

This is a keyword in the JavaScript language that represents an internal object that is automatically generated when the function is run, and can only be used inside a function, such as:

function To_green () {      this.style.color= "green";//this here refers to the Window object}to_green ();//functions called   

Let's analyze the above function:

The function that contains this is To_green (), which is called as a method. The object to which the function belongs is the Window object by default. So

this refers to the Window object, and the EXECUTE statement in the To_green () method becomes: window.style.color= "green"; This makes the Window object very

Fire, because it does not have a style property, the statement There is no effect.

We can look at a more realistic example:

Window.load=function () {      var Example=document.getelementbyid ("Example");      example.onclick=to_green;//the event handler function      To_green () {      this.style.color= "green" assigned to an object;// Here this represents the object of example      }      }

We analyze again:

We know that with the assignment operation, the example object's onclick event gets the To_green () method, then the function containing this is the onclick event,

then this is the HTML element object referenced by example. So this environment can be changed as the function is assigned to different objects!

Let's take advantage of the above example to achieve this:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Pre-click Effects:
Post-click Effects:
The use of this is discussed in detail in four scenarios.
Case one: purely function calls
This is the most common use of a function, which is a global call, so this represents the Window object. Take a look at the code below, which results in a 1 operation.
To prove that this is the Window object, you can make some changes to the code:
The result of the operation is still 1. Change it a little bit again:
var x=1;//global variable function test () {this.x=0;//global variable x re-assigns a value of 1} test ();//Function call alert (x);//output: 0
Scenario Two: Invocation as an object method
A function can also act as a method call to an object, at which point this is the ancestor object.
function test () {alert (this.x);} var obj={};//defines an object OBJ.X=1;OBJ.M=TEST;OBJ.M ();//output: 1
The above test () is assigned to the Obj object as a method, stating that this refers to obj here.
Scenario three is called as a constructor function
The so-called constructor is to generate a new object by this function (object). At this point, this is the new object.
function test () {this.x=1;} var obj=new test ()//Define an Object alert (obj.x);//output: 1
The run result is 1. To indicate that this is not a global object, make some changes to the code again:
var x=2;//global variable function test () {this.x=1;} var obj=new test ()//Define an Object alert (obj.x);//output: 1alert (x);//output: 2, indicating that the global variable has not changed
The run result is 2, indicating that the value of global variable x does not change at all.
Scenario Four apply Call
Apply () is a method of a function object that alters the function's calling object, and its first parameter represents the changed call to the function.
The object. Therefore, this is the first parameter.
var x=0;function test () {alert (this.x);} var obj={};//defines an object obj.x=1;obj.m=test;obj.m.apply ();//output: 0
The global object is called by default when the argument to apply () is empty. Therefore, the result of this operation is 0, which proves that this refers to the global object.
If the above code is modified to
var x=0;function test () {alert (this.x);} var obj={};//defines an object obj.x=1;obj.m=test;obj.m.apply (obj);//output: 1
The result of the operation becomes 1, which proves that this represents the Obj object.
After reading these basic is also JS basic tutorial inside the detailed, for some advanced JS tutorial also have more detailed explanation and examples. If you want to know
The more detailed this mechanism, you can see the following three articles, since it is still not quite understood, in the back of the study need to strengthen the understanding of this. These three articles
Article from Csdnyvettelau's blog:
The This lexical of a JavaScript
Two The This morphology of JavaScript (ii)
Three JS this lexical (iii)



Easy Learning JavaScript 29: This in JavaScript