call, apply, bind 区别

#call, apply, bind 区别及模拟实现call apply bind

三者都可以用来改变this的指向，但是在用法上略有不同

 首先说一下call和apply的区别

call和apply都是第一个参数是this的指向  ，只是传参的方式不同

call是 第二个以及第三依次类推都是当前函数的参数,每个参数用逗号相隔开

而apply则是将所有的参数以数组的形式来传递的

 call（window，参数1，参数1，参数3）

call和apply与bind的区别

call和apply相当于立即执行函数，使用时直接调用，而bind则类似于函数，使用时需要加（）调用

同时bind传参方式与call相同，参数都是一个一个传递的

模拟实现call  

代码

Function.prototype.myCall = function (context) {
  var context = context || window
  // 给 context 添加一个属性
  // getValue.call(a, 'yck', '24') => a.fn = getValue
  context.fn = this
  // 将 context 后面的参数取出来
  var args = [...arguments].slice(1)
  // getValue.call(a, 'yck', '24') => a.fn('yck', '24')
  var result = context.fn(...args)
  // 删除 fn
  delete context.fn
  return result
}

模拟实现apply   方式与call相似只是传参方式不同

代码

Function.prototype.myApply = function (context) {
  var context = context || window
  context.fn = this
 
  var result
  // 需要判断是否存储第二个参数
  // 如果存在，就将第二个参数展开
  if (arguments[1]) {
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  }
 
  delete context.fn
  return result
}

模拟实现bind

代码

Function.prototype.myBind = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  var _this = this
  var args = [...arguments].slice(1)
  // 返回一个函数
  return function F() {
    // 因为返回了一个函数，我们可以 new F()，所以需要判断
    if (this instanceof F) {
      return new _this(...args, ...arguments)
    }
    return _this.apply(context, args.concat(...arguments))
  }
}

如果本文对您有帮助，请抬抬您的小手，点下右下角的推荐， ^-^，当然如果看了这篇博客对您有帮助是我最开心的事，毕竟赠人玫瑰，手有余香， ^-^，如果这篇博客没有帮助到您，那就只能说一声抱歉啦