JavaScript 中 call()、apply()、bind() 的用法

一、call()、apply()、bind() 都是用来重定义 this 这个对象的

预热状态：
例1：

var name="张三",age=18;
var obj = {

  name:"李四",
  oldAge:this.age,
  myFn:function(){
    console.log( this.name+"年龄"+this.age )
  }
}
obj.oldAge;     //  18
obj.myFn();   //  李四年龄undefined

例2：

var name="小王";
function Fn(){

  console.log(this.name)
}
Fn() ;      // 小王

比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 Fn() 函数 this 是 window ；

综上所述

var name="张三",age=18;
var obj = {

  name:"李四",
  oldAge:this.age,
  myFn:function(){
    console.log( this.name+"年龄"+this.age )
  }
}
var newObj = {
    name:"王五",
    age:22
}
obj.myFn.call(newObj);   // 王五年龄22
obj.myFn.apply(newObj);　   // 王五年龄22　　
obj.myFn.bind(newObj)();　   // 王五年龄22

以上除了 bind 方法后面多了个 () 外 ，结果返回都一致！

• 由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行。

二、对比call 、bind 、 apply 传参情况下

var name="张三",age=18;
var obj = {

  name:"李四",
  oldAge:this.age,
  myFn:function(a, b){
    console.log( this.name+"年龄"+this.age,"来自"+a+"去往"+b )
  }
}
var newObj = {
    name:"王五",
    age:22
}
obj.myFn.call(newObj,'北京','上海'); // 王五年龄22 来自北京去往上海
obj.myFn.apply(newObj,['北京','上海']);　　// 王五年龄22 来自北京去往上海　
obj.myFn.bind(newObj,['北京','上海'])();　//王五年龄22 来自北京,上海去往undefined
obj.myFn.bind(newObj,'北京','上海')();　// 王五年龄22 来自北京去往上海

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

• call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。
• apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。
• bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！
拓展： apply也可以被函数参数的解构所代替哦

var people=['Wayou','John','Sherlock'];
function sayHello(people1,people2,people3){
  console.log(`hello${people1},${people2},${people3}`)
}
sayHello.apply(null,people)
//  等同于
sayHello(...people)