This in JavaScript points to the problem

After learning JavaScript in depth, we are more and more encounter functions or inside the object, for this point of confusion, in fact, basically every programming language has a this, the this point is very similar, you can also Chinese it means, This means that this is the meaning of itself, so in JavaScript, what happens to our this instead of the same as the code situation? Today, let's take a look at one of JavaScript's pointing questions about this:

First of all, this can point to the Window object, and other objects that call it, of course, in strict mode, it points to undefined, so let's first look at the simplest form, code 1:

1 function people (name,age) {2      this.name = name;3      this.age    = age;4}5 var xiaoming=new people (' xiaoming ', 13) ; 6 alert (xiaoming.name);//This will eject Xiaoming

Above, is the simplest form of our understanding of this, xiaoming is a newly created object through the constructor people, so the this in the function points to our object xiaoming, all when we call Xiaoming.name, Will pop its name, notice that here we are beautiful to create an object, this object will have its own this to point to itself, well, this is the simplest way of our application, I believe we do not have doubts about this way. Let's go Down, Code 2:

function people (name,age,shoes) {this.name = Name;this.age = Age;this.shoes =shoesthis.run = function () {Console.log ( This.name+ "wearing" +this.shoes+ "in Running");}  }

var xiaoming=new people (' xiaoming ', +, ' Nike ');
Xiaoming.run ();//xiaoming wearing Nike in running

So here we can see that the methods in the class, called the properties in the class, can be called, this is like you want to run, and shoes are your own, then of course you can wear your Nike shoes to run, well, now here, we should all understand, This is our most basic usage. Let's go Down, Code 3:

1 var name = "Little Red"; 2 var shoes= "Adidas" 3 function people (name,age,shoes) {4      this.name  = name; 5      this.age   = age; 6      this . Shoes =shoes 7      this.run   = (function () {8          return function () {9              console.log (this.name+ "wearing" +this.shoes + "in Running")          (}11)      (),}14 var xiaoming=new people (' xiaoming ', +, ' Nike ')     ; /1.html:241 xiaoming wearing Nike in running the var other = xiaoming.run;17 other          ();//1.html:241 Little Red wearing Adidas running

All right, from the top of the code, we can obviously see this point in the object of the problem, to remember that this point is an object, is an object entity, is a meaningful, it does not point to the function, such as the 15th line of code 3, the run function from the call returned is a closure, One might think that the 15th Guild returns Little Red, but because the caller of line 15th is still xiaoming, it returns the Xiaoming method, which is a contrast to line 17th.

1 function people (name,age,shoes) {2      this.name  = name; 3      this.age   = age; 4      this.shoes =shoes 5      This.run   = (function () {6         var timer= setinterval (function () {7         Console.log (this.name+ "wearing" +this.shoes+ " In running "); 8      },30)              (9          )      ();}14 var xiaoming=new people (' xiaoming ', +, ' Nike '); 15//here will be crazy output Little red .

Here we go. The first problem we want to illustrate, when this is in the timer, this is pointing to window, so we can also understand that this point is not defined at the time of definition, but at the time of the call is determined, which brings us so much uncertainty, For this, our most common way, and the easiest place to point to errors, should be in the anonymous function:

1 var name = "Little Red"; 2 var shoes= "Adidas" 3 function people (name,age,shoes) {4      this.name  = name; 5      this.age   = age; 6      this . Shoes =shoes 7      this.run   = (function () {8         console.log (this.name+ "wearing" +this.shoes+ "in Running"); 9      }); 11     }15 var xiaoming=new people (' xiaoming ', +, ' Nike '); 16//Output Little Red

For anonymous functions, I can understand that every function in the execution of I will look for its this caller and the arguments parameter, and the anonymous function of this is the window, so the execution of the anonymous function is global, so, when we use the anonymous function, Be sure to note that it's this point problem, we can use that to capture, call apply and bind to correct the point of this problem,

1 var name = "Little Red"; 2 var shoes= "Adidas" 3 function people (name,age,shoes) {4      this.name  = name; 5      this.age   = age; 6      this . Shoes =shoes 7      this.run   = (function () {8         console.log (this.name+ "wearing" +this.shoes+ "in Running"); 9      }) ();      return {};12-     }16 var xiaoming=new people (' xiaoming ', +, ' Nike '); Console.log ( Xiaoming.name);//undefined

Here we need to pay attention to another problem, that is, when we have a return value in the constructor, and this return value when an object, then this will point to the returned object, and generally our constructor is not the return value, this is another point we should pay attention to.

Well, here, I hope you can understand this a little more, in the application we use this more, will deepen our understanding of this. There is a shortage of places also hope to correct, thank you!

This in JavaScript points to the problem