JS 之 bind 的模拟实现

Question

与 call，apply 不同，bind 调用并没有立即执行函数，而是返回一个新的函数，而且在调用 bind 的时候可以传参，调用 bind 返回的函数时也可以传参（真让人头大，更复杂的是 bind 返回的函数还要考虑当做构造函数使用的场景，也就是 new 调用。所以实现 bind 比 call 和 apply 稍微复杂些。

实现思路

bind 的基本语法如下：

func.bind(thisArg[, arg1[, arg2[, ...]]])

实现的流程如下：

• 校验调用方是不是函数
• 校验传入 this 参数是否为空
• 构造一个函数
• 判断是否为 new 调用（通过 instanceof）来决定绑定 this 的值
• 在构造的函数里执行调用，将初始参数和二次传入参数合并成数组，通过 apply 执行
• 返回函数

代码

Function.prototype.myBind = function(thisArg) {
  if (typeof this !== 'function') {
    throw new TypeError('it must be invoke by function')
  }

  if (thisArg == undefined) {
    thisArg = window
  } else {
    thisArg = Object(thisArg)
  }
  
  const thisFn = this
  const args = Array.prototype.slice.call(arguments, 1)
  
  const fBound = function() {
    const bindArgs = Array.prototype.slice.call(arguments)
    const isNew = this instanceof fBound
    return thisFn.apply(isNew ? this : thisArg, args.concat(bindArgs))
  }

  // 绑定返回函数的原型
  const fNOP = function() {}
  fNOP.prototype = this.prototype
  fBound.prototype = new fNOP()
  
  return fBound
}

测试一下：

const obj = {
  name: '张三'
}
function foo(age, sex) {
  console.log(this.name)
  console.log(age)
  console.log(sex)
}
foo.myBind(obj, 21)('男')