细节解析 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一个对象时：
- 创建一个新对象；
- 构造函数
this指向这个新对象； - 执行构造函数中的代码；
- 返回新对象。
当一个函数被作为构造函数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 也考虑了兼容性的问题，感觉好厉害的样子。
参考：
