改变函数中的this指向

1. bind 方法

（1）不调用函数，可以改变 this 指向

（2）fun.apply(thisArg,arg1，arg2...)

（3）thisArg:在fun运行时指向的this值

（4）arg1，arg2：传递的其它参数

// bind()方法不调用函数，但是可以改变this指向
const obj = {
    uname: 'ansk'
}
function fn() {
    console.log(this);
}
// 1. bind()方法不调用函数
// 2. 能够改变this指向
// 3. 返回值是个函数，这个函数里面的this指向是更改过的
const fun = fn.bind(obj);
// console.log(fun);
fun(); // {uname: 'ansk'}
// 按钮点击之后立马禁用，两秒钟之后开启
// const btn = document.querySelector('button');
// btn.addEventListener('click', function() {
//     this.disabled = true; // 禁用按钮
//     window.setTimeout(() => {
//         this.disabled = false;
//     }, 2000);
// });
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
    this.disabled = true; // 禁用按钮
    window.setTimeout(function() {
        // 在这个普通函数里面，要this从window改为btn
        this.disabled = false;
    }.bind(this), 2000); // }.bind(btn), 2000); bind不会立刻调用函数，会改变this指向
});

2. call 方法

（1）可以调用函数；

（2）可以改变函数内的this指向；

const obj = {
    uname: 'ansk'
}
function fn (x, y) {
    console.log(this);
    console.log(x + y);
}
// 1. 调用函数
// 2. 改变this指向
fn.call(obj, 1, 2); // 让 fn 里面的this指向 obj

3. apply 方法

（1）可以调用函数

（2）可以改变 this 指向

（3）fun.apply(thisArg,[argsArray])

（4）thisArg:在fun运行时指向的this值

（5）argsArray：传递的值，必须包含在数组里面 返回值就是函数的返回值，因为它就是调用函数

const obj = {
    uname: 'ansk'
}
function fn(x, y) {
    console.log(this);
    console.log(x + y);
    
}
// 1. 调用函数
// 2. 改变this指向 fn.apply(this指向, 参数)
fn.apply(obj, [1, 2]);
// 3. 返回值 本身在调用函数 ，所以返回值就是原来函数的返回值
// 4. 使用场景：求数组最大值
// const max = Math.max(1,2,3);
// console.log(max);
const arr = [100, 44, -9];
const max = Math.max.apply(null, arr);
const min = Math.min.apply(null, arr);
console.log(max, min);
// 扩展运算符求最大值
console.log(Math.max(...arr)); // 100

4. 三种方法的相同点以及不同点

（1）相同点：

都可以改变函数内部的 this 指向

（2）不同点：

apply【apply(obj, [1, 2, 3])】 和 call【call(obj, 1, 2, 3)】 方法都会调用函数，并且改变函数内部的this指向；bind 方法不会调用函数；

apply 的参数以数组的方式传递，而 call 不是。