模拟实现一个bind

bind方法用来保留JavaScriptthis指向, 和applycall这两个方法不同的是,bind不会立即执行

如何模拟实现一个bind方法

初始函数,我们将对整个函数修改this指向

1
2
3
4
5
function fn( name ) {
this.name = name
}

var obj = { age: 18 }

最普通的实现

创建一个函数

1
2
3
4
5
6
7
function mybind(func ,context, ...args) {
return () => {
return func.apply(context, args )
}
}

var bindFn = mybind(fn, obj, '小明')

原型实现

创建一个函数

1
2
3
4
5
6
7
8
Function.prototype.mybind = function(context, ...args) {
const _this = this
return (...args2) => {
return _this.apply( context, [ ...args, ...args2] )
}
}

var bindFn = fn.mybind(obj, '小明' )

实现很简单, 但是还差一步,就是bind后的函数, 拿来作为构造函数new时, this指向会出问题

处理new 的指向

1
2
3
4
5
6
7
8
9
Function.prototype.mybind = function(context, ...args) {
const _this = this
function cbFn (...tempArgs) {
return this instanceof cbFn ? _this.apply(this, [ ...args, ...tempArgs]) : _this.apply( context, [ ...args, ...tempArgs] )
}
return cbFn
}
var BindFn = fn.mybind(obj, '小明' )
var bfn = new BindFn()

参考文献

你的支持将鼓励我继续创作