Can you understand the this pointing problem of JS? take a look at this article

Can you understand JavaScript’s this pointing problem? The following article will talk to you about this annoying this pointing problem. I hope it will be helpful to you!

This's pointing

In the various introductions we have seen on how to judge this's pointing method,"this The final point is the object that calls it." This sentence is regarded as the core, but in the face of various situations, we are easily confused. Based on my understanding of various situations, I put forward a sentence "Arrows, timing and structure, look at special circumstances, look at the point number for ordinary calls, don't look at the previous point for the following points, and then judge based on the nearest principle, and finally the remaining It’s window”. [Related recommendations: javascript learning tutorial]

arrow function

The arrow function itself does not have this, so it does not exist this changes, it captures the outer this using

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(()=>{
        console.log(this.name); 
      },0)
    }
}

a.fn() //Cherry

Analysis: First object a calls the fn function, so the this of the fn function points to object a, and then the arrow captures the outer this, then it is not this in setTimeout. It is this of the fn function, so I finally get the name in object a

Timer

For the callback function inside the delay function This points to the global object window

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(function (){
        console.log(this.name); 
      },0)
    }
}

a.fn() //windowsName

Analysis: First, object a calls the fn function, and then the callback function in setTimeout here is an anonymous function, which is an ordinary function, then this in the anonymous function points to window

var name = "windowsName";
var b={
  name: "setTimeoutName"
}
var a = {
    name: "Cherry",
    fn() {
      setTimeout((function (){
        console.log(this.name); 
      }).bind(b),0)
    }
}

a.fn() //setTimeoutName

Analysis: First, object a calls the fn function, and then the callback function in setTimeout here is an anonymous function, which is an ordinary function. Then this in the anonymous function points to the window, but use bind to change the this point of the anonymous function. It is object b, so the last name in object b

Constructor

this in the constructor points to the created instance object,

Note: If an object is returned in the constructor, there will be no new instance object when created, but the returned object

function fn(){
  this.age = 37;
}

var a = new fn();
console.log(a.age); // 37
a.age = 38;
console.log(fn); // { this.age = 37; }
console.log(a.age); // 38

Analysis: Here we pass the constructor Creating an instance object a is equivalent to opening a new place and copying the contents of the constructor. Then there is an object a. At this time, this points to object a. Modifying the contents of object a does not affect the constructor.

Point number judgment

Judge this pointer through ., follow the proximity principle

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

Analysis: Object a calls object b fn function, there are two . in front of the fn function, then the nearest one is the object b, so the this of the fn function points to the object b, and the last thing obtained is the age

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); //undefined
      }
  }
}
var c = {
  age:20,
}

var d = {
  age:30,
}
a.b.fn.bind(c).bind(d)(); //20

. before and after, do not look at the front ., only look at the back , and then the latest bind changes this point to c, then this point of the fn function points to object c, and what is obtained is the age of object c

Exercise

function outerFunc() {
   console.log(this) // { x: 1 }
   function func() {
    console.log(this) // Window 
   }
   func()
} 

outerFunc.bind({ x: 1 })()

obj = {
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()() //obj

func = obj.func
func()()  //undefined

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //undefined

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

apply, call, bind

# is used in the example of this above.

##Difference##thisArg , [ argsArray]

call(thisArg, arg1, arg2, ...) The difference between the apply and call functions lies in the parameters passed in after this. In apply, an array is passed, while in call, the expanded parameters are passed in.

bind(thisArg[ , arg1[, arg2[, ...]]])()

Then the bind function creates a new function, which needs to be called manually

• this
of the new function is specified as the first parameter of
• bind(), and the remaining parameters will be used as parameters of the new function for use when calling
If there are any errors, please correct them! ! Thank you everyone for reading!

https://juejin.cn/post/6946021671656488991#comment

【Related Video tutorial recommendation:

webfrontend

The above is the detailed content of Can you understand the this pointing problem of JS? take a look at this article. For more information, please follow other related articles on the PHP Chinese website!