This keyword in js and jsthis keyword

This keyword in js and jsthis keyword

• This keyword in js
  • This IN GLOBAL SCOPE
  • This in function Scope
  • This under different function call Methods
    • Direct call
    • Method call as an object
    • Called as a constructor
    • Call through the call or apply Method
  • This in the scope of nested Functions

This keyword in js

This is one of the keywords in JavaScript and is often used in programming. Correct understanding and use of this keyword is especially important. Next, I will discuss my understanding of this keyword from the scope perspective, hoping to give some inspiration and use it for communication.

This IN GLOBAL SCOPE

This article will gradually understand this keyword in the out-of-scope manner. First, check the following line of code:

Console. log (this); // Window Global Object

After executing the preceding statement in the browser, we will get a Window object, which is a global object. In the global scope, we can access all global attributes through this. The following code is used:

var a = 1;console.log(this.a); // 1

This in function Scope

Now, we put the this keyword into the function scope. The test code is as follows:

var a = 1;function test(){    var a = 2;    console.log(this.a); // 1}test();

We can see that the printed result is still 1, that is to say, this points to a global object. It can also be clarified that this does not point to the function scope (or does not point to the activity object in the function scope chain, for more information about the concept of activity objects, see JavaScript stenographer 5-execution environment, variable object, and scope chain). Will this point to the function itself? Let's look at the following example:

var a = 1;function test(){    var a = 2;    console.log(this.a); // 1}test.a = 3;test();

Through the above example, we know that this does not point to the function itself. In the above example, this eventually points to global objects, so under what circumstances will this point to other objects? Let's take a look at the following example:

var a = 1;function test(){    var a = 2;    console.log(this.a); // 3}var obj = {a: 3};test.call(obj);

In the above example, this points to the object obj. Since this object can be determined only when a function is called, the next section describes the use of this for different function call methods.

Direct call of this under different function call Methods

var a = 1;function test(){    console.log(this.a); //1}test();

Obviously, the function is called directly because this points to a global object.

Method call as an object

var a = 1;function test(){    console.log(this.a); // 2}var obj = {a: 2, fn: test};obj.fn();

When a function is called as an object's method, this points to the object currently calling this method.

Called as a constructor

var a = 1;function test(){    this.a = 2;}var obj = new test();console.log(a); // 1console.log(obj.a); // 2

The code above shows that attribute a in the global object has not been changed, and this points to the object created by the constructor.

Call through the call or apply Method

Both call and apply are Function object methods and can be used to dynamically change the point of this to achieve Function reuse. I will not describe these two methods in detail here. If you are interested, refer to the relevant articles. Note that the first parameter of the two methods is this. The usage of the two methods is similar. Here we use the call method as an example. Example above:

var a = 1;function test(){    console.log(this.a); // 1}test.call();

The first parameter of the call method is this. In the example above, the default object that this points to is a global object without real parameters. Let's look at an example:

var a = 1;function test(){    console.log(this.a); // 1}var obj = {a: 2, fn: test};obj.fn.call();

The above example further demonstrates that, even if the call method of the object is called, this still points to the global object by default. To change the point of this, we need to explicitly pass the first parameter, as shown in the following code:

var a = 1;function test(){    console.log(this.a); // 2}var obj = {a: 2};test.call(obj);

This in the scope of nested Functions

At the end of this article, let's take a look at this reference in nested functions. The sample code is as follows:

var a = 1;function test(){    console.log(this.a); // 2    function test2(){        console.log(this.a); // 1    }    test2();}var obj = {a: 2, fn: test};obj.fn();

The preceding example shows that a nested function is called and does not inherit this reference of a nested function. When a nested function is called, this points to a global object. In some applications, we need to read the attributes of the object that calls the nested function in the nested function. At this time, we can declare a local variable to save this reference. The Code is as follows:

var a = 1;function test(){    console.log(this.a); // 2    var self = this;    function test2(){        console.log(self.a); // 2    }    test2();}var obj = {a: 2, fn: test};obj.fn();

In this article, we have made some simple analysis on the this keyword, and also referred to some articles on the Internet. Here, I would like to thank them. If they can help you, I feel very honored.