Analyze the usage of this in javaScript

This article gives an example of this usage in javaScript. Share to everybody for everybody reference. The specific analysis is as follows:

When I was learning javascript before, I was always confused about this, which is not as easy to understand as this in java. I have read many articles written by others before I understand. Now put other people write things to move over, afraid to forget later.

In general, this has three directions. Points to the global window, the object, constructor.

Conclusion: In Javascript, this refers to the current object when the function executes. Simply put, this points to the object to which the method is called.

1. Global window

Simple code

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

Since the calling method printMessage belongs to window, the output is:

true this in window

Now if I make the code a little bit 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();

Now the printMessage method belongs to window, so his this still points to window. The ES41en. printMessage method is owned by the obj object, see the analysis below.

So the output is still :true this in window

2. The object

Now let's take a look at this object and change the code a little bit

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();

Results:

false this in obj

Yes, you are right. Again, the conclusion from step 1 is that the obj.printMessage method belongs to the obj object, so this is pointing to obj.

Okay, then, 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 we get to this, that this is obj2

Results:

false,this in obj2

Haha, is it the same as you think, who calls, pointing to who.

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);

Results:

age = 1 name = no name.

So what does the constructor do to this? The previous "Understanding javaScript prototype chain" has an analysis of new.

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

The new process is broken down into the following three steps:
(1) var p = {}; That is, initialize 1 object p
(2) p.__proto__ = Person.prototype;
(3) Person. call (p); That is to say construct p, or initialize p

So let's talk about call.

call method

Applied to: Function object
Calls 1 method on 1 object, replacing 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 instead of another object. The call method changes the object context of a function from the original context to a new object specified by thisObj. If no thisObj parameter is provided, the Global object is used as thisObj.

In explanation 1, the call method is used to change the default this point. The call to the call method must be 1 method object, and when called call, the this point to the method object becomes the first argument to the call method, that's all.

var p = new Person();

When the constructor Person is called, it may be handled by call, so that this in Person points to p, this.age = 1 is equivalent to p.age = 1, thus p adds the attribute age.

I hope this article has been helpful for your javascript programming.