call、apply、bind 的用法分别是什么？

call/apply/bind方法的来源

首先，在使用call，apply，bind方法时，我们有必要知道这三个方法究竟是来自哪里？为什么可以使用的到这三个方法？

console.log(Function.prototype.hasOwnProperty('call')) //true
console.log(Function.prototype.hasOwnProperty('apply')) //true
console.log(Function.prototype.hasOwnProperty('bind')) //true

上面代码中，都返回了true，表明三种方法都是继承自Function.prototype的。当然，普通的对象，函数，数组都继承了Function.prototype对象中的三个方法，所以这三个方法都可以在对象，数组，函数中使用。三个方法的作用都是一样的，简单来说就是改变当前使用该方法的对象中的this指向。

this 的指向

call/apply/bind方法的第一个参数都是 this 指定的值；如果第一个参数为空，或参数为 null或 undefined 或 this，则等同于指向全局对象window。

window.color='red';
var obj={color:"blue"};
function sayColor(){
console.log(this.color);
};
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(obj); //blue
sayColor.apply(obi); //blue
sayColor.bind(obj)(); //blue

call/apply/bind 的用法

var person = {
    name: 'Frank',
    age: 18,
    phone: '13812345678',
    sayHi: function(school,grade){
      console.log(`你好，我是 ${this.name}，今年 ${this.age} 岁，在 ${school} 上${grade} 年级`)
    },
    sayBye: function(){
      console.log(`再见，记得我叫 ${this.name} 哦，想约我的话打电话给我，我的电话是 ${this.phone}`)
    }
}
var xw = {
     name : "小王",
     age : 24,
     phone: '13811223344'
}
person. sayBye()

那么如何用person.sayBye()方法来显示xw的数据呢

person.sayBye.call(xw)

person. sayBye.apply(xw)

person.sayBye.bind(xw)();

如果直接写person. sayBye.bind(xw)是不会有任何结果的，call 和 apply 都是对函数直接调用，而 bind 会返回一个新的函数，新的函数执行时，会调用 person.sayBye，调用形式为 person.sayBye.call(xw)。

call apply bind的区别

person. sayHi.call(xw,"实验小学","六年级");   

person. sayHi.apply(xw,["实验小学","六年级"]); 

call后面的参数是 arguments 或其他参数，apply 的第二个参数必须是数组，内含所有其他参数

person.sayHi.bind(xw,"实验小学","六年级")();

但是由于bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。

person.sayHi.bind(xw)("实验小学","六年级");

3.总结

call，apply，bind都是可以改变函数体内this的指向。
call，apply，bind使用时，传入的第一个参数都是用来传递 this指定的值
call，apply，bind都是可以传入多个参数，不同的是，call和bind的参数都是按照原顺序传参，而apply的传参类型是数组；bind的参数可以在函数执行的时候再传参。