JavaScript in this

JavaScript is a scripting language that supports advanced functions such as functional programming, closures, and prototype-based inheritance. JavaScript initially looks like it's easy to get started, but with the depth of use, you'll find that JavaScript is really hard to master, and some basic concepts are incredible. The This keyword in JavaScript is a fairly confusing concept, and this will incarnate different objects in different scenarios. There is a view that only the correct mastery of the This keyword in JavaScript is the gateway to the language of JavaScript. In the mainstream object-oriented language (such as java,c#, etc.), this meaning is explicit and specific, that is, pointing to the current object. Generally binding at compile time. In JavaScript, this is bound at run time, which is the essential reason that the This keyword has multiple meanings in JavaScript.

Because of the nature of JavaScript binding at run time, this can be a global object, the current object, or any object in JavaScript, depending on how the function is called. The invocation of a function in JavaScript has several ways: as an object method call, as a function call, as a constructor call, and with an apply or call invocation. As the saying goes, the word is inferior to the table. To get a better understanding of what javascript this is pointing to? This is explained in a graph below:

I call it the "JavaScript this decision tree " (not strict mode). Here's an example of how this graph can help us judge this:

1var point ={2 x:0,3 y:0,4 MoveTo:function(x, Y) { 5 this.x = this.x + X;  6 this.y = this.y + Y;   8  };  9 //10 // is using dot (.) Call, point to the Call object before. MoveTo, that is, Point11 Point.moveto (All); //this binds to the current object, that is, the point object      

The procedure for determining the Point.moveto () function in theJavaScript this decision tree is this:

1) Does the Point.moveto function call be called with new? This is obviously not, go to the "no" branch, that is, whether the function with dot (.) Make a call? ；

2) The Point.moveto function is using dot (.) The call, which goes to the "Yes" branch, where this is pointing to Point.moveto. The previous object point;

The schematic diagram of the Point.moveto function that this is pointing to is as follows:

For example, look at the following code:

function2  this.x =//This is the global object window,x for global variables // Decision Tree Parsing: is the Func () function called with new? To No, is the Func () function called with dot? Is no, this points to the Global object window6 x;  x = 5        

The Func () function is determined in the "JavaScript this decision tree " process:

1) Does the Func (5) function call be called with new? This is obviously not, go to the "no" branch, that is, whether the function with dot (.) Make a call? ；

2) the Func (5) function is not used with dot (.) The call, that is, into the "no" branch, that is, this point to the global variable window, then this.x is actually window.x;

The schematic diagram of what the this point of the Func function is pointing to IS as follows:

The following is a complex example of how to call directly as a function:

1var point ={2 x:0,3 y:0,4 MoveTo:function(x, Y) {5//Intrinsic functions6var MoveX =function(x) {7this.x = x;//What does this point mean? Window8};9//Intrinsic functions10var Movey =function(y) {11This.y = y;//What does this point mean?Window12}; 13  MoveX (x); 14  Movey (y); 15  16  }; 17 Point.moveto (1,118 point.x; //=>0 19 Point.y; Span style= "color: #008000;" >//=>0 20 x; //=>1 21 y; //=>1           

The Point.moveto ()function actually calls the MoveX () and Movey () functions, and this is how the this in the MoveX () function is judged in theJavaScript this decision tree :

1) MoveX (1) function call is called with new? This is obviously not, go to the "no" branch, that is, whether the function with dot (.) Make a call? ；

2) MoveX (1) function is not using dot (.) The call, that is, into the "no" branch, that is, this point to the global variable window, then this.x is actually window.x;

Let's take a look at an example of a constructor call:

1functionPoint (x, y) {2This.x =X//This?3 this.y = Y; // this? 4 }5 var np=new Point (1,1//17 var p=point (2,2//error, p is an empty object undefined 9 window.x; //2         

The process for the point ( np=new) function to determine this in the "JavaScript Thisdecision tree " in var.

1) does the Var np=new point call be called with new? This is obviously, enter "is" branch, that is this point NP;

2) So this.x=1, that is, np.x=1;

The process for the point (2,2) function to determine this in the "JavaScript Thisdecision tree " in var p= point (2,2) is as follows:

1)does the Var p= point (2,2) call be called with new? This is obviously not, go to the "no" branch, that is, whether the function with dot (.) Make a call? ;

2) The point(2,2) function does not use dot (.) To make the call? The decision is no, that is, to enter the "no" branch, that is, this point to the global variable window, then this.x is actually window.x;

3) this.x=2 is window.x=2.

Let's take a look at the example of a function call and apply:

1functionPoint (x, y) {2This.x =X3This.y =Y4This.moveto =function(x, Y) {5This.x = X;  6 this.y = Y;  7   8   9 10 var p1 = new Point (0 , 0); 11 var P2 = {x:0, Y:012 p1.moveTo.apply (P2, [10, 10]); //apply is actually P2.moveto (10,10) 13 p2.x//10   

The process of determining the p1.moveTo.apply (p2,[10,10]) function in theJavaScript this decision tree is this:

We know that the two methods of apply and call are exceptionally powerful, and they allow the context of the function execution to be toggled, that is, the object of this binding. P1.moveTo.apply (p2,[10,10]) is actually P2.moveto (10,10). Then P2.moveto (10,10) can be interpreted as:

1) does the P2.moveto (10,10) function call be called with new? This is obviously not, go to the "no" branch, that is, whether the function with dot (.) Make a call? ；

2) P2.moveto (10,10) function is using dot (.) Make the call, that is, go to the "Yes" branch, where this is pointed to P2.moveto (10,10). Before the object P2, so p2.x=10;

With regard to the JavaScript function execution Environment process, the IBM developerworks Document Library section of the description feels very good, excerpt as follows:

　　 "A function in JavaScript can be executed as a normal function or as an object's method, which is the main reason for the richness of this meaning." When a function is executed, an execution environment (ExecutionContext) is created, and all the behavior of the function occurs in this execution environment, when the execution environment is built, JavaScript first creates arguments variable that contains the arguments passed in when the function is called. Next, create the scope chain. Then initialize the variable, initialize the function's formal parameter list first, the value is the arguments corresponding value in the variable, and if arguments there is no corresponding value in the variable, the parameter is initialized undefined . If the function contains intrinsic functions, the intrinsic functions are initialized. If not, continue to initialize the local variables defined within the function, it is important to note that at this time the variables are initialized undefined , and their assignment is executed when the execution Environment (EXECUTIONCONTEXT) is successfully created, which is why we understand JavaScript The scope of the variables in is very important, given the length, we will not discuss this topic here. Finally, assign a value to the this variable, as described above, depending on how the function is called, assign to the this global object, the current object, and so on. The execution Environment (EXECUTIONCONTEXT) of the function is created successfully, the function begins to execute line by row, and the required variables are read from the previously built execution Environment (EXECUTIONCONTEXT). "

Understanding this passage will be of great benefit to understanding JavaScript functions.

JavaScript in this