JavaScript basics--methods to change what this points to

1.This oriented

This can be found everywhere. Generally, whoever calls this will point to whom. This behaves differently in different environments and under different functions.

In the following situations, this points to window :

① Under global effect, this points to window;

console.log(window);
console.log(this);
console.log(window == this); // true

② When the function is called independently, this inside the function also points to window

function fun() {
    console.log('我是函数体');
    console.log(this);  // Window 
}
fun();

③ When the nested function is called independently, this points to window by default.

function fun1(params) {
    function fun2(params) {
        console.log('我是嵌套函数');
        console.log(this);  // Window
    }
    fun2();
}
fun1();

④ The internal this in the IIFF self-executing function (immediate execution) also points to window

(function(params) {
    console.log('立即执行');
    console.log(this);   // Window
})()

Additional attention should be paid to:
(1) this in the constructor is used to define members (properties and methods) for the class.
(2) There is no this in the arrow function . If it is in the arrow function, it will be in the upper function. Find this until window

2. Change this pointer

But in actual development, you need to change the default pointer of this. How to do it? JS provides us with the following three methods to change the point of this.

2.1 call() method

The first parameter of the call() method must be the specified object, and then the original parameters of the method are placed one after another.
(1) The first parameter: Pass in the object that this function executes , and whatever is passed in is forced to point to what;
(2) The second parameter starts: postpone the parameters of the original function one position later

Format: function name.call();

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();

function fun(a, b) {
    console.log(this); // this指向了输入的 字符串call
    console.log(a + b);
}
//使用call() 方法改变this指向，此时第一个参数是 字符串call，那么就会指向字符串call
fun.call('call', 2, 3)  // 后面的参数就是原来函数自带的实参

2.2 apply() method

The first parameter of the apply() method is the specified object, and the original parameters of the method are uniformly placed in the second array parameter.
(1) The first parameter: Pass in the object this function executes , and whatever is passed in is forced to point to what;
(2) The second parameter starts: put the parameters of the original function in an array

Format: function name.apply();

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();

function fun(a, b) {
    console.log(this); // this指向了输入的 字符串apply
    console.log(a + b);
}
//使用apply() 方法改变this指向，此时第一个参数是 字符串apply，那么就会指向字符串apply
fun.apply('apply', [2, 3])  // 原函数的参数要以数组的形式呈现

2.3 bind() method

The bind() method is used the same as call(). It runs the method directly. It should be noted that: bind returns a new method and needs to be called again.

Format: function name.bind();

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();

function fun(a, b) {
    console.log(this); // this指向了输入的 字符串bind
    console.log(a + b);
}
//使用bind() 方法改变this指向，此时第一个参数是 字符串bind，那么就会指向字符串bind
let c = fun.bind('bind', 2, 3);
c(); // 返回新的方法，需要重新调用
// 也可以使用下面两种方法进行调用
// fun.bind('bind', 2, 3)();
// fun.bind('bind')(2, 3);