Illustration of this keyword in JavaScript-javascript tutorial

This article explains the this keyword in JavaScript using the image explanation. What does JavaScriptthis point? You can get the desired answer from this article. For more information, see JavaScript as a scripting language. It supports functional programming, closures, prototype-based inheritance, and other advanced functions. JavaScript seems to be easy to get started at the beginning, but with the deepening of usage, you will find JavaScript is actually difficult to grasp, and some basic concepts are incredible. The this keyword in JavaScript is a confusing concept. In different scenarios, this will be different objects. One idea is that only the correct understanding of the this keyword in JavaScript is a threshold for JavaScript. In mainstream object-oriented languages (such as Java and C #), the meaning of this is clear and specific, that is, pointing to the current object. It is usually bound during compilation. This in JavaScript is bound at runtime, which is the essential reason for the multiple meanings of this keyword in JavaScript.

Because JavaScript is bound at runtime, this in JavaScript can be a global object, current object, or any object, depending entirely on the function call method. Functions in JavaScript can be called in the following ways: as an object method call, as a function call, as a constructor call, and using apply or call. As the saying goes, words are not as good as tables, but tables are not. What does JavaScript this point to for a better understanding? The following is an illustration:

I call it "JavaScript this Decision Tree" (in non-strict mode ). The following example shows how this graph helps us determine this:

Var point = {x: 0, y: 0, moveTo: function (x, y) {this. x = this. x + x; this. y = this. y + y ;}}; // decision tree interpretation: point. the moveTo () function is not called by the new function, and no decision is made. // The dot (.) function is used (.) to. the call object before moveTo, that is, point. moveTo (); // this is bound to the current object, that is, the point object.

The process of determining the point. moveTo () function in "JavaScript this Decision Tree" is as follows:

1) is the point. moveTo function called using new? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) The point. moveTo function is called with dot (.), that is, it enters the "yes" branch, that is, this points to the object point in point. moveTo;

The parsing diagram of the point. moveTo function's this point is shown in:

Let's look at the following code:

Function func (x) {this. x = x;} func (5); // this is the Global Object window, and x is the global variable. // decision tree parsing: Is the func () function called with new? Is it true that the function that enters func () is called using dot? Otherwise, this points to the Global Object window x; // x => 5

Func () function in"JavaScript this decision tree"The process of determining is as follows:

1) func (5) does function calling use new? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) func (5) the function does not use dot (.) to call, that is, to enter the "no" branch, where this points to the global variable window, then this. x is actually a window. x;

The parsing diagram of the point this of the func function is shown in:

The following is a complex example of direct function calling:

Var point = {x: 0, y: 0, moveTo: function (x, y) {// internal function var moveX = function (x) {this. x = x; // What does this point? Window}; // internal function var moveY = function (y) {this. y = y; // What does this point? Window}; moveX (x); moveY (y) ;}}; point. moveTo (1, 1); point. x; // => 0 point. y; // => 0 x; // => 1 y; // => 1

The point. moveTo () function actually calls the moveX () and moveY () functions internally"JavaScript this decision tree"The process of determining is as follows:

1) Does moveX (1) Use new to call a function? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) moveX (1) the function does not use dot (.) to call, that is, to enter the "no" branch, where this points to the global variable window, then this. x is actually a window. x;

The following is an example of a constructor call:

Function Point (x, y) {this. x = x; // this? This. y = y; // this? } Var np = new Point (1, 1); np. x; // 1 var p = Point (2, 2); p. x; // error, p is an empty object undefined window. x; // 2

Point () function in var np = new Point () this in"JavaScript this decision tree"The process of determining is as follows:

1) is var np = new Point () called with new? It is obvious that the "yes" branch is entered, that is, this points to np;

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

The Point () function in var p = Point () in this"JavaScript this decision tree"The process of determining is as follows:

1) var p = Point (2, 2) is a call made with new? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) isn't the Point (2, 2) function called with dot? If it is determined to be "no", it indicates that this points to the global variable window, so this. x is actually window. x;

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

Finally, let's take a look at the call and apply call examples of the function:

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, [10, 10]); // apply is actually p2.moveTo (10, 10) p2.x // 10

P1.moveTo. apply (p2:

We know that the apply and call methods are extremely powerful. They allow switching the context of function execution, that is, the objects bound to this. P1.moveTo. apply (p2, [10, 10]) is actually p2.moveTo (10, 10 ). Then p2.moveTo (10, 10) can be interpreted:

1) Does p2.moveTo (10, 10) use new to call a function? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) The p2.moveTo () function uses dot (.) to call, enter the "yes" branch, that is, this points to p2.moveTo (10, 10. the previous object p2, so p2.x = 10;

For the JavaScript function execution environment process, the description in the IBM developerworks document library is very good. The excerpt is as follows:

"Functions in JavaScript can be executed as common functions or methods of objects, which is the main cause of this's rich meaning. When a function is executed, an execution environment (ExecutionContext) is created, and all the actions of the function occur in this execution environment. When the execution environment is built, JavaScript will first create the arguments variable, it contains the parameters passed in when the function is called. Next, create a scope chain. Then initialize the variable. First, initialize the form parameter table of the function. The value is the value corresponding to the arguments variable. If there is no corresponding value in the arguments variable, the form parameter is initialized to undefined. If the function contains internal functions, initialize these internal functions. If no, continue to initialize the local variables defined in the function. Note that these variables are initialized to undefined at this time, and the value assignment operation is successful after the ExecutionContext is created, the function is executed only when it is executed. This is very important for us to understand the variable scope in JavaScript. In view of the length, we will not discuss this topic here. Assign a value to this variable. As mentioned above, this global object and current object will be assigned according to the function call method. At this point, the execution environment (ExecutionContext) of the function is successfully created, and the function starts to be executed row by row. All required variables are read from the previously created execution environment (ExecutionContext ."

Understanding this section will be helpful for understanding Javascript Functions.

The above is a detailed introduction of the this keyword in JavaScript. Generally, images are easier to understand than texts. I hope this article will be helpful for your learning.