An in-depth and simple analysis of the usage of this in JavaScript_javascript skills

The examples in this article describe the usage of this in javaScript. Share it with everyone for your reference. The specific analysis is as follows:

When I was learning JavaScript before, I couldn’t figure out this. This this is not as easy to understand as this in java. I later understood it after reading many articles written by others. Now I am moving over what others have written, lest I forget it later.

In general, there are three types of directions for this. Points to the global window, the object, and the constructor.

Conclusion: In Javascript, this points to the current object when the function is executed. To put it simply, which object the called method belongs to, this points to that object.

1. Global window

Simple code

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
printMessage();

Because the calling method printMessage belongs to window, the output result is:

true this in window

Now if you change the code to be more complicated

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMsg : function(){
 printMessage();
  }
};
obj.printMessage();

At this time, the printMessage method belongs to window, so its this still points to window. The obj.printMessage method belongs to the obj object. See the analysis below.

So the output result is still: true this in window

2. The object

Now take a look at the object and change the code slightly

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMessage : window.printMessage
};
obj.printMessage();

Result:

false this in obj

Yes, you are right. It is still the conclusion of the previous step. The obj.printMessage method belongs to the obj object, so this points to obj.

Okay, don’t worry anymore, look at the code:

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMessage : function(){
 var obj2 = {
   message:'this in obj2',
   printMessage: window.printMessage
 };
 obj2.printMessage();
  }
};
obj.printMessage();

The final call is obj2.printMessage(), so when this is executed, that this is obj2

Result:

false,this in obj2

Haha, is it the same as you think? Whoever calls it points to whom.

3. Constructor

var Person = function(){
  this.age = 1;
  this.name = 'no name';
};
var p = new Person();
console.info('age = ' + p.age);
console.info('name = ' + p.name);

Result:

age = 1 name = no name.

So what does the constructor do to this? The "Understanding the javaScript prototype chain in simple terms" mentioned earlier includes an analysis of new.

var Person = function(){};
var p = new Person();

The new process is divided into the following three steps:
(1) var p={}; that is, initialize an object p
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); that is to say, constructing p, which can also be called initialization p

Then let’s talk about call.

call method

Applies to: Function object
Call a method on an object to replace the current object with another object.

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

Parameters:
thisObj
Optional. The object that will be used as the current object.
arg1, arg2, , argN
Optional. A sequence of method parameters will be passed.

Description:
The call method can be used to call a method on behalf of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj. If the thisObj parameter is not provided, the Global object is used as thisObj.

Explain that the function of the call method is actually to change the this point of the default method. The call method must be a method object. When call is called, the this point of the method object will become the first parameter of the call method. It's that simple.

var p = new Person();

When the constructor Person is called, it may be processed through call, so that this in Person points to p. This.age = 1 is equivalent to p.age = 1, so that the age attribute is added to p.

I hope this article will be helpful to everyone’s JavaScript programming design.