Summary and detailed explanation of this pointer in javaScript

The following editor will bring you a summary of this pointing based on javaScript. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

The pointing of this in JavaScript has always been a worry for front-end colleagues, and it is also the first choice for interview questions. Now let’s summarize the pointing of this in js. First, you need to understand a few concepts:

1: Global variables are mounted under the window object by default

2 : Generally, this points to its caller

3: In the arrow function of es6, this points to the creator, not the caller

4: You can change the pointer of this through call, apply, and bind

Let’s analyze it in detail

1: When calling the function

## (non-strict mode)

const func = function () {
  console.log(this);
  const func2 = function () {
   console.log(this);
  };
  func2(); //Window
 };
 func(); //Window

(strict mode)

'use strict'
 const func = function () {
  console.log(this);
  const func2 = function () {
   console.log(this);
  };
  func2(); //undefined
 };
 func(); //undefined

Combined the fourth and first two rules: func is a global function and is mounted under the window object by default , this points to its caller, which is window, so the window object is output. However, in strict mode, this is not allowed to point to the global variable window, so the output is undefined (func2 points to the global window by default when the function is called directly. In fact, this belongs to javascript Design flaws. The correct design method is that this of the inner function should be bound to the object corresponding to its outer function. In order to avoid this design flaw, smart JavaScript programmers have come up with variable substitution methods. As a rule, this Variables are usually named that. This method will be discussed next).

2: As an object method

const user = {

  userName: '小张',
  age: 18,
  selfIntroduction: function () {
   const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;
   console.log(str);

   const loop = function () {
    console.log('我的名字是:' + this.userName + ",年龄是:" + this.age);
   };

   loop();  //我的名字是:undefined,年龄是:undefined

  }
 };

 user.selfIntroduction(); //我的名字是:小张,年龄是:18

According to our first rule, this points to him The caller of the selfIntroduction() method is user, so inside the selfIntroduction() method this points to its parent object, user, and the reason why the loop method outputs undefined is the design of javascript I mentioned above. Flaw, in this case, we usually choose to cache this in the selfIntroduction() method.

const user = {
  userName: '小张',
  age: 18,
  selfIntroduction: function () {
   const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;
   console.log(str);

   const that=this;

   const loop = function () {
    console.log('我的名字是:' + that.userName + ",年龄是:" + that.age);
   };

   loop();  //我的名字是:小张,年龄是:18

  }
 };

 user.selfIntroduction(); //我的名字是:小张,年龄是:18

At this time, the this point of the loop is ideal.

const user={

  userName:'小张',
  age:18,
  selfIntroduction:function(){
   const str='我的名字是:'+this.userName+",年龄是:"+this.age;
   console.log(str); 
  }
 };

 const other =user.selfIntroduction;
 other(); //我的名字是:undefined,年龄是:undefined

 const data={
  userName:'小李',
  age:19,
 };
 data.selfIntroduction=user.selfIntroduction;
 data.selfIntroduction(); //我的名字是:小李,年龄是:19

When looking at this code, selfIntroduction() is assigned to the global variable other, and the other() method is called. other is mounted under the global function window object, window There are no userName and age attributes under the object, so the output is undefined. The second piece of code declares the data object, which contains the username and age attributes. Remember our second rule. Generally, this points to its caller. Everyone will understand that data is the caller of the selfIntroduction() function. , so the userName and age of data are output.

3: Triggered as an event in html

<body>

 <p id="btn">点击我</p>

</body>

const btn=document.getElementById('btn');

  btn.addEventListener('click',function () {
   console.log(this); //<p id="btn">点击我</p>
  })

In this case, the second rule is actually followed. Generally, this points to its caller, and this points to the event source of the event, which is the event.

4: new keyword (constructor)

##

const fun=function(userName){
  this.userName=userName;
 }
 const user=new fun('郭德纲'); 
 console.log(user.userName); //郭德纲

I won’t go into details on this. The new keyword constructs an object instance and assigns it to user, so userName becomes an attribute of the user object.

5:es6 (arrow function)

const func1=()=>{
  console.log(this); 
 };
 func1(); //Window

const data={
  userName:'校长',
  selfIntroduction:function(){
   console.log(this); //Object {userName: "校长", selfIntroduction: function}

   const func2=()=>{
    console.log(this); //Object {userName: "校长", selfIntroduction: function}
   }

   func2();
  }

 }

 data.selfIntroduction();

Everyone is looking at the third rule I mentioned at the beginning: In the arrow function of es6, this points to the creator, not the caller. fun1 is created under the global function, so this points to the global window, and fun2 is created under the object data. this points to the data object, so inside the func2 function this points to the data object. I personally think that the this point of the es6 arrow function is an improvement on the JavaScript design flaws I mentioned above (personal knowledge).

#6: Change the point of this The three functions call, apply, and bind can artificially change the point of this of the function. I won’t go into detail about the differences between the three here. I will explain the differences between the three in detail in future blogs. Now let’s take one as an example

const func=function(){
 console.log(this);
};

func(); //window

func.apply({userName:"郭德纲"}); //Object {userName: "郭德纲"}

These three methods can artificially change the pointer of this. The difference is that call and apply will bind the method to this. It is executed immediately afterwards, and the bind method returns an executable function.

To sum up a lot of this, it is the 4 points I mentioned at the beginning

1: Global variables are mounted by default in Under the window object

2: Generally this points to its caller

3: In the arrow function of es6, this points to the creator, not the caller

4: Through call, apply, Bind can change the pointer of this

To be honest, it is my first time to write a blog. I am really nervous. Will anyone read my blog? Could it be written incorrectly? ...I have thought a lot better and have summarized: I welcome corrections on any shortcomings.

The above is the detailed content of Summary and detailed explanation of this pointer in javaScript. For more information, please follow other related articles on the PHP Chinese website!