call和apply和bind的区别,以及使用方法

call和apply和bind的用法

const cat = {
    name: '花花',
    eat: function (sp) {
        console.log(this.name + sp + '的吃鱼');
    }
}
cat.eat('高兴')   //花花 高兴 的吃鱼

const dog = {
    name: '旺财',
    eat: function (od) {
        console.log(this.name + od + '的啃骨头');
    }
}
dog.eat('蹲着')   //旺财 蹲着 的啃骨头

const pig = {
    name: '猪',
    eat: function (lld) {
        console.log(this.name + lld + '的吃屎');
    }
}
pig.eat('不情愿的')  //猪 不情愿 的吃屎

//使用call()方法  动态修改this指向      逐个传参(只传一个)
 pig.eat.call(dog,'有点想')   //旺财 有点想 的吃屎
// 解析:动态修改了this的指向,原本是猪有点想的吃屎==>狗有点想的吃屎
 
 使用bind()方法 动态修改this指向      逐个传参(只传一个)
 const abc= cat.eat.bind(dog,'不开心') 
 //执行回调  因为bind是异步的
 abc()   //旺财 不开心 的吃鱼
 解析:动态修改了this的指向,并且执行回调 原本是花花不开心的吃鱼==>旺财不开心的吃鱼
 
 //使用apply() 方法 动态修改this指向   数组传参 (可以使用剩余传参)  
 dog.eat.apply(pig,['难受'])  //猪 难受 的啃骨头 
 //解析:动态修改了this的指向,原本是旺财难受的啃骨头==>猪难受的啃骨头
 
 总结:call和apply和bind的区别:
 相同点 都是动态修改this指向,不改变原函数哦
 不同点:call和apply是同步操作 , 页面加载就执行  而且一个个的传参,不能使用剩余传参
        bind方法 是异步的 需要回调 才能执行   而且是数组传参  可以使用剩余参数