Scope

Scope is divided into local scope and global scope. Scope is often related to variables. Variables in the global scope can be accessed in the local scope, while variables in the local scope cannot be accessed outside the local scope.
Look at an example of local scope accessing global scope

// Local scope access global scope
let globalVariable="This is a global variable"
function globalFunction() {
    let localVariable = 'This is a local variable';
    console.log(globalVariable); // This is a global variable
    console.log(localVariable);  // This is a local variable
}
globalFunction();

Try global scope access local scope again

let globalVariable="This is a global variable"
function globalFunction() {
    let localVariable = 'This is a local variable';
    console.log(globalVariable); // This is a global variable
    console.log(localVariable);  // This is a local variable
}

// Accessing localVariable variables
console.log(localVariable)
globalFunction();

If an error is found, localVariable is not defined

Try upgrading let to var

let globalVariable="This is a global variable"

function globalFunction() {
    var localVariable = 'This is a local variable';
    console.log(globalVariable); // This is a global variable
    console.log(localVariable);  // This is a local variable
}

// Accessing localVariable variables
console.log(localVariable)

globalFunction();

The result is the same

context

Context often represents the value of this variable and its direction. It determines how a function is called. When a function is called as a method of an object, this always points to the object calling the method.

Non arrow function

let  pet = {
    words: '...',
    speak: function(){
        console.log(this.words);     //'...'  Equivalent to pet words
        console.log(this === pet);   // true
    }
}
// Pet object calls the speak method, then this is the pet object
pet.speak();

At this time, this points to the global object at the top level of the running environment

function pet(words){
    this.words = words;
    console.log(words);   //'...'
    console.log(this === pet)   //false
    console.log(this === global)   //true
}
pet('...');

console.log(global.words)

At this point, this points to the new object

function Pet(words){
    this.words = words;
    this.speak = function(){
        console.log(this.words);   //miao
        console.log(this);    //Print out the current object {words:'miao',speak:[Function]}
    }
}
var cat = new Pet('miao');
cat.speak();   

Arrow function

After the arrow function = > is introduced, this does not point to the object of the function call, but its parent object

function globalFun() {
    global.words = 'global';
    let pet = {
        words: '...',
        speak: () => {
            console.log(this.words);     //'global'
            console.log(this === global);   // true
        }
    }
    pet.speak();
}
globalFun()

call and apply

Using call and apply can change the context execution object and execute the function in the custom context. They have the same function, but the second parameter of the method is different. Call directly uses the parameter list and apply uses the parameter array. The specific function is to call the method of an object and replace the current object with another object, which actually changes the content of the object pointed to by this.

call

let cat = {
    words: "miao",
    speak: function (say) {
        console.log(say + ' ' + this.words); // Speak wang
    }
}
let dog = {
    words: "wang",
}
cat.speak.call(dog,"Speak")

The dog object does not have a speak method originally. By using the call method, it stealthily points the this variable originally pointed to pet to dog. Therefore, at run time, this Words = 'wang', so print out Speak wang. In this way, we can make one object use the method of another object. An easy application scenario is inheritance.

apply

The use method is no different from call. Call directly uses the parameter list and apply uses the parameter array

let cat = {
    words: "miao",
    speak: function (say) {
        console.log(say + ' ' + this.words); // Speak wang
    }
}
let dog = {
    words: "wang",
}
cat.speak.apply(dog,["Speak"])

Reference article link: Study of call and apply in the cat nodejs in mango house