Flexible understanding of this pointer in JavaScript_javascript skills

This is one of the keywords in JavaScript. It is often used when writing programs. It is especially important to correctly understand and use the keyword this. First of all, it must be said that the point of this cannot be determined when the function is defined. Only when the function is executed can it be determined who this points to. In fact, this ultimately points to the object that calls it (this sentence is somewhat Problem, I will explain why there is a problem later. Although most articles on the Internet say this, although in many cases there will be no problems if you understand it that way, in fact, it is inaccurate to understand it that way, so before you understand There will be a feeling of being unable to figure this out), so I will explore this issue in depth next.

Why should you learn this? If you have studied functional programming or object-oriented programming, then you definitely know what it is used for. If you have not studied it, you don’t need to read this article for the time being. Of course, you can also read it if you are interested. After all, this is js. Something that must be mastered.

Example 1:

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

As we said above, this ultimately points to the object that calls it , the function a here is actually pointed out by the Window object, as the following code can prove.

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

It is the same as the above code. In fact, alert is also an attribute of window and is also clicked by window.

Example 2:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn();

This here points to object o, because you call this fn It is executed through o.fn(), so the natural point is the object o. Let me emphasize again that the point of this cannot be determined when the function is created. It can only be determined when it is called. Whoever calls it will point to it. To 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 fully understand this, you must read the next few examples

Example 3:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn();

This code is almost the same as the code above, but why does this here not point to the window? If according to the above theory, ultimately this points to the object that calls it, here Let me start by saying something extra. Window is a global object in js. The variables we create actually add attributes to window, so we can use the window dot o object here.

Let’s not explain why this in the above code does not point to the window. Let’s look at a piece of code.

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

The object o is also pointed out here, but this also does not execute it. Then you will definitely say that I said at the beginning Aren't those all wrong? Actually it's not, it's just that what I said at the beginning was inaccurate. Next I will add a sentence. I believe you can completely understand the problem pointed by this.

Case 1: If there is this in a function, but it is not called by the upper-level object, then this points to the window. What needs to be explained here is that in the strict version of js, this It does not point to window, but we will not discuss the strict version here. If you want to know more, you can search online.

Case 2: If there is this in a function, and this function is called by the upper-level object, then this points to the upper-level object.

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 its upper level. Object, Example 3 can prove it. If you don’t believe it, then let’s 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 there is no attribute a in object b, this this also points to object b, because this will only point to its upper level Object, regardless of whether there is something this wants in this object.

There is another 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 window , are you a little confused? In fact, it is because you did not understand a sentence, which is also crucial.

This always points to the object that called it last, that is, who called it when it was executed. In Example 4, although function fn is referenced by object b, when fn is assigned a value When variable j is given, it is not executed, so it ultimately points to window. This is different from Example 3, which directly executes fn.

This is actually the same thing, but it will point to something different in different situations. There are some small errors in the above summary, and it cannot be said to be an error. , but the situation will be different in different environments, so I can't explain it clearly at once, you can only experience it slowly.

Constructor version of this:

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

The reason why object a can point out the user in function Fn is because the new keyword can change the point of this and point this this to object a. Why do I say a is an object? Because using the new keyword is to create an object. Object instance. To understand this sentence, you can think about our example 3. Here we create an instance of Fn using variable a (equivalent to copying a copy of Fn into object a). At this time, it is only created and not executed. The object that calls this function Fn is object a, so this naturally points to the object, so why is there user in object Fn? Because you have copied a copy of the Fn function to object a, and using the new keyword is equivalent to copying. Ordered one.

In addition to the above, we can also change the point of this by ourselves. Regarding changing the point of this by ourselves, please see the summary of the call, apply, and bind methods in JavaScript. This article explains in detail. How do we manually change the pointer of this.

The above is the content of flexibly understanding this pointing to _javascript skills in JavaScript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!