js模拟实现bind的函数

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);

根据这个例子, 让我们来思考一下应该如何来实现这个函数。

  1. 从代码上, bind函数是fn的一个函数属性。可以预见的是, bind应该是绑定是fn原型上的方法。
  2. 从功能上, 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许可协议。

评论 (4)

当前评论模式:游客模式,系统将自动生成相关数据信息。《内容规范》你的账号名为:
zhJzme

游客
·
2 年前
jBSPYy

游客
·
2 年前
APSazL

游客
·
2 年前
En7okE

zczxcz

游客
·
2 年前
En7okE

游客
·
2 年前