call apply bind 以及箭头函数

简介

call()、apply()、bind() 都是用来重定义 this 这个对象的！

案例

// 在浏览器非static模式下运行
name = "window";
const obj = {
    name: 'obj',
    sayName: function () {          
        console.log(this.name);
    }
}
sayName = obj.sayName;                
const sayNameWithArrowFunction = () => {
    console.log(this.name);
}

obj.sayName();                         // obj
// when use call or apply, the function will run immediately
obj.sayName.call(this);                // window
obj.sayName.apply(this);               // window
// the bind return new a function with `this`. can be used in every where
const sayHelloWithWindow = obj.sayName.bind(this);// window
sayHelloWithWindow();
sayName();                             // window

sayNameWithArrowFunction();            // window 
sayNameWithArrowFunction.call(obj);    // window 
sayNameWithArrowFunction.apply(obj);   // window
sayNameWithArrowFunction.bind(obj)();  // window


const arr = [1,2,3,89,46]
const max = Math.max.apply(null,arr)//89
const min = Math.min.call(null,arr[0],arr[1],arr[2],arr[3],arr[4])//1

function fn(a, b, c) {
    console.log(a, b, c);
}
const fn_ = fn.bind(null, 'Dot');

fn('A', 'B', 'C');            // A B C
fn_('A', 'B', 'C');           // Dot A B
fn_('B', 'C');                // Dot B C
fn.call(null, 'Dot');         // Dot undefined undefined

函数的this指向调用他的对象，例如

obj.sayName();// obj
sayName = obj.sayName sayName();// window;

参数区别

apply、call，这两者大同小异，他们除了第二个参数有些差异，其他都是一样的，call接受的是若干个参数的列表，而apply接受的一个包含多个参数的数组或者类数组。call 是把第二个及以后的参数作为 fn 方法的实参传进去，而 fn_ 方法的实参实则是在 bind 中参数的基础上再往后排。

的使用区别

都是用来改变函数的this对象的指向的；
第一个参数都是this要指向的对象；
都可以利用后续参数传参；

bind是返回对应函数，便于稍后调用，apply、call是立即调用；

箭头函数：没有它自己的this值，箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用。箭头函数在定义之后，this 就不会发生改变了，无论用什么样的方式调用它，this 都不会改变；

• 箭头函数不可以当作构造函数
• 箭头函数不可以使用 arguments 对象
• 不可以使用 yield 命令, 因此箭头函数不能用作 Generator 函数

参考 & 引用

https://www.jianshu.com/p/bc541afad6ee
https://blog.csdn.net/qq_36416878/article/details/79656527
https://www.cnblogs.com/wssdx/p/9141003.html
https://www.cnblogs.com/chaoyuehedy/p/7905511.html