What does the graphical JavaScript this point refer to?

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 (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:

1 varPoint = { 2x:0, 3y:0, 4MoveTo:function(x, y) {5       This. x = This. x +x;6       This. y = This. Y +y;7      } 8  };9 //Decision Tree Interpretation: The Point.moveto function is not a new call, enter no decision,Ten //is with dot (.) Called before the. MoveTo call object, that is, the point OnePoint.moveto (a);//This binds to the current object, which 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:

 1  function   func (x) { 2  this . x = X;  3   4  func  (5); // this is a global object window,x a global variable  5   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 window  6  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:

1 varPoint = { 2x:0, 3y:0, 4MoveTo:function(x, y) {5      //intrinsic Functions6      varMoveX =function(x) {7       This. x = x;//What does this point mean? Window8     }; 9     //intrinsic FunctionsTen     varMovey =function(y) { One      This. y = y;//What does this point mean? window  A     };  - MoveX (x); - Movey (y); the     }  -  };  -Point.moveto ();  -Point.x;//=>0 +Point.y;//=>0 -X//=>1 +Y//=>1

The Point.moveto function actually calls the MoveX () and Movey () functions inside of the MoveX () function within the "JavaScript this decision tree " The process of judging is this:

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:

1 functionPoint (x, y) {2      This. x =x; //This ?  3      This. y =y; //This ?  4  }5 varnp=NewPoint ();6np.x;//17 varP=point (2,2);8p.x;//error, p is an empty object undefined9window.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 thevar 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:

1 functionPoint (x, y) {2      This. x =x;3      This. y =y;4      This. MoveTo =function(x, y) {5          This. x =x;6          This. y =y;7     } 8  } 9 Ten varP1 =NewPoint (0, 0);  One varP2 = {x:0, y:0};  AP1.moveTo.apply (P2, [10, 10]);//Apply is actually P2.moveto (10,10) -p2.x//Ten

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.　

What does the

graphical JavaScript this point to?