Sharing a new understanding of this pointer in JavaScript_javascript skills

The understanding of this has always been that it can be used and can be used, but it has not delved into its essence. This time, I gained a deep understanding through "JavaScript The Good Parts". (All debugging can be seen in the console, browser F12 key)

Let’s take a look at this together.

When we declare a function, in addition to the parameters (formal parameters) when it is defined, each function will also have two additional parameters, one is this and the other is arguments (actual parameters). arguments are the parameters actually received by the function, which are an array-like array. I will only give a brief introduction to arguments, focusing on the this pointer.

In object-oriented programming, this is very important, and its value depends on the calling mode. In JavaScript, there are a total of 4 calling modes: method calling mode, function calling mode, constructor calling mode, and apply calling mode.

Method calling mode

When a function is used as a property of an object, we usually call the function a method of the object. When this method is called, this will point to the object to which the method belongs.

Copy code The code is as follows:

As shown in the chestnut, this points to the sayName object. This method of obtaining the context of the object through this is a public method. (publice method)

Function calling mode

When a function is called but is not a method on an object, then it is called as a function.

When called in this mode, this will point to the window object, even if this function may be called in an external function, let's look at an example.

Copy code The code is as follows:

Looking at it this way, you probably know how to solve the "design error" of JavaScript.

Yes, just cache this in the student function, which is line 6. Then transfer this to the sayName function through a variable and you can solve it!

Copy code The code is as follows:

var people = {
         name: "people-Yika",
student: function(){
              var self = this; //Cache this
              function sayName(){
              var name = "sayName-Yika";
                        console.log(self.name); //"people-Yika", self at this time points to the people object
            };
                sayName();
}
}

Constructor calling mode

When talking about constructors in JavaScript, you will think: "Capitalize the function name! Use the new operator when calling!" Capitalizing the function name is easy to understand, and it is to standardize and unify the naming of constructors. But have you ever delved into why you need to use new? If you call a function with new in front of it, the function background will create a new object pointing to the prototype of the function, and this will also be bound to the new object. JavaScript is a language based on prototype inheritance. Students who are not very clear about the prototype can check the information by themselves. I will focus on this.

Let’s first take a look at what a constructor generally looks like.

Copy code The code is as follows:

At first glance, it seems not easy to understand. Why was this in the function pointed to the window just now, but now it can point to the People function without caching?

It doesn’t matter. Didn’t I just say that when a function is called through new, it will do “bad things” behind the scenes? Let’s take a look at what exactly it has done.

Copy code The code is as follows:

You will understand clearly if you look at it this way. New will not only generate an object, but also automatically return this object, so naturally this will point to this new object.

Be sure to use new to call the constructor, otherwise there will be no warning if something goes wrong. All capital letters are still very necessary.

Apply calling mode The

apply method allows us to construct an array of parameters to pass to the calling function, and also allows us to change the this value.

function.apply(this bound value, arguments parameter array)

There are too many things that can be said about apply. I will only give you a few examples to help you understand:

Copy code The code is as follows:

We can easily modify the this binding object of the function through apply. The call method, which is similar to apply, also has the same effect. Interested students can search and learn it by themselves.

Okay, we have finally finished talking about the four calling modes for changing this. Method calling mode and constructor calling mode will be used more and are more important. As for the function calling mode, we must learn to avoid them. trap.

If there are any errors, please report them in time and I will correct them as soon as possible to prevent misleading others. Thank you!