This points to the problem

Time:2021-3-6
This direction in global environment under different development methods
Tip: this point is dynamically bound when the code is running.
  • This pointing to window in the lower global environment of browser
//Testing
console.log(this);      // window
  • This of the global environment in node points to global
//Testing
console.log(this)       // global
  • Under the strict mode of “use strict”, this of the global environment points to undefined
"use strict"

//Testing
console.log(this)      // undefined
Whoever calls this points to whom
  • When a function is called by itself in the global environment, this in the function points to the object that this points to in the global environment

Note: functions in the global environment are called by themselves, similar to those called by objects pointed to by this in the global environment (such as: window. F())

let name = "Jason"
function getName() {
    console.log(this.name);
}

1. In the browser
getName()       // Jason, this -> window
//Similar to
window.getName()

3. In node environment
getName()       // Jason, this -> global
//Similar to
global.getName()

3. In strict mode
"use strict" 
getName()       // undefined, this -> undefined
//Similar to
undefined.getName()
  • When a method in an object is called by an object, this points to the object that calls it
let user = {
    name: "Jason",
    getName: function(){
        console.log(this);
        console.log(this.name);
    },
    obj: {
        age: 23,
        getAge: function(){
            console.log(this);
            console.log(this.age);
        }
    }

}

//Testing
user.getName()          // user Jason, this -> user
user.obj.getAge()       // obj 23, this -> obj
This in the constructor points to the instance object of the constructor
function User(name, age) {
    this.name = name;
    this.age = age;
}
User.prototype.getUser = function(){
    console.log(this)
}

//Testing
let user = new  User("Jason", 23)
user.getUser (); // this points to the constructor instance, this - > user
This in setTimeout and setinterval points to this in the global
let F = ()=> {
    setTimeout(function(){
        console.log(this)
    },2000)
}
//Testing
F();        // window, this -> window
This in class points to the object of the class instance
class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    getUser(){
        console.log(this.name);
        console.log(this.age);
        console.log(this);
    }
}

//Testing
let user = new User("Jason", 23);
user.getUser()      // Jason 23, this -> user
There is no this in the arrow function. If this is used in the arrow function, this point depends on the this point of the outer object or function
setTimeout(()=>{
    console.log(this);
},3000)
//This > windeow, this point in arrow function depends on this point of setTimeout

Recommended Today

Third party calls wechat payment interface

Step one: preparation 1. Wechat payment interface can only be called if the developer qualification has been authenticated on wechat open platform, so the first thing is to authenticate. It’s very simple, but wechat will charge 300 yuan for audit 2. Set payment directory Login wechat payment merchant platform( pay.weixin.qq . com) — > Product […]