Javascript中call apply bind的区别

Javascript中call、apply、bind可以改变this的指向。

call的理解和应用
call函数会改变this的指向，并调用该函数。
call的第一个参数为需要绑定的this指向对象，往后第二、第三…，依次为传递的参数。

如例所示，Dog的eat方法，接受两个参数，this指向实例对象Dog；
Dog.eat(‘骨头’, ‘鸡肉’); 执行Dog的eat方法，this.name为向Dog的‘旺财’，输出为‘旺财吃骨头和鸡肉’；
Cat中没有eat方法，如果想要实现eat动作，可以在Cat中写自己的eat方法，但是既然Dog中已经有，能不能直接调用呢，答案是可以的，通过call改变Dog中的this指向为Cat即可；
Dog.eat.call(Cat, ‘鱼肉’, ‘牛肉’); 执行Dog的eat方法，但是绑定的this指向Cat，并传递参数’鱼肉‘和‘牛肉’，输出为‘喵喵吃鱼肉和牛肉’。

const Dog = {
    name: '旺财',
    eat: function (food1, food2) {
        console.log(`${this.name}吃${food1}和${food2}`);
    }
};
const Cat = {
    name: '喵喵'
};
Dog.eat('骨头', '鸡肉');
Dog.eat.call(Cat, '鱼肉', '牛肉');

apply的理解和应用
apply的使用与call基本一致；
apply函数会改变this的指向，并调用该函数。
相比于call的一个一个参数传递，apply的第二个参数接收的是一个数组，所有的参数都放在该数组中，统一传递。如例中Dog.eat.apply(Cat, [‘鱼肉’, ‘牛肉’])。

const Dog = {
    name: '旺财',
    eat: function (food1, food2) {
        console.log(`${this.name}吃${food1}和${food2}`);
    }
};
const Cat = {
    name: '喵喵'
};
Dog.eat('骨头', '鸡肉');
Dog.eat.apply(Cat, ['鱼肉', '牛肉']);

bind的理解和应用
bind函数会改变this的指向，但并不执行当前函数，而是返回函数，需要手动执行返回的函数，如例的
const eat = Dog.eat.bind(Cat, ‘鱼肉’, ‘牛肉’);
eat();。
bind和call的传参方式一致，第一个参数为需要改变this指向的对象，第二、三个…参数依次传递。

const Dog = {
    name: '旺财',
    eat: function (food1, food2) {
        console.log(`${this.name}吃${food1}和${food2}`);
    }
};
const Cat = {
    name: '喵喵'
};
Dog.eat('骨头', '鸡肉');
const eat = Dog.eat.bind(Cat, '鱼肉', '牛肉');
eat();