Example analysis of JS this_javascript skills

Source: Internet
Author: User

JS's This is what? About this thing, there are too many explanations in the blog, but I took a look at it, feeling a little complicated to explain this, so I hereby give this a simple and easy to understand definition.

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

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

I hope you can 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 current object's user property value
 }
}
//Call GetName Method
alert (A.getname ()) of A;

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

Next, we add a line to the above code:

Create a local object a
var a = {
 User: ' Small East ',
 getname:function () {
  return this.user;//returns the current object's user property value
 }
}
//Call GetName Method
alert (A.getname ()) of A;
Assigning the property function of a local object to the outside variable out
var = a.getname;
Call out Function
alert (out ());

According to the above experimental results, we know that the direct call to the A.getname output is small east, right? So, what do we output when we assign the A.getname property function to an out variable and then call out? The result is: undefined. Why would it be undefined? Please think for a while. If you understand why the output here is undefined, then I think your understanding of this is clear. 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 is not get the value of a object, we turned the corner, please see the following code (in fact, and the above code is almost, hehe):

Create a local object a
var a = {
 User: ' Small East ',
 getname:function () {return
 1;//here we do not return this, but returns 1
}
///Call the GetName Method
alert (A.getname ()) of A;
Assigning the property function of a local object to the outside variable out
var = a.getname;
Call out Function
alert (out ());

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

The reason is very simple, when we call the outside global variable out, it points to the object that should be out, not to a object, and who is the Out object? We should know that JS in the global declared variables object is the Window object. now that this refers to window when the call is out, the function out=a.getname=function () {return this.user} We should write the This.user in the Window.user, right? But at the moment, is there a Window.user attribute value in the global variable? Didn't you? 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 a
var a = {
 User: ' Small East ',
 getname:function () {
  return this.user;//returns the current object's user property value
 }
}
//Call GetName Method
alert (A.getname ()) of A;
Assigning the property function of a local object to the outside variable out
var = a.getname;
We add a Window.user global attribute to see what
the var window.user= ' window ' s username ' will output if the call out function is called again;
Call out Function
alert (out ());

Now, when you execute the above code again, you will find out that the output function is not undefined, but window ' s username, what does this prove? proves that when out calls this, this does point to window, and it does prove that this is: who is calling it, pointing to WHO.

If you do not understand the global variables JS, then we can change the above code to the following code to call out, you will be more clear:

Create a local object a
var a = {
 User: ' Small East ',
 getname:function () {
  return this.user;//returns the current object's user property value
 }
}
//Call GetName Method
alert (A.getname ()) of A;
Assigning the property function of a local object to the outside variable out
var = a.getname;
At this point, we add a user variable to see what
the var user= ' window ' s username ' will output if the call out function is called again.
Call out Function
alert (out ());

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

This is not hard to understand, and it's hard to understand that you're going to find the that calls it Object, only if you find an object that calls this, you know exactly who this is pointing to, because: this is defined as: who calls it and who it points to.

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.