细节解析 JavaScript 中 bind 函数的模拟实现

大家的阅读是我发帖的动力，本文首发于我的博客：deerblog.gu-nami.com/，欢迎大家来玩，转载请注明出处喵。

前言

bind是一个改变函数this指针指向的一个常用函数，经常用在涉及this指针的代码中。来看 MDN 的文档：

Function实例的bind()方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其this关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。

最近搞出了一个很难注意得到的 bug，bind函数返回的函数中，原函数的属性消失了，导致了一个工具函数的失效。

function Message (/*...*/) {/*...*/}
Message.success = function (/*...*/) { return Message('success', /*...*/) }
// ...
xxx.Message = Message.bind(/*...*/)
// ...
xxx.Message.success(/*...*/)
// Uncaught TypeError: xxx.success is not a function

解决方法自然是Object.keys()遍历一下原函数的属性，添加到新的函数上面。

来看看文档怎么说的:

绑定函数还会继承目标函数的原型链。然而，它不会继承目标函数的其他自有属性（例如，如果目标函数是一个类，则不会继承其静态属性）。

所以上面Message的属性就消失了。

后来去翻看Funtion.__proto__.bind的文档发现了一些以前从未注意到的内容，感觉挺有意思...

bind的功能主要有两点，一个是修改函数的this指针。

例如在老版本的 React Class 组件中使用回调函数：

export default class TestButton extends Component {
  testClickHandler () {
    console.log(this.state)
  }
  render () {
    return (
      <Button onClick={this.testClickHandler.bind(this)}>test</Button>
    )
  }
}

在setTimeout等回调中访问当前函数的this指针（当然现在我们都可以用箭头函数实现）：

function test () {
  var that = this
  setTimeout(function () {
    console.log(that.test)
  })
}

bind还可以暂存参数：

const func = (a, b) => a + b
const funcBound = func.bind(null, 1)
funcBound(2) // 3
func(1, 2) // 3

我们还可以用这个特性做到函数柯里化，在复杂的场景中（好像业务开发几乎用不到的样子）使得函数调用更加灵活：

const curry = (func: Function, ...args: any[]) => {
  let resArgsCount = func.length - args.length
  let tempFunc = func.bind(null, ...args)
  const ans = (...childArgs: any[]) => {
    resArgsCount -= args.length
    return resArgsCount > 0
      ? ((tempFunc = tempFunc.bind(null, ...childArgs)), ans)
      : tempFunc(...childArgs)
  }
  return ans
}

const test = (a, b, c) => a + b + c
const testCurry = curry(test, 1)
testCurry(2)
testCurry(3)
// 6

在 ES6 尚未普及的年代，我们并不能直接使用bind这个新特性，这就需要 polyfill，因此产生了很多相关的技巧（现在即使要兼容 IE 也可以直接通过 Bable 兼容），在 JS 中模拟实现bind经典面试题了属于是...

结合文档，这篇博客将在 JS 中实现一下bind的功能。

修改 this 指针和记录入参

众所周知，bind可以修改this的指向，并且记录入参：

function testFunc (a, b) {
  return [a + b, this]
}
testFunc(1, 2)
// [3, Window]

testFunc.bind({}, 1)(2)
//  [3, {…}]

下面就在 JS 中手写一下：

Function.prototype.deerBind = function(ctx, ...args) {
    ctx = ctx || window
    const self = this
    return function (...argsNext) {
        return self.apply(ctx, [...args, ...argsNext])
    }
}
testFunc(1, 2)
// [3, Window]

testFunc.deerBind({}, 1)(2)
//  [3, {…}]

作为构造函数

绑定函数自动适用于与 new 运算符一起使用，以用于构造目标函数创建的新实例。当使用绑定函数是用来构造一个值时，提供的this会被忽略。

在 JS 中，当你new一个对象时：

1. 创建一个新对象；
2. 构造函数this指向这个新对象；
3. 执行构造函数中的代码；
4. 返回新对象。

当一个函数被作为构造函数new的时候，它的this指向该函数的实例。这里我们修改一下deerBind函数的返回：

Function.prototype.deerBind = function(ctx, ...args) {
  ctx = ctx || window
  const self = this
  const funcBound = function (...argsNext) {
    return self.apply((this instanceof funcBound ? this : ctx), [...args, ...argsNext])
  }
  funcBound.prototype = self.prototype
  return funcBound
}

function testNew (str) { this.test = 'test ' + str }
new (testNew.bind({}, 'shikinoko nokonoko koshitanntann'))
// testNew {test: 'test shikinoko nokonoko koshitanntann'}
new (testNew.deerBind({}, 'shikinoko nokonoko koshitanntann'))
// testNew {test: 'test shikinoko nokonoko koshitanntann'}

另外，bind返回的函数的实例和原函数是指向同一个原型的，这里也满足了：

const ins1 = new (testNew.deerBind({}, 'test')), ins2 = new testNew('test')
ins1.__proto__
// {constructor: ƒ}
ins1.__proto__ === ins2.__proto__
// true

处理箭头函数的情况

注意到，箭头函数没有实例，也不能new，this来自亲代作用域，用作构造函数会引起错误：

new (() => {})
// Uncaught TypeError: (intermediate value) is not a constructor
new ((() => {}).bind())
// Uncaught TypeError: (intermediate value).bind(...) is not a constructor

const testArrowFunc = (a, b) => {
  return [a + b, this]
}
testArrowFunc(1, 2)
// [3, Window]
testArrowFunc.bind({}, 1)(2)
// [3, Window]

再修改一下这里的实现：

Function.prototype.deerBind = function(ctx, ...args) {
  ctx = ctx || window
  const self = this

  let funcBound
  if (self.prototype) {
    funcBound = function (...argsNext) {
      return self.apply((this instanceof funcBound ? this : ctx), [...args, ...argsNext])
    }
    funcBound.prototype = self.prototype
  } else {
    funcBound = (...argsNext) => {
      return self.apply(ctx, [...args, ...argsNext])
    }
  }
  return funcBound
}

testArrowFunc.deerBind({}, 1)(2)
// [3, Window]
new ((() => {}).deerBind())
// Uncaught TypeError: (intermediate value).deerBind(...) is not a constructor

处理类构造器的情况

你可能会发现，bind可以在类的构造器上面使用，但是我们上面自己写的似乎存在一点小错误：

class base { constructor (a, b) { this.test = a + b } }
new base(1, 2)
// base {test: 3}
new (base.bind({}, 1))(2)
// base {test: 3}
const bind = base.deerBind({}, 1)
new bind(2)
// Uncaught TypeError: Class constructor base cannot be invoked without 'new'

这里通过prototype上面的constructor来检查一个函数是否是构造器：

Function.prototype.deerBind = function(ctx, ...args) {
  ctx = ctx || window
  const self = this

  let funcBound
  if (self.prototype) {
    funcBound = function (...argsNext) {
      return !self.prototype.constructor
        ? self.apply((this instanceof funcBound ? this : ctx), [...args, ...argsNext])
        : new self(...args, ...argsNext)
    }
    funcBound.prototype = self.prototype
  } else {
    funcBound = (...argsNext) => {
      return self.apply(ctx, [...args, ...argsNext])
    }
  }
  return funcBound
}

const bind = base.deerBind({}, 1)
new bind(2)
// base {test: 3}

我们实现的deerBind也可以用于构造函数了。

结语

到这里，bind大体就是实现完成了，这里具体涉及了bind函数改变this指针，记录参数以及作为构造函数的功能的实现。去看了一下著名 JS polyfill 库 core-js 的实现，感觉思路大概差不多的样子，它作为 polyfill 也考虑了兼容性的问题，感觉好厉害的样子。

参考：

1. https://juejin.cn/post/6844903733013250056
2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind