The This keyword usage method in JavaScript summarizes _javascript tips

In JAVASCRITP, this is not necessarily the only context in the object method, and there is also this reference in the global function invocation and in several different contexts.
It can be a global object, the current object, or any object, depending entirely on how the function is invoked. There are several ways to invoke functions in JavaScript: As an object method call, as a function call, as a constructor call, and with an apply or call invocation.

1. Call As Object method

In JavaScript, a function is also an object, so a function can be a property of an object, at which point the function is called the method of the object, which is naturally bound to the object when the invocation is used.

Copy Code code 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 bound to the current object, that is, the point object

2. As a function call

A function can also be called directly, at which point this is bound to a global object. In the browser, window is the global object. For example, the following example: When a function is called, this is bound to a global object, and then the assignment statement, which is tantamount to declaring a global variable implicitly, is clearly not what the caller wants.

Copy Code code as follows:

function Makenosense (x) {
this.x = x;
}
Makenosense (5);
x;//x has become a global variable with a value of 5

For an intrinsic function, a function declared in the body of another function, this way of binding to the global object creates another problem. We still take the point object mentioned above as an example, this time we want to define two functions within the MoveTo method, and translate the x,y coordinates separately. The result may be unexpected, not only the point object does not move, but more than two global variable x,y.

Copy Code code as follows:

var point = {
x:0,
y:0,
Moveto:function (x, y) {
Internal function
var MoveX = function (x) {
This.x = Where did x;//this bind to?
};
Internal function
var Movey = function (y) {
This.y = Where did y;//this bind to?
};

MoveX (x);
Movey (y);
}
};
Point.moveto (1, 1);
Point.x; ==>0
Point.y; ==>0
X ==>1
Y ==>1

This is a JavaScript design flaw, the correct design is that the internal function of this should be bound to its outer function corresponding to the object, in order to circumvent this design flaw, clever JavaScript programmer came up with a variable substitution method, by convention, the variable is generally named that.

Copy Code code 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

Called as a constructor function

JavaScript supports object-oriented programming, and unlike the mainstream object-oriented programming language, JavaScript does not have classes (class) concepts, but rather uses a prototype (prototype) approach to inheritance. Correspondingly, the constructors in JavaScript are very special, as are normal functions if you do not use the new call. As another established guideline, the constructor begins with an uppercase letter, reminding the caller to invoke it in the correct manner. If the call is correct, this binds to the newly created object.

Copy Code code as follows:

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

Calling using Apply or call

Let's again reiterate that in JavaScript, functions are objects, objects have methods, and apply and call are methods of function objects. These two methods are exceptionally powerful, allowing you to toggle the context in which the function is executed, that is, the object of this binding. Many of the techniques in JavaScript and the class library use this method. Let's look at a concrete example:

Copy Code code 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 example above, we used the constructor to generate an object P1, which has a moveTo method, and another object using the literal object P2, and we see using apply to apply the P1 method to the P2, when this is also bound to the object P2. Another method call has the same function, and the difference is that the last parameter is not uniformly passed as an array, but is passed in separately.

Copy Code code as follows:

function Foo () {
1.this referenced constructor is an object referenced by Argument.callee
Description is a constructor executed through the new operator
if (This.constructor==arguments.callee) {
Alert (' Object Created ');
}
2.this is window, then the global call
if (This==window) {
Alert (' normal call ');
}
Else{//3. Otherwise, it is called as a method for other objects
Alert (' Called by ' + This.constructor);
}
}
Foo ();//global function call
Foo.call (New Object ()), or as a member method of an object, to invoke the
New Foo ()//called by the new operator, executing object construction