三个例子直接懂和手写bind/call/apply

112 阅读1分钟
//call--展开符直接指向参数
Function.prototype.call=function (context,...param) {
    /**
     * 大概的思路是,将call左边的调用放在右边context对象里,
     * 这样再去执行对象里的函数就能访问context里面变量
     * 好比:
     * A.call(B)
     * B={
     *   ...B,
     *   A:A
     * }
     * B.A()
     */
    context=context||window
    const fn=Symbol("fn")
    context[fn]=this//--神来之笔
    context[fn](...param)
    delete context[fn]
}

//apply--区别call--第二个参数的形式-一次性入参
Function.prototype.apply=function (context,param) {
    context=context||window
    const fn=Symbol("fn")
    context[fn]=this
    context[fn](...param)
    delete context[fn]
}

//bind
Function.prototype.bind=function (context,param) {
    context=context||window
    const fn=Symbol('fn')
    context[fn]=this
    //区别apply/call--bind不需要立即执行,所以需要返回函数给予调用时候再触发
    return function (..._param) {
        param=param.concat(_param)
        context[fn](...param)
        delete context[fn]
    }
}