Explore this pointer pointer in JavaScript

Explore this pointer pointer in JavaScript

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 who this point is. 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 = "Dream Chasing"; console.log(this.user); //undefined console.log(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 = "Dream Chasing"; console.log(this.user); //undefined console.log(this); //Window}window.a();

Just like the above code, alert is actually a property of window and is also pointed out by window.

Example 2:

 var o = { user:"Chasing Dreams", fn:function(){ console.log(this.user); //Chasing Dreams}}o.fn();

This here points to object o, because you call this fn and execute it through o.fn(), so the natural pointing is object o. I would like to emphasize again here that 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:"Catching Dreams", fn:function(){ console.log(this.user); //Catching Dreams} } window.o.fn();

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(){ console.log(this.a); //12 } }}obfn();

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 online 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(){ console.log(this.a); //undefined } }}obfn();

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(){ console.log(this.a); //undefined console.log(this); //window } }}var j = obfn;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(){ this.user = "Chasing Dreams";}var a = new Fn();console.log(a.user); //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 call to this function Fn is object a, so this is naturally object a. So why is there a user in object Fn? Because you have copied a Fn function into object a, and 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.

Update a small problem when this encounters return

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

Look at another one

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

Come again

 function fn() { this.user = 'Catching Dreams'; return 1;}var a = new fn; console.log(a.user); //Catching Dreams' function fn() { this.user = 'Catching Dreams'; return undefined;}var a = new fn; console.log(a.user); //Catching Dreams'

What does it mean?

If the return value is an object, then this points to 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 = 'Caughter'; return undefined;}var a = new fn; console.log(a); //fn {user: "Caughter'}

Another point is that although null is also an object, this still points to an instance of that function here, because null is more special.

 function fn() { this.user = 'Zhunting Dreams'; return null;}var a = new fn; console.log(a.user); //Zhunting Dreams

Supplements of knowledge points:

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

2. The new operator will change the pointing problem of the function this. Although we have explained it above, we have not discussed this issue in depth. It is rarely mentioned on the Internet, so it is necessary to talk about it here.

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

Why does this point to a? First, the new keyword will create an empty object, and then a function apply method will be automatically called to point this to this empty object. In this way, this inside the function will be replaced by this empty object.