前端常用方法——call、apply、bind的简易实现

前端常用方法——call、apply、bind的简易实现

场景

​ call, apply,bind可以改变this的指向，利用es6的语法我们可以很简便的实现call，apply，bind

• 用call时，第一个参数为想调用的对象，第二个以及以后为函数调用时的参数，实现如下

  Function.prototype.myCall = function(self,...args){
    self = self || globalThis
    self.fn = this
    let result = self.fn(...args)
    delete self.fn
    return result
  }
  

  首先为self做判断处理，为null或undefined时等于的是window，self.fn 指向的是当前的函数

  result为当前函数调用后返回的结果，函数调用时需要的参数为myCall后的第二个以及以后的参数，利用e s6的…运算符可以很方便处理函数调用需要的参数。拿到结果后，删除该属性，返回结果，简易版call就实现了.

• apply和call类似，不过后续接受的是数组，利用…我们也可以很轻易实现apply方法，实现如下

  Function.prototype.myApply = function(self,args){
    self = self || globalThis
    self.fn = this
    let result = self.fn(...args)
    delete self.fn
    return result
  }
  

  为apply时第二个参数就是数组，函数调用时利用…运算符拆分即可

• bind时是返回方法，对call方法稍加改造即可，实现如下

  Function.prototype.myBind = function(self,...args1) {
    self = self || globalThis
    self.fn = this
    return function(...args2) {
      return self.fn(...args1.concat(args2))
    }
  }
  

  为bind时注意没有delete，是因为可以多次调用新函数,比如

  const fn = (num) => {
    return num
  }
  
  console.log(bn(2))
  // 2
  console.log(bn(3))
  // 3
  

  ​

小结

• 这只是简易的实现，并没有添加类型校验等等
• 还是要多学多记，发现现在再学再看能很快的掌握～