call() 、apply() 和 bind()的区别

先定义一个常量和两个对象

const  beverage = '水'
const obj = {
    beverage:"可乐",
    drink(){
        console.log(`我喜欢${this.beverage} ${[...arguments].join(',')}`)
    }
}
const other={
    beverage:'西瓜汁'
}

obj.drink()
//输出： 我喜欢可乐

下面，先来看看三个方法的使用：

obj.drink.call(other,'杨梅汁','橙汁','炒饼')  
// 输出：我喜欢西瓜汁 杨梅汁,橙汁,炒饼


obj.drink.apply(other,['黄瓜汁','墨汁','炒面'])
// 输出：我喜欢西瓜汁 黄瓜汁,墨汁,炒面


obj.drink.bind(other,'黄瓜汁','墨汁','炒面')
// 无输出结果 ?? 

到了bind的有些不同，是因为bind只返回了一个修改了this指向和参数的函数体，想要有输出结果还需要执行，如下：

obj.drink.bind(other,'黄瓜汁','墨汁','炒面')()
//  输出：我喜欢西瓜汁 黄瓜汁,墨汁,炒面

结论：

1、三者的第一个参数都可以修改调用对象内部的this指向
2、call、bind的传参形式一样，都是一次传入参数。但call直接执行，bind却只返回修改了this和参数后函数体
3、call、apply修改参数后都直接执行了函数，只是apply仅连个参数，一个是新的this指向，另一个是参数数组