call() bind() apply() 一看就懂

看似懵懂，其实简单的一比
废话少说直接扯代码

代码段一：

var name = '哪吒', age = 13;
var obj = {
  name: '松岛老师',
  objAge: this.age,
  fun: function () {
    console.log('name:', this.name + ',Age:' + this.age);
  }
}
obj.fun() // name: 松岛老师,Age:undefined

代码段二：

var name = '太乙真人'
function show () {
  console.log(this.name);
}
// show()  // 太乙真人

扯一下两段代码的区别

1. 第一个this指向方法的调用者，也就是obj这个对象
2. 第二个this因为你的函数是全局声明，所以执行函数时，this指向window

该扯主角了

call() apply() bind()

1. 先注意一点：这仨api都是用来"重新定义this" 关键词重新

还是之前这段代码

var name = '哪吒', age = 13;
var obj = {
  name: '松岛老师',
  objAge: this.age,
  fun: function () {
    console.log('name:', this.name + ',Age:' + this.age);
  }
}

新添加一个对象

var cxk = {
  name: '鸡你太美',
  age: 18
}

结果：

obj.fun.call(cxk) // name: 鸡你太美,Age:18
obj.fun.apply(cxk) // name: 鸡你太美,Age:18
obj.fun.bind(cxk)() // name: 鸡你太美,Age:18

1. 至此你会发现这仨功能除了bind带了一个括号，其他好像都是一样都是改变了this的指向，将this重新指向了一个新的对象
2. 至此通过观察代码你可以得出结论：
   1. call() apply() 都是使用后，方法直接执行
   2. bind() 返回一个方法,需要我们手动调用执行

=========华丽分割线

关于call,apply,bing 参数问题

对原来的代码进行一点点修改：让fun方法带参数

var name = 'itcast', age = 13;
var obj = {
  name: '松岛老师',
  objAge: this.age,
  fun: function (from, to) { // 注意此时这个方法需要传参
    console.log('name:', this.name + ',Age:' + this.age, '来自:', from, '去:', to, '参加演出');
  }
}


var cxk = {
  name: '鸡你太美',
  age: 18
}

obj.fun.call(cxk, '日本', '泰国')   // 鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出
obj.fun.apply(cxk, ['日本', '泰国']) //鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出
obj.fun.bind(cxk, '日本', '泰国')() //鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出

此时观察代码：

1. 参数：
   1. 第一个参数：this指向的对象
   2. 第二个参数：call和bind都是将方法参数直接放进去，中间以逗号隔开即可，唯独apply，方法的参数必须放进一个数组才行

最后总结：

1、call,apply,bind都是改变this的指向
2、call,apply都是直接调用方法
3、bind在改变this指向之后返回方法，需要我们手动调用
4、方法传参时，call,bind都是直接将参数直接写入，中间用逗号分开即可，bind必须用数组

欢迎加微信一起学习：13671593005