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

　　

var point = {  x:0,  y:0,  moveto:function (x, y) {      this.x = this.x + x;      This.y = This.y + y;      }  };/ /Decision Tree Explanation: The Point.moveto function is not a new call, enter no decision,//is used dot (.) The call to the. MoveTo before the call object, that is, Pointpoint.moveto (); 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:

　　

function func (x) {  this.x = x;  } func (5);//this is the global object window,x the global variable//Decision tree: Is the func () function called with new? To No, is the Func () function called with dot? Is no, this points to the global object windowx;//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:

　　

var point = {  x:0,  y:0,  moveto:function (x, y) {      //internal function     var MoveX = function (x) {      this.x = x ; What does//this point to? Window    };     Intrinsic    var movey = function (y) {     this.y = what does y;//this point to? Window    };     MoveX (x);     Movey (y);     }  };  Point.moveto (a);  Point.x; =>0  point.y;//=>0  x;//=>1  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:

　　

function point (x, y) {     this.x = x;//This?    This.y = y; This? }var np=new Point, Np.x;//1var p=point (2,2);p. X;//error, P is an empty object undefinedwindow.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:

　　

function point (x, y) {     this.x = x;     This.y = y;     This.moveto = function (x, y) {         this.x = x;         This.y = y;     }  } var p1 = new Point (0, 0); var P2 = {x:0, y:0}; P1.moveTo.apply (P2, [ten]);//apply is actually P2.moveto (10,10) 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:

The

"function in JavaScript can be executed either as a normal function or as a method of an object, 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 the   arguments variable that contains the arguments that were passed in when the function was called. Next, create the scope chain. Then initialize the variable, first initializing the function's formal parameter list, the value is   the corresponding value in the arguments variable, if   arguments variable does not have a corresponding value, the parameter is initialized to   undefined . If the function contains intrinsic functions, the intrinsic functions are initialized. If not, continue initializing the local variables defined within the function, and be aware that at this point these variables are initialized to   undefined , It is important for us to understand the scope of variables in JavaScript because the assignment operation is performed when the execution Environment (EXECUTIONCONTEXT) is successfully created, which is why we do not discuss this topic in the first place. Finally, the   the this variable is assigned a value, as described earlier, and is assigned to   this global object, 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.

Source: http://www.cnblogs.com/isaboy/

What does the graphical JavaScript this point refer to?