This is one of the keywords in JavaScript and is often used when writing programs. It is particularly important to correctly understand and use the keyword this. First of all, it must be said that this pointing cannot be determined when the function is defined. Only when the function is executed can this point to. In fact, this ultimately points to the object that calls it (there are some problems in this sentence, and we will explain why there are problems later. Although most articles on the Internet say this, although there will be no problem in understanding it like that in many cases, it is actually inaccurate to understand it, so you will feel that you can't figure it out when you understand this). Then I will discuss this issue in depth next.
Why learn this? If you have learned functional programming and object-oriented programming, you must know what to do. If you haven't learned it, you don't have to read this article for the time being. Of course, if you are interested, you can also read it. After all, this is something that must be mastered in JS.
Example 1:
function a(){
var user = "Chasing Dreams";
(); //undefined
(this); //Window
}
a();
According to what we said above, this ultimately points to the object that calls it. The function a here is actually pointed out by the Window object, and the following code can prove it.
function a(){
var user = "Chasing Dreams";
(); //undefined
(this);//Window
}
();
Just like the above code, alert is actually a property of window, and it is also pointed out by window.
Example 2:
var o = {
user:"Chasing Dreams",
fn:function(){
(); //Chasing Dreams}
}
();
This here points to object o, because you call this fn and execute it through (), so the natural pointing is object o. Here again, this pointing cannot be decided when the function is created, and it can only be decided when it is called. Whoever calls it will point to whom, you must figure this out.
In fact, Example 1 and Example 2 are not accurate enough. The following example can overturn the above theory.
If you want to understand this thoroughly, you must look at the next few examples
Example 3:
var o = {
user:"Chasing Dreams",
fn:function(){
(); //Chasing Dreams}
}
();
This code is almost the same as the above code, but why does this point to the window? If you follow the above theory, this point to the object that calls it. Let me say something else here. Windows is a global object in js. The variable we create actually adds attributes to window, so you can use window to point the O object here.
I won't explain why this code above does not point to window. Let's look at another code.
var o = {
a:10,
b:{
a:12,
fn:function(){
(); //12
}
}
}
();
This is also pointed out by object o, but this does not execute it, so you will definitely say that what I said at the beginning is all wrong? Actually, it’s not, it’s just that it was inaccurate at the beginning. Next, I will add one sentence. I believe you can thoroughly understand the problem that this points to.
Case 1: If there is this in a function, but it is not called by an object at the previous level, then this points to window. What needs to be explained here is that in the strict version of js, this points to window, but we will not discuss the problem of the strict version here. If you want to know, you can search the Internet by yourself.
Case 2: If there is this in a function and this function is called by an object at the previous level, then this points to the object at the previous level.
Case 3: If there is this in a function, this function contains multiple objects. Although this function is called by the outermost object, this only points to the object at the next level. Example 3 can prove that if you don't believe it, then let's continue to look at a few examples next.
var o = {
a:10,
b:{
// a:12,
fn:function(){
(); //undefined
}
}
}
();
Although there is no attribute a in object b, this also points to object b, because this will only point to its previous object, regardless of whether there is anything this wants in this object.
There is another special case, Example 4:
var o = {
a:10,
b:{
a:12,
fn:function(){
(); //undefined
(this); //window
}
}
}
var j = ;
j();
This pointes to window here, isn't it a little confused? In fact, it is because you don’t understand a sentence, which is also crucial.
This always points to the object that calls it last, which means who calls it when it is executed. In Example 4, although function fn is referenced by object b, it is not executed when assigning fn to variable j, so it ultimately points to window, which is different from Example 3. Example 3 directly executes fn.
This is actually just that, but the pointing will be different under different circumstances. The above summary is a little mistake in each place, and it cannot be said to be a mistake, but the situation will be different in different environments, so I can't explain it clearly at once, so you can only experience it slowly.
Constructor version this:
function Fn(){
= "Chasing Dreams";
}
var a = new Fn();
(); //Chasing Dreams
The reason why object a can point out the user in the function Fn here is because the new keyword can change the direction of this and point this to object a. Why do I say a is an object? Because using the new keyword is to create an object instance. Understanding this sentence, you can think of our example 3. We use the variable a to create an instance of Fn (equivalent to copying a Fn into object a). At this time, it is just created and not executed. The one calling this function Fn is object a. Then this pointing naturally is an object. Why is there a user in object Fn? Because you have copied a Fn function into object a. Using the new keyword is equivalent to copying a copy.
In addition to the above, we can also change the direction of this by ourselves. For changing the direction of this by ourselves, please see the summary of the call, apply, and bind methods in JavaScript, which explains in detail how we manually change the direction of this.
Flexible understanding of this pointing in JavaScript is of great help to our work. Thank you for your support for my website!