bind的原生实现

我们先来实现bind，实现每个功能之前，肯定要先看下他们的api，到底是怎么调用的，知道怎么调用才能实现。

bind除了可用来绑定this外，还可以绑定默认的参数，如下示例。

function test(arg1,arg2) {
    console.log(this.a )
    console.log(arg1)
    console.log(arg2)
}

let obj = {
    a:'a'
}
test.bind(obj,'b')('c')  
//a
//b
//c

通过观察我们发现就可以找到实现的思路：

• 每个函数都可以调用bind，所以肯定要把bind方法放到Function.protorype上

• bind返回的是个函数
  

• bind可以接收默认参数，我们要保持这个默认参数，然后再返回的函数将默认参数和后传参数合并

• 可以基于函数的apply功能来更改this并接收合并后参数
  

function test(arg1,arg2) {
    console.log(this.a )
    console.log(arg1)
    console.log(arg2)
}

let obj = {
    a:'a'
}


Function.prototype.myBind = function (context) {
    const self = this
    const args = [...arguments].slice(1) //接收除context之外的参数，也就是绑定的默认参数
    return function () {
        let all_args = args.concat([...arguments])  //将默认参数和调用参数合并
        let result =  self.apply(context,all_args)  //借助apply来执行
        return result
    }
}

test.myBind(obj,'b')('c')
//a
//b
//c

call和apply的实现

上面我们基于apply实现了bind方法，现在再原生实现apply，同样的我们看看怎么使用apply。

apply接收的第一个参数为要替换this的对象，第二个参数是个数组

function test(arg1,arg2) {
    console.log(this.a )
    console.log(arg1)
    console.log(arg2)
}

let obj = {
    a:'a'
}


test.apply(obj,['b','c'])

我们先来分析一下：

• 首先肯定是要给 Function.prototype添加一个apply方法

• apply接收两个参数，第一个是上下文，第二个是个数组

• apply是立即执行的，不像bind返回个函数

• 重点是怎么修改this呢，这个可以借助this相关的知识点：谁调用某个函数，函数中的this就指向谁

Function.prototype.myApply = function (context = window,args=[]) {
    const self = this
    context.fn = self  //给上下文添加一个fn属性指向调用myApply的函数，后续执行context.fn()，则fn中的this就指向了context，达到替换this的目的
    let result = context.fn(...args)
    delete context.fn  //得到结果之后记得再把fn从context中删除，要不就导致context变化了，这不符合apply的功能
    return result
}

类似的，我们也可以实现call的功能，call和apply的区别就是传的参数不同，可以用...args来接收call中的其他参数，后面实现就和apply相同了

Function.prototype.myCall = function (context = window,...args) {
    const self = this
    context.fn = self
    let result = context.fn(...args)
    delete context.fn
    return result
}