js 实现call、apply、bind

什么是call、apply、bind？

共同点：调用一个function，并将function中的this指向指定的对象。
不同点：1、apply的参数中，除指定对象外，其余参数组合为一个数组作为第二个参数；
    2、call、apply返回函数执行完的结果，bind是返回一个function。

简单的例子：

var x = 1;
function add (y) {
    console.log(this.x + y)
}

add(2)    // 5， 非严格模式下，this 指向 window，所以 this.x 为 1

var obj = { x: 3 }
add.call(obj, 2)      // 5， this 指向 obj，所以this.x 即obj.x，2 作为参数 y 传递
add.apply(obj, [2])   // 5， this 指向 obj，所以this.x 即obj.x，注意第二个参数为数组
add.bind(obj, 2)()    // 5， 返回 this 指向 obj 的函数，this.x 即obj.x，2 作为参数 y 传递

实现call、apply、bind的重点就是将 this 指向指定的对象。看下面代码：

var obj = {
    a: 'text',
    showA: function () {
        console.log(this.a)
    }
}

obj.showA()    // text, this 指向 obj

所以，利用 obj.fn() 中 this 指向 obj 的特性就可以实现call、apply、bind！！！

call：

Function.prototype.myCall = function (context, ...argList) {
  context._fn = this;
  context._fn(...argList)
  delete context._fn    // 执行函数后删除该对象属性
}

apply：

Function.prototype.myApply = function (context, argList) {
  context._fn = this;
  context._fn(...argList)
  delete context._fn
}

bind（返回函数）：

Function.prototype.myBind = function (context, ...argList) {
  // 不用call、apply实现
  context._fn = this;
  return () => {
    context._fn(...argList)
    delete context._fn
  } 
  
  // 用 call 实现 bind（apply类似）
  return () => {
    this.call(context, ...argList)
  }
}