Shulou(Shulou.com)05/31 Report--

This article mainly introduces "this pointing to case analysis in javascript". In daily operation, I believe that many people have doubts about the problem of this pointing to case analysis in javascript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "this pointing to case analysis in javascript". Next, please follow the editor to study!

JavaScript is a scripting language that supports functional programming, closures, prototype-based inheritance, and other advanced features. JavaScript may seem easy to get started at first, but as you use it, you will find that JavaScript is actually very difficult to master, and some basic concepts are unimaginable. The this keyword in JavaScript is a concept that is easy to be confused. In different scenarios, this will incarnate different objects. There is a view that only if you correctly master the this keyword in JavaScript can you enter the threshold of the JavaScript language. In mainstream object-oriented languages (such as Java,C#, etc.), the meaning of this is clear and specific, that is, it points to the current object. It is generally bound at compile time. In JavaScript, this is bound at run time, which is the essential reason why the this keyword in JavaScript has multiple meanings.

Because of the run-time binding feature of JavaScript, the this in JavaScript can be a global object, a current object, or any object, depending on how the function is called. There are several ways to call a function in JavaScript: as an object method call, as a function call, as a constructor call, and using apply or call calls. As the saying goes, the word is not as good as the table, and the table is not as good as the picture. In order to give people a better understanding of what JavaScript this points to? The following is explained by a picture:

I call the above figure the "JavaScript this decision tree" (in non-strict mode). Here is an example of how this diagram 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 interpretation: point.moveTo (1) function is not called by new, enter the decision or not, / / use dot (.) To make a call, point to the calling object before .moveto, that is, point point.moveTo (1d1); / / this is bound to the current object, that is, the point object

The point.moveTo () function determines in the "JavaScript this decision tree" as follows:

1) is the point.moveTo function call called with new? This is obviously not, enter the "no" branch, that is, whether the function uses dot (.) Make a call?

2) the point.moveTo function uses dot (.) To make the call, enter the "yes" branch, where the this points to the point.moveTo. Previous object point

An analytical diagram illustrating what the this of the point.moveTo function points to is shown in the following figure:

For another example, look at the following code:

Function func (x) {this.x = x;} func (5); / / this is a global object window,x is a global variable / / decision tree parsing: is the func () function called with new? No, is the func () function called with dot? If not, the this points to the global object window xdexplash x = > 5

The func () function determines in the "JavaScript this decision tree" as follows:

1) is the func (5) function call called with new? This is obviously not, enter the "no" branch, that is, whether the function uses dot (.) Make a call?

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

An analytical diagram illustrating what the this of the func function points to is shown in the following figure:

For a way to call a function directly, let's look at a complex example:

Var point = {x: 0, y: 0, moveTo: function (x, y) {/ / the inner function var moveX = function (x) {this.x = x the hand hand this point to? Window}; / / what does the inner function var moveY = function (y) {this.y = y hand hand point to? Window}; moveX (x); moveY (y);}}; point.moveTo (1 point.y; 1); point.x; / / = > 0 point.y; / / = > 0 x; / / = > 1 y; / / = > 1

The point.moveTo (1) function actually calls the moveX () and moveY () functions internally. The this inside the moveX () function makes decisions in the "JavaScript this decision tree" as follows:

1) is the moveX (1) function call called with new? This is obviously not, enter the "no" branch, that is, whether the function uses dot (.) Make a call?

2) the moveX (1) function does not use dot (.) To make the call, enter the "no" branch, that is, the this here points 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 (XBI y) {this.x = x; / / this? This.y = y; / / this?} var np=new Point (1 Magi 1); np.x;//1 var p=Point (2 Magi 2); p. X Bandard error, p is an empty object undefined window.x;//2

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

1) is the var np=new Point (1) call called with new? This is obviously entering the "yes" branch, that is, this pointing to np.

2) then this.x=1, or np.x=1

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

1) var p = Point (2jin2) is the call made with new? This is obviously not, enter the "no" branch, that is, whether the function uses dot (.) Make a call?

2) the Point (2) function does not use dot (.) To make the call? If it is judged to be no, that is, enter the "no" branch, that is, the this here points to the global variable window, then this.x is actually window.x

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

* take a look at an example of a function called with 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, [10LJ 10]); / / apply actually means p2.moveTo (10Jet 10)

P2.x//10

The decision process of the p1.moveTo.apply (p2, [10jue 10]) function in the JavaScript this decision tree is as follows:

We know that apply and call are so powerful that they allow you to switch the context in which the function executes (context), that is, this-bound objects. P1.moveTo.apply (p2, [10jue 10]) is actually p2.moveTo (10jol 10). Then p2.moveTo (10d10) can be interpreted as:

1) is the p2.moveTo (10) function call called with new? This is obviously not, enter the "no" branch, that is, whether the function uses dot (.) Make a call?

2) the p2.moveTo (1010) function uses dot (.) To make the call, enter the "yes" branch, where the this points to p2.moveTo (10, 10). The previous object p2, so p2.x=10

With regard to the process of JavaScript function execution environment, a description in the IBM developerworks document library feels good. The excerpt is as follows:

"functions in JavaScript can be executed either as ordinary functions or as methods of objects, which is the main reason why this is so rich in meaning. When a function is executed, an execution environment (ExecutionContext) is created, and all the behavior of the function takes place in this execution environment. When building the execution environment, JavaScript first creates the arguments variable, which contains the parameters passed in when the function is called. Next, create a scope chain. Then initialize the variable, first initialize the formal parameter table of the function, and the value is the corresponding value in the arguments variable. If there is no corresponding value in the arguments variable, the parameter is initialized to undefined. If the function contains internal functions, initialize them. If not, continue to initialize the local variables defined in the function. It is important to note that these variables are initialized to undefined at this time, and the assignment operation will not be executed until the execution environment (ExecutionContext) is created successfully. This is very important for us to understand the scope of variables in JavaScript. Due to the space, we will not discuss this topic here. * assign a value to the this variable. As mentioned earlier, it will be assigned to the this global object, the current object, etc., depending on the way the function is called. When the execution environment (ExecutionContext) of this function is successfully created, the function begins to execute line by line, and the required variables are read from the previously built execution environment (ExecutionContext). " Understanding this passage will be of great benefit to understanding the Javascript function.

At this point, the study of "this in javascript points to case analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.