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

通过简单案例分析call、apply、bind的区别，总结三者的用法。

控制台手打代码

案例一：

var name = '小王', age = 20;
var obj = {
  name: '小张',
  objAge: this.age,
  myFun: function() {
    console.log(this.name + '年龄' + this.age);
  }
}

console.log(obj.objAge) // 17
console.log(obj.myFun()) // 小张年龄 undefined

案例二：

var name = '小陈';
function showName() {
  console.log(this.name)
}

showName() // 小陈

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

this 对象被第一个参数替代

var name = '小王', age = 20;
var obj = {
  name: '小张',
  objAge: this.age,
  myFun: function() {
    console.log(this.name + '年龄' + this.age);
  }
}
var db = {
  name: '小陈',
  age: 99
}

obj.myFun.call(db);　　　　// 小陈年龄 99
obj.myFun.apply(db);　　　 // 小陈年龄 99
obj.myFun.bind(db)();　　　// 小陈年龄 99

第一个参数 db 替代 this
bind 返回一个新函数，须调用才会执行

传参差异

var name = '小王', age = 20;
var obj = {
  name: '小张',
  objAge: this.age,
  myFun: function() {
    console.log(this.name + '年龄' + this.age, ' 来自' + fm + '去往' + t);
  }
}
var db = {
  name: '小陈',
  age: 99
}

obj.myFun.call(db,'成都','上海')；　　　　 // 小陈年龄 99  来自 成都      去往 上海
obj.myFun.apply(db,['成都','上海']);      // 小陈年龄 99  来自 成都      去往 上海  
obj.myFun.bind(db,'成都','上海')();       // 小陈年龄 99  来自 成都      去往 上海
obj.myFun.bind(db,['成都','上海'])();　　 // 小陈年龄 99  来自 成都, 上海 去往 undefined

第一个参数 db 替代 this
apply 第二个参数等同于 arguments，即 (newThis, arguments)
call 后面参数类似于展开的 arguments，即 (newThis, …arguments)
bind 除了返回函数外，参数与call相同

arguments可以是各种类型，包括函数、 object、string 等等！

参考资料

https://segmentfault.com/a/1190000037456174
https://www.runoob.com/w3cnote/js-call-apply-bind.html