Simply understand JS's this

What is JS's this? About this thing, there are too many explanations in the blog park, but I looked at it, I feel a little complicated about this explanation, so I give this a simple and easy to understand the definition.

This is actually a JS object, as to what is the object? Very simple, this object is: Who calls it, it points to who.

On this point, in fact, the blog Park article has been explained a lot, and some articles also talked about the idea, but they are still a little vague, here, I give you a few simple control experiments, according to the results of these control experiments, we should be very clear.

I hope you will repeat the following experiment according to my code.

First, let's look at the following code:

// Create a local object a var a = {    User:' small East ',    getName:function() {        return  this. User; // returns the value of the user property of the current object     }}// Call a GetName method alert (A.getname ());

What does the above code output? Yes, here's the alert. Small east, very simple, here is the inside of a object called this, is definitely a object called this, so according to Who calls this it points to who this definition, so here's this point is the A object.

Next, we add a line to the code above:

 //  Create a local object a   var  a = {User:  ' small East ' 

According to the above experimental results, we know that the direct call to A.getname output is small east, right? So, after we assign the A.getname property function to the out variable, what does it output when we call out? The result is: undefined. Why would it be undefined? Please think for a while. If you understand why the output is undefined, then I think you have a clear understanding of this. However, if you are interested in this article, you can still continue to watch.

Here, I do not explain why the outside reference to the GetName function of a object can not get the value of a object inside, we turn around, please look at the following code (in fact, and the above code is similar, hehe):

 //  Create a local object a   var  a = {User:  ' small East ' 

The above code is very simple, here, we are not in the GetName property function of the A object to return the object of something, but return to ... 1, so, now you call out the out function again, what do you think will output? Yes, you're not getting it. Undefined , but a real number. 1. That's weird, isn't it? When the A.getname function returns the user property inside the A object, we use out to refer to the A.getname function, we get the result of the undefined, and when the A.getname function returns 1 o'clock, we use the Out reference a.getname function to get A.get What's inside the name? What's going on here?

The reason is simple: when we call out the global variable out, the This it points to the object that should be out, not the A object, but who is the object of the out? We should know that the object of the variable that JS declares in the Global is the Window object. Since this refers to window when the out is called, then the function out=a.getname=function () {return this.user;} We should write Window.user in the This.user, right? But, at the moment, is there a Window.user property value in the global variable? No, huh? Since there is no window.user this attribute value, then our alert (window.user) must be undefined. To prove this, let's do the following experiment:

//Create a local object avarA ={User:' Little East ', GetName:function(){        return  This. User;//returns the value of the user property of the current object    }}//call A's GetName methodalert (A.getname ());//assigning a local object's property function to an outside variable outvarout =A.getname;//Let's add a Window.user global property and see what it will output if the out function is called again.varwindow.user= ' window ' s username ';//Call out functionAlert (out ());

Now, when you execute the above code again, you will find out that the Out function output is no longer undefined, but window's username, which proves what? proves that when out invokes this, the this does point to the window and proves that this is indeed: who calls it and it points to who.

If you do not understand the global variables of JS, then we can replace the above code with the following code to call out, you have more understanding:

//Create a local object avarA ={User:' Little East ', GetName:function(){        return  This. User;//returns the value of the user property of the current object    }}//call A's GetName methodalert (A.getname ());//assigning a local object's property function to an outside variable outvarout =A.getname;//now, let's add a user variable and see what the Out function will outputvaruser= ' window ' s username ';//Call out functionAlert (out ());

Here, we no longer enable window This object, for the outside of the properties and functions, we all use Var to declare, since they are declared with Var, then they should all point to the same object it? At this point, you execute the above code, that is, execute the OUT function, and you can still alert out window's username. In this way, the definition of this is clear enough, it is: who calls it it points to who.

This is not difficult to understand, and it's hard to understand that you have to find the that calls it Object, you only find the object that called this, and you know who this is, because: the definition of this is: who calls it, it points to who.

　　

　　

Simply understand JS's this