preface:

This is a keyword in JavaScript. It is an object automatically generated inside the function body when the function runs. It can only be used inside the function body. In addition, this cannot be assigned during execution.

Text:

Default binding:

Usually, in the case of separate or pure function calls, this points to the global object. In the browser, it is window and node JS is global. Of course, in pure function calls, this is undefined because the strict mode does not allow default binding.

// Use alone; Whether strict or not
console.log(this) // {}

// Function call; Non strict mode
global.x = "zs";
function zsall() {
	console.log(this.x);
}
zsall();  // zs

// Function call; Strict mode
"use strict";
function usestrictzsall() {
	console.log(this);
 }
usestrictzsall() // undefined

Implicit binding:

As a calling scenario of an object method, this usually points to the caller of the method (usually also the 'owner'):

// Classic questions
global.name = "Kakashi";
function a () {
	var name = 'Sasuke';
	console.log(this.name);
}
function d (i) { // Parameter i is actually a function
	return i() // Function executes parameter i directly
}
var b = {
	name: 'Naruto',
	detail: function() {
		console.log(this.name);
	},
	// Parentheses need to be executed
	// b.teacher => f(){return {function(){console.log(this.name)}}}
	// b.teacher() => f(){console.log(this.name)}
	teacher: function() {
		return function() {
			console.log(this.name);
		};
	},
}
var c = b.detail;
b.a = a; // Define a attribute for b
var e = b.teacher();
// Global objects can be accessed in the global scope by using this
a(); // Pure function call global -- Kakashi
// ---
// If the first method of b is assigned to variable c, the real caller is c
c(); // The first method of b is regarded as an ordinary function and assigned to c, which has nothing to do with b -- Kakashi
// ---
b.a(); // Naruto
// ---
// Looking at pointing to b, in fact, the b.detail method is used as a value in d. it actually executes the global function d, so it also points to the global
d(b.detail) // Kakashi
e(); // Assigned the output of b.teacher() = > var e = f() {console. Log (this. Name)} = > Global -- Kakashi

Hard binding:

Usually change the calling object of the function for apply() or call() (call the object method with another object as a parameter). The first parameter represents the changed object that calls the function. Therefore, this refers to the first parameter. That is, bind the specified method to the destination object:

// Both call and apply can be hard bound
var zswant = {
	fruit: 'coco',
	sayName: function() {
		console.log('zs Want to eat' + this.fruit)
	}
} 
var fruit1= {
	fruit: 'watermelon'
}
var fruit2 = {
	fruit: 'Strawberry'
}
// call calls the method of the object
zswant.sayName.call(fruit1) // zs wants watermelon
zswant.sayName.apply(fruit2) // zs wants to eat Strawberry

Note here: when the parameter of apply() or call() is null, the global object will be called by default:

globalThis.fruit = 'hahaha'
// Both call and apply can be hard bound
var zswant = {
	fruit: 'coco',
	sayName: function() {
		console.log('zs Want to eat' + this.fruit)
	}
} 
var fruit1= {
	fruit: 'watermelon'
}
var fruit2 = {
	fruit: 'Strawberry'
}
// call calls the method of the object
zswant.sayName.call() // zs wants watermelon
zswant.sayName.apply() // zs wants to eat Strawberry

Constructor binding:

A new object generated by the constructor. In this case, this refers to the new object:

function dev (name) {
	this.name = 'zs'; // Notice the difference here
	this.sayName = function () {
		console.log('dev yes' + this.name)
	}
}
var name = "zsxzy" // Even if there are variables with the same name
var zy = new dev('zss')
zy.sayName(); // dev is zs

function dev (name) {
	this.name = name; // Constructor instantiation passes parameters and passes
	this.sayName = function () {
		console.log('dev yes' + this.name)
	}
}
var name = "zsxzy" // Even if there are variables with the same name
var zy = new dev('zss') // Input for variable instantiation. At this time, this is bound with the new object after instantiation
zy.sayName(); // dev is zss

Arrow function binding:

The this object of the arrow function is the object pointed to by the scope of the external environment, rather than the object pointed to by the scope when it is used, that is, it is not determined (not owned) by itself:

var name = 'window'; 
var A = {
name: 'A',
sayHello: () => {
    console.log(this.name)
    }
}
A.sayHello(); // window

var name = 'window';
var A = {
    name: 'A',
    sayHello: function(){
        return arrow = () => console.log(this.name) // Return arrow function
    }
}
var sayHello = A.sayHello();
sayHello(); // A 
var B = {
   name: 'B'
}
sayHello.call(B); // A
sayHello.apply(); // A
// sayHello.bind() will not output results = > the bind method returns the original function after binding this
sayHello.bind()(); // A

The arrow function completes this binding when it is defined, and the calling position, call(), apply(), and bind() cannot be changed during execution.

end:

To sum up:

1.this is the environment object where the function runs, and there will be different binding methods according to the use situation. In addition, don't forget the difference between strict mode and non strict mode.

2.call() and apply() are the execution results of the callback func, while the bind() method calls back the original function after binding this.

above