用一个小故事生动形象的讲解JS中的 call(), apply(), bind() 用法区别

• W3C示例
• MDN文档：call(), apply(), bind()

1. 正常情况的调用对象内函数的情况：张三手机还有70的电，也带了充电宝，所以可以给手机充电，通过调用charge函数给手机充电到了99，代码如下，很常规的代码

const zhangsan = {
    name: '张三',
    phoneBattery: 70,
    charge: function (level) { // 使用“充电宝”充电
        this.phoneBattery = level
    }
}
// 将张三手机的电充到99
console.log(zhangsan); // { name: '张三', phoneBattery: 70, charge: [Function: charge] }
zhangsan.charge(99);
console.log(zhangsan); // { name: '张三', phoneBattery: 100, charge: [Function: charge] }

2. 现在新的情况出现了，李四手机还有30的电，但他自己不想“携带”充电宝进行充电，那么通过call()，他可以向张三“借”充电宝，代码如下

const lisi = {
    name: '李四',
    phoneBattery: 30
}
// “借”张三的充电宝将李四手机的电充到95
console.log(lisi); // { name: '李四', phoneBattery: 30 }
zhangsan.charge.call(lisi, 95);
console.log(lisi); // { name: '李四', phoneBattery: 95 }

3. apply()的作用和call()类似，唯一不同的在于传参时call()需要接受的是参数列表，而apply()方法接受的是一个参数数组，修改上面代码如下

const zhangsan = {
    name: '张三',
    phoneBattery: 70,
    charge: function (level1, level2) { // 使用“充电宝”充电
        this.phoneBattery = level1 + level2
    }
}
const lisi = { name: '李四', phoneBattery: 30 }
zhangsan.charge.call(lisi, 30, 40);
console.log(lisi); // { name: '李四', phoneBattery: 70 }
zhangsan.charge.apply(lisi, [30, 50]); // 接收参数的方式不同
console.log(lisi); // { name: '李四', phoneBattery: 80 }

4. bind()和call(), apply()一样重定义函数中的this对象，但与后两个不同的是，bind(obj)会返回this为obj的新函数，可以先接收，再调用，调用时传参和call()一致。代入上述的场景则是：李四想给手机充电，他向张三“借”了充电宝但不想立马就充，而且想充再充，代码如下：

const zhangsan = {
    name: '张三',
    phoneBattery: 70,
    charge: function (level1, level2) { // 使用“充电宝”充电
        this.phoneBattery = level1 + level2
    }
}
const lisi = { name: '李四', phoneBattery: 30 }
const lisiCharge = zhangsan.charge.bind(lisi); // 先“借”充电宝
lisiCharge(40, 50); // 充电
console.log(lisi); // { name: '李四', phoneBattery: 90 }