Detailed explanation about this in js

This in JavaScript language

Due to its runtime binding characteristics, the meaning of this in JavaScript is much richer. It can be the global object, the current object or any object, it all depends on the function method of calling. There are several ways to call functions in JavaScript: as an object method, as a function, as a constructor, and using apply or call. Below we will discuss the meaning of this respectively according to the different calling methods.

Call as an object method

In JavaScript, a function is also an object, so the function can be used as an attribute of an object. At this time, the function is called a method of the object. When using this kind of call method, this is naturally bound to the object.

Listing 2. point.js

##1 2 3 4 5 6 7 8 9 10

##var point = { ##x : 0, y : 0, moveTo : function(x, y) { this.x = this.x + x; this.y = this.y + y; } }; point.moveTo(1, 1)//this is bound to the current Object, that is, point object

##You can also call the function as a function

Called directly, this is bound to the global object. In the browser, window is the global object. For example, in the following example: when the function is called, this is bound to the global object, and then the assignment statement is executed, which is equivalent to implicitly declaring a global variable, which is obviously not what the caller wants.

List 3. nonsense.js

##12

3

4

5

6

##function makeNoSense(x) {

this.x = x;

}

makeNoSense( 5);

x;// x has become a global variable with a value of 5

##

For internal functions, that is, functions declared in another function body, this method of binding to the global object will cause another problem. We still take the point object mentioned earlier as an example. This time we hope to define two functions in the moveTo method to translate the x and y coordinates respectively. The result may be unexpected. Not only does the point object not move, but there are two more global variables x and y.

Listing 4. point.js

This is a design flaw in JavaScript. The correct design method is that this of the inner function should be bound to the object corresponding to its outer function. In order to avoid this design flaw, smart JavaScript programmers figured out how to substitute variables, and by convention, the variable is usually named that.

Listing 5. point2.js

##1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var point = { x : 0, ##y : 0, moveTo : function(x, y) { // Internal function var moveX = function(x) { this.x = x;//Where is this bound to? }; // Internal function var moveY = function(y) { this.y = y;//Where is this bound to? }; moveX(x); moveY(y); } }; point.moveTo(1, 1); point.x; //==>0 point.y; //==>0 x; //==>1 y; //==>1

Called as a constructor

JavaScript supports object-oriented programming. Unlike mainstream object-oriented programming languages, JavaScript does not have the concept of a class. It uses prototype-based inheritance. Correspondingly, the constructor in JavaScript is also very special. If it is not called with new, it is the same as an ordinary function. As another convention, constructors start with a capital letter to remind callers to call them in the correct way. If called correctly, this is bound to the newly created object.

Listing 6. Point.js

##1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

##var point = { x : 0, y : 0, moveTo : function(x, y) {     var that = this;       // Internal function var moveX = function(x) { that.x = x; }; // Internal function var moveY = function(y) { that.y = y; } moveX(x); moveY(y); ​ } }; point.moveTo(1 , 1); point.x; //==>1 point.y; //==>1

##1 2 3 4

function Point(x, y){ ​ this.x = x; this.y = y; ##}

##Use apply or call to call

Let us reiterate that in JavaScript Functions are also objects, and objects have methods. apply and call are methods of function objects. These two methods are extremely powerful. They allow switching the context in which the function is executed, that is, the object to which this is bound. Many techniques and libraries in JavaScript use this method. Let’s look at a concrete example:

Listing 7. Point2.js

##12 function Point(x, y){

3 4 5 6 7 8 9 10 11 12 13

this.x = x; this.y = y; this.moveTo = function(x, y){ this.x = x; #} } var p1 = new Point(0, 0); var p2 = {x: 0, y: 0}; p1.moveTo(1, 1); p1.moveTo.apply(p2, [10, 10]); ## In the above example, we use the constructor to generate an object p1, which also has a moveTo method; we use object literals to create another object p2, and we see that using apply can apply the method of p1 to p2. This At this time this is also bound to object p2. Another method call also has the same function, but the difference is that the last parameter is not passed in uniformly as an array, but separately.