js模拟实现bind的函数
901
4
MDN官方文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
MDN中的描述: bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
例子:
function fn(i, j) {
console.log(this, i, j);
}
var _fn = fn.bind({ a: 1 }, 1, 2);
根据这个例子, 让我们来思考一下应该如何来实现这个函数。
- 从代码上, bind函数是fn的一个函数属性。可以预见的是, bind应该是绑定是fn原型上的方法。
- 从功能上, MDN中的描述已经非常清楚了, 这里就不再重复。
为什么用原型? 因为这个函数是会被多次调用的,如果重复生成,会浪费内存空间。所以放在函数的原型上是最合适的。
为什么不用fn.__proto__._bind进行绑定? fn在生成之前是未知的,所以其他函数无法使用该自己定义的bind。因此不是很合理。
实现代码:
Function.prototype._bind = function(target, ...args){
// 返回匿名函数
return () => {
// 使用箭头函数,使this指向fn函数
// 调用call或者apply对目标this进行绑定
this.call(target, ...args)
}
}
function fn(i,j){
console.log(this, i, j);
}
var _fn = fn._bind({a: 1}, 1, 2)
_fn() // 函数调用
本文链接:
版权声明:自由转载-署名-非商业性使用 | CC BY-NC-SA 3.0 CN许可协议。