Summary of how to use this keyword in JavaScript_javascript tips

In JavaScript, this is not necessarily only found in the context of object methods. There is also this reference in global function calls and several other different contexts.
It can be the global object, the current object, or any object, it all depends on how the function is called. There are several ways to call functions in JavaScript: as an object method, as a function, as a constructor, and using apply or call.

1. Call as an object method

In JavaScript, functions are also objects, so functions can be used as attributes of an object. At this time, the function is called a method of the object. When using this calling method, this is naturally bound to the object.

Copy code The code is as follows:

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

2. Call as a function

The function can also be called directly, in which case 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.

Copy code The code is as follows:

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.

Copy code The code is as follows:

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

This is a design flaw in JavaScript. The correct design method is that this of the internal function should be bound to the object corresponding to its outer function. In order to avoid this design flaw, smart JavaScript programmers came up with variable substitution. Method, by convention, the variable is generally named that.

Copy code The code is as follows:

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

Call as constructor

JavaScript supports object-oriented programming. Unlike mainstream object-oriented programming languages, JavaScript does not have the concept of classes, but uses inheritance based on prototypes. 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.

Copy code The code is as follows:

function Point(x, y){
This.x = x;
This.y = y;
}

Use apply or call to call

Let us reiterate again 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:

Copy code The code is as follows:

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(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 on, 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.

Copy code The code is as follows:

function Foo(){
//1.The constructor referenced by this is the object referenced by argument.callee
//The description is the constructor executed through the new operator
if(this.constructor==arguments.callee){
alert('Object Created');
}
//2.this is window, then it is a global call
if(this==window){
alert('normal call');
}
else{//3. Otherwise, it is called as a method of other objects
alert('called by ' this.constructor);
}
}
Foo();//Global function call
Foo.call(new Object());//Call as a member method of an object object
new Foo();//Called by the new operator to perform object construction