Flexible understanding of this points in JavaScript

this is one of the JavaScript keywords. It is often used when writing programs. It is especially important to understand and use the this keyword correctly. First of all have to say is that this pointing at the time of function definition cannot be determined, the only function to determine who to this, actually this to call it is the ultimate point of the object (behind some problems in this sentence, would explain why there are problems, although most of the articles online, while in many cases to understand what's the problem, not but actually that understanding is not accurate, so when you understand this is elusive feeling), then I will further discuss this problem.

Why learn this? If you have studied functional programming, object-oriented programming, then you certainly know what to do. If you have not, then you can not read this article for the time being, of course, you can read it if you are interested, after all, it is a must to learn js.

Example 1:

function a(){
var user = " Pursue the son ";
console.log(this.user); //undefined
console.log(this); //Window
}
a(); 

As we said above, this ultimately refers to the object on which it is called. The function a here is actually clicked by the Window object, as the following code can prove.

function a(){
var user = " Pursue the son ";
console.log(this.user); //undefined
console.log(this);　　//Window
}
window.a(); 

As in code 1 above, alert is also a property of window, which is also a result of window.

Example 2:

var o = {
user:" Pursue the son ",
fn:function(){
console.log(this.user); // Pursue the son 
}
}
o.fn(); 

Here o this point to an object, because you call this fn is through o fn (), that is natural to object o, here again 1 point, this pointing at function creates is decided, in the call of time can decide, who call who would point to a need to understand this.

In fact, examples 1 and 2 are not accurate enough. Here is an example to disprove the above theory.

To fully understand this you must look at the following examples

Example 3:

var o = {
user:" Pursue the son ",
fn:function(){
console.log(this.user); // Pursue the son 
}
}
window.o.fn(); 

This code and the code above is almost 1 sample, but why not pointing window this here, if, in accordance with the above theory, the final this refers to the object is to call it, say first here and as an aside, window is the global object in js, we create the variable is actually add attributes to window, so here can use window o object.

Without explaining why the above section of code this does not point to window, let's look at another section of code.

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

This is also from the object o, but again this doesn't execute it, so you have to say that everything I said at the beginning is wrong, right? Actually, it's not. It's just that 1 is not accurate at the beginning, and I'll add a sentence that I believe you can fully understand the problem of the direction of this.

Case 1: If a function has this in it, but it is not called by a higher-level object, then this refers to window. It should be noted that in the strict version of js, this does not refer to window, but we will not discuss the strict version here.

Scenario 2: If a function has this and the function is called by an object at the previous level, then this refers to the object at the previous level.

In case 3, if a function contains this, the function contains multiple objects. Even though the function is called by the outermost object, this only refers to the object at the level 1 above it. Example 3 proves this.

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

Even though there is no a attribute in the b object, the this object also refers to the b object, because this will only refer to an object at the level 1 above it, regardless of whether or not the object has something ES106en wants.

There is one more 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 refers to window. Is that confusing? It's because you didn't understand one sentence, which is just as important.

this always refers to the object is the last call it, is to see who is calling, when it executes example 4 although fn () function by object b reference, but the fn j assigned to variables when did not perform so eventually point is window, this is not one kind of and example 3, example 3 is performed fn directly.

this is actually the same thing, but in different circumstances will point to some different, the above summary every place there are some small mistakes, can not be said to be wrong, but in different circumstances will be different, so I can not explain it at one time, you can only slowly to experience.

Constructor version this:

function Fn(){
this.user = " Pursue the son ";
}
var a = new Fn();
console.log(a.user); // Pursue the son  

The reason why the object a can refer to the user in the function Fn is because the new keyword can change the direction of the this to the object a. The reason why I say that a is an object is because using the new keyword is to create an instance of the object. Here we use variable a created a Fn instance (equivalent to 1 copy the Fn a inside) to the object, just at this time to create, not executed, and calls the function Fn a is object, then this nature is the point to objects, then why the object Fn user, because you have copied the 1 a Fn function to an object, use the new keyword is equivalent to reproduce the 1.

In addition to the above, we can also change the direction of this by ourselves. Please refer to the summary of call,apply,bind method in JavaScript for details on how to manually change the direction of this.

A flexible understanding of the this points in JavaScript is a great help to our work, and thank you for your support of this site!