手写 call 、apply、bind

基本介绍

apply、call、bind
都是Function 对象上的方法，调用这三个方法必须是一个函数。

• 使用

fn.call(thisArg, param1, ... paramN)
fn.apply(thisArg, [param1, ... paramN])
fn.bind(thisArg, param1, ... paramN)

fn 是要调用的函数
thisArg 是 this 所指向的对象
param 是参数

• 相同点： 都是改变函数的 this 指向。

• 不同点：

  • call 和 apply 的区别在于传参：apply 第二个参数是数组，call 则是从第二个至第 N 个都是给函数的 fn 的参数。
  • bind 和它俩的不同，bind 虽然也是改变了函数的 this 指向，但是不是马上执行，而另外两个是改变函数的 this 指向后立即执行。

• 主要使用

  • 案例：A 对象有个 getName 方法，B 也要临时使用这样的方法，那么我们就不需要在从 B 那里扩展一个新的方法，可以借用 A 对象的 getName 方法，即达到了目的，又节省了内存空间。

  let A = {
    name: 'A',
    getName: function (msg) {
      return msg + this.name
    }
  }

  let B = {
    name: 'B'
  }
  console.log('call ->', A.getName.call(B, 'Hello ')) // call -> Hello B
  console.log('apply ->', A.getName.apply(B, ['Hello '])) // apply -> Hello B
  const getName = A.getName.bind(B, 'Hello ')
  console.log('bind ->', getName()) // bind -> Hello B

手写 call

• call 的功能就是改变 this 指向，并指向函数，如果有参数将参数传入

Function.prototype.myCall = function(context, ...args) {
  const ctx = context || window
  ctx.fn = this
  const result = eval('ctx.fn(...args)')
  delete ctx.fn
  return result
}

// 测试
 console.log('myCall --->', A.getName.myCall(B, 'Hello ')) // myCall ---> Hello B

手写 apply

• 原理和 call 类似，知识传参有所改变

Function.prototype.myApply = function (context, args) {
  const ctx = context || window
  ctx.fn = this
  const res = eval('context.fn(...args)')
  delete ctx.fn
  return res
}
// 测试
console.log('myApply --->', A.getName.myApply(B, ['apply ']))
// myApply ---> apply B

手写 bind

• bind 和前面两个思路也差不太多，只是 bind 不能直接执行，需要返回一个函数，注意：返回函数原型上的属性不能丢

 Function.prototype.myBind = function (context, ...args) {
  if (typeof this !== 'function') throw new Error('this must be a function')
  let self = this
  let res = function () {
    // 这里如果执行可能还会有参数，需要和之前的参数合并 Array.prototype.slice.call(arguments)
    return self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments)))
  }
  // 如果原型上有方法
  if (this.prototype) {
    res.prototype = Object.create(this.prototype)
  }
  return res
}

// 测试
const mbind = A.getName.myBind(B, 'my bind ')
console.log('my bind-->', mbind()) // my bind--> my bind B