How to quickly get started with VUE3.0: Learn
In the various introductions we have seen on how to determine the pointing method of this, the sentence "this ultimately points to the object that calls it" is regarded as the core, but in the face of We tend to get confused about a variety of situations. Based on my understanding of various situations, I put forward a sentence : "Arrows, timing and structure, look at special situations, look at the point number for ordinary calls, don't look at the front for the later points, and then judge based on the nearest principle, and the last remaining thing is the window." .
Arrow function
The arrow function itself does not have this, so there is no this change. 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 this of the fn function points to object a, and then the arrow captures the outer this, then it is not this in setTimeout, but this of the fn function, so in the end Get the name in object a.
The timer
's this of the callback function inside the delay function 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 anonymous function. The this points to object b, so the name
constructor
in object b finally points to the created instance object in the constructor.
Note: If an object is returned in the constructor, there will be no new instance object when created, but this The object returned by
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 create the instance object a through the constructor, which is equivalent to opening a new place and copying the contents of the constructor. Then we have the a object. At this time, this points to the object. a, our modification of the content in object a does not affect the passing of the constructor dot
number judgment
. Judge this point and follow the proximity principle
var a = {
age:10,
b: {
age:12,
fn(){
console.log(this.age);
}
}
}
abfn(); //12 Analysis: Object a calls the fn function of object b. There are two . in front of the fn function . Then the closest one is object b, so this of the fn function points to object b, and the last thing obtained is the object. b’s age
var a = {
age:10,
b: {
age:12,
fn(){
console.log(this.age); //undefined
}
}
}
var c = {
age:20,
}
var d = {
age:30,
}
abfn.bind(c).bind(d)(); //20 analysis: Object a calls the fn function of object b and then uses bind to change the direction of this. At this time, fn has . before and after, regardless of the previous . , Just look at the back, and then the latest bind changes this point to c, then this point of the fn function is the object c, and what you get is the age
practice
function outerFunc() { of the object c
console.log(this) // { x: 1 }
function func() {
console.log(this) // Window
}
fun()
}
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 Use the apply, call, and bind functions to change the direction of this. The above this
The difference between
thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)
is used in the example.
The difference between apply and call functions lies in the parameters passed in after this. What is passed in apply is an array, and what is passed in call It is the expanded parameter
bind(thisArg[, arg1[, arg2[, ...]]])()
this is designated as bind() The first parameter, and the remaining parameters will be used as parameters of the new function for use when calling.If there are any errors, please correct me! ! Thank you everyone for reading!
Reference material
https://juejin.cn/post/6946021671656488991#comment
[Related video tutorial recommendations: web front-end]
The above is how you can understand the this pointing problem of JS? Take a look at the details of this article. For more information, please pay attention to other related articles on the php Chinese website!
