this和bind、call、apply的关系

最新的更新：重新理解它们之间的关系链接 

函数调用的关系：

const test = {
  val : 10,
  ret: function() {
    return this.val
  }
}
console.log(test.ret()) //  10

上面的代码是一个对象test，里面有属性val，方法ret，调用ret就是test.ret,其中test就充当调用者的身份，而函数中的this就是指代调用者，通常情况下，this都是指代调用者，那如果我们想将test的方法ret共给其他对象使用的时候，我们该怎么改变调用者呢？这就应用到了bind函数，它可以改变方法的调用者，如下的代码(红色是增加的代码)：

const test = {
  val : 10,
  ret: function() {
    return this.val
  }
}
const test2 = {
  val: 20
}
console.log(test.ret.bind(test2)) //  ƒ () {return this.val;}

此处返回的是一个函数，我们可以直接调用它，最后可以得到的值是20, 由此我们可以总结：bind函数将调用者从test改为test2，所以返回的是20而不是10，但是并没有执行这个函数。那如果在改变调用者的同时也执行此函数呢？这里就应用了call或者apply函数，代码如下(红色是修改的代码)：

const test = {
  val : 10,
  ret: function() {
    return this.val
  }
}
const test2 = {
  val: 20
}
console.log(test.ret.call(test2))  // 20
console.log(test.ret.apply(test2))   // 20

那call和apply又有什么区别呢？引用MDN的定义：the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

代码演示(红色是增加的代码)：

const test = {
  val : 10,
  ret: function(num1,num2) {
    return this.val + num1 + num2
  }
}
const test2 = {
  val: 20
}
const arr = [1,2]
console.log(test.ret.call(test2, 1, 2))  // 23
console.log(test.ret.apply(test2, arr))  // 23