Summary of how to use the this keyword in JavaScript

  • 2020-05-12 02:16:48
  • OfStack

In javascritp, this is defined only in the context of object methods, global function calls, and several other different contexts.
It can be a global object, a current object, or any object, depending on how the function is called. Functions in JavaScript can be called in the following ways: as object methods, as functions, as constructors, and with apply or call.

1. Method invocation as an object

In JavaScript, a function is also an object, so a function can be an attribute of an object, at which point the function is called a method of the object, to which this is naturally bound.

  
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 Bind to the current object, i.e point object

2. Called as a function

Functions can also be called directly, where this is bound to a global object. In the browser, window is the global object. For example, when a function is called, this is bound to a global object, and then an assignment statement is executed, implicitly declaring a global variable, which is obviously not what the caller wants.

  
function makeNoSense(x) {
this.x = x;
}
makeNoSense(5);
x;// x Has become a 1 A value of 5 Global variable of

This way of binding to a global object creates another problem for internal functions, functions that are declared inside another function. Let's take the point object as an example. This time, we want to define two functions within the moveTo method, which will translate the x and y coordinates, respectively. The result may surprise you. Instead of moving the point object, there are two more global variables x and y.


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

This is a design flaw of JavaScript. The correct design method is that the this of the inner function should be bound to the object corresponding to its outer function. In order to avoid this design flaw, clever programmers of JavaScript came up with a method of variable substitution, which is commonly named that.


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

JavaScript supports object-oriented programming. Unlike the mainstream object-oriented programming languages, JavaScript does not have the concept of a class (class), but instead USES prototype-based (prototype) inheritance. Accordingly, the constructor in JavaScript is special, and if it is not called with new, it will look like a normal function. As another convention, the constructor begins with a capital letter to remind the caller to call it the right way. If the call is correct, this is bound to the newly created object.


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

Call with apply or call

Again, in JavaScript, functions are objects, objects have methods, apply and call are methods of function objects. These two methods are extremely powerful in that they allow you to switch the context in which the function is executed (context), which is the this bound object. Many of the techniques and libraries in JavaScript use this method. Let's look at a specific example:


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 used the constructor to generate an object, p1, which also has the moveTo method; Another object, p2, is created using the object literal, and we see that the p1 method can be applied to p2 using apply, where this is also bound to the object p2. Another method, call, also has the same function, except that the last parameter is passed in separately instead of as a single array.


function Foo(){
//1.this The constructor referenced is argument.callee Referenced object
// The specification is through new The constructor executed by the operator
if(this.constructor==arguments.callee){
alert('Object Created');
}
//2.this is window . So it's a global call
if(this==window){
alert('normal call');
}
else{//3. Otherwise it is called as a method on another object
alert('called by '+ this.constructor);
}
}
Foo();// Global function call
Foo.call(new Object());// As a 1 a object Object member methods to call
new Foo();// be new Operator to perform object construction


Related articles: