Js thorough understanding of this point.

　　First, it must be said, this point in time is a function definition can not be determined only when the function is performed in order to determine this point in the end who is , in fact, this final point is that calling it an object ( this sentence some question, will explain later why there is a problem, although most of the online article says so, as though to understand in many cases not be a problem, but in fact that understanding is not accurate, so you understand this kind of wondering when will feel impervious ) , then the next I will explore this issue in depth.

　　Why learn this? If you learn object-oriented programming, then you definitely know what to use, if you have not learned, then temporarily can not see this article, of course, if you are interested you can also see, after all, this is a must to master js thing.

Example 1:

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

As we said above, this is the final point of calling it an object, where the function was actually a point out of the Window object, the following code can be proved.

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this);　　//Window
}
window.a();

And the above code as it, in fact alert window is a property, but also points out the window.

Example 2:

O = {var 
    User: "Dream child", 
    Fn: function () { 
        the console.log (this.user); // sub Dream 
    } 
} 
o.fn ();

　　this is the point where the object o, because you call this fn by o.fn () execution, that nature is pointing to the object o, to emphasize that here again, this point when the function is created not decide, in when called to decide, who called on the point who, we must understand this.

In fact, Example 1 and Example 2 say is not accurate enough, the following example can overthrow the theory above.

If you want to really get to know this must look at the next few examples

This article Source: Dream sub-blog

Example 3:

O = {var 
    User: "Dream child", 
    Fn: function () { 
        the console.log (this.user); // sub Dream 
    } 
} 
window.o.fn ();

　　This code is part of the code above is almost the same, but this is not the point here is why the window, if in accordance with the above theory, the final point of this is to call its object, where the first to say the words out, window is the js global objects, variables, we created actually add properties to the window, so the window where you can use the point o object.

　　Not here to explain why the above code during this why there is no point window, we look at a piece of code.

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

　　Here also the object o point out, but again this did not execute it, then you would certainly say that I started to say that it is wrong not to do? In fact, not only said at the beginning is not accurate, then I will complement the word, I believe you can completely understand the problem points of this.

　　Case 1: If there is this a function, but it has not been invoked on an object, then this point is the window, there should be noted that in the strict version of this js not point window, but not here Discussion strict version of the problem, you want to know can go online to look for.

　　Case 2: If there is this a function, this function has the object to be called on stage, so this point is on an object.

　　Case 3: If this one function, this function contains a plurality of objects, although this function is called outermost objects, this point on it is only an object, the example 3 can be proved, if not I believe, then the next we continue to look at a few examples.

var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

Although not a property of the object b, this is also an object of this points to b, because this will only point to its previous level objects, whether this object there's something to this.

There is also a special case, Example 4:

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

Here this points to the window, is not some Mongolia? In fact, because you do not understand a word, this sentence is also essential.

　　this always points to the last of its object calls, also is to see when it is executed who invoked the example 4 Although the function fn is the object b referenced, but did not execute it when the fn assigned to the variable j the final point is the window, and this is not the same as example 3, example 3 is a direct implementation of fn.

　　this is actually going to speak in terms of that one thing, but in different circumstances point to be somewhat different from the above summary of every place has some small error, it can not be said to be wrong, but on the situation in different environments will be different, so I have no way to explain once, you can only go slowly experience.

Constructors version this:

the Fn function () { 
    this.user = "Dream child"; 
} 
var A = the Fn new new (); 
the console.log (a.user); // sub Dream

　　The reason here can point out a target function Fn inside the user because the new keyword can point to this change, and this object is a point to this, why do I say that is a target, because with the new key is to create an object instance, we understand this sentence can think of examples 3, here we use a variable creates an instance of Fn (equivalent to copy an object a Fn inside), then just created, and did not execute, and call this Fn function is a target, then this points to a natural object, then why there will be a target user, because you have to copy a Fn function in a subject, using the new keyword is equivalent to a copy copies.

　　In addition to the above these, we can also point to this change on their own, and their own point about changing this statement See summary of JavaScript in the call, apply, bind method of this article, we described in detail how to manually change the point of this.

Update a small problem when this hit return

function fn()  
{  
    this.user = '追梦子';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined

A look

function fn()  
{  
    this.user = '追梦子';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

Again

Fn function ()   
{   
    this.user = 'Dream sub';   
    return. 1; 
} 
var A = new new Fn;   
the console.log (a.user); // sub Dream

Fn function ()   
{   
    this.user = 'Dream sub';   
    return undefined; 
} 
var A = new new Fn;   
the console.log (a.user); // sub Dream

What does that mean?

　　If the return value is an object, then this points to is that the returned object, if the return value is not an object then this still points to an instance of the function.

function fn()  
{  
    this.user = '追梦子';  
    return undefined;
}
var a = new fn;  
console.log(a); //fn {user: "追梦子"}

　　Another point is that although the object is null, but this still points to an instance where that function as null rather special.

Fn function ()   
{   
    this.user = 'Dream sub';   
    return null; 
} 
var A = new new Fn;   
the console.log (a.user); // sub Dream

Knowledge Point added:

　　1. The default in this version is no longer a strict window, but undefined.

　　2.new operator can change the function of this points to a problem, although we explained above, too, but did not discuss this issue in depth, on-line and rarely say, so here it is necessary to say something.

function fn(){
    this.num = 1;
}
var a = new fn();
console.log(a.num); //1

　　Why this would point to a? First, the new keyword creates an empty object, and then call a function that will automatically apply the method, this would point to the empty object, so the interior of this function will be replaced with the empty object.

2017-09-15 11:49:14

　　Note: When you empty a new target when the internal implementation js not necessarily apply with ways to change this point, and here I am just an analogy only.

　　if (this === dynamic \ changeable) return true;