call && apply && bind

call

/**
 *  call 能让一个对象使用另一个对象上的方法
 */

const person = {
  show: function (age) {
    console.log(this.name + ', age: ' + age)
  }
}

const obj = { name: 'tan' }

person.show.call(obj, 200)

Function.prototype._call = function (ctx) {
  // ctx 为 undefined || null
  ctx = ctx || Window
  // 调用的方法 like show
  ctx.fn = this
  const _args = [...arguments].slice(1)
  const res = ctx.fn(..._args)
  delete ctx.fn
  return res
}

person.show._call(obj, 500)       // tan, age: 500

apply

/**
 *  apply 能让一个对象使用另一个对象上的方法
 *        与 call 的区别在于传参
 */

 const person = {
  show: function (age, weapon) {
    console.log(this.name + ', age: ' + age + ', weapon: ' + weapon)
  }
}

const obj = { name: 'tan' }

person.show.apply(obj, [200])

Function.prototype._apply = function (ctx) {
  // ctx 为 undefined || null
  ctx = ctx || Window
  // 调用的方法 like show
  ctx.fn = this
  const _args = arguments[1] || []
  const res = ctx.fn(..._args)
  // 防止 ctx 属性越来越多
  delete ctx.fn
  return res
}

person.show._apply(obj, [500, 'AK'])       // tan, age: 500, weapon: AK

bind

/**
 *  bind 将一个函数绑定到一个对象上，但不会立即调用，而是返回一个新的函数
 *       新函数被调用时，可以再次传参
 */

Function.prototype._bind = function () {
  const _self = this
  const _this = [...arguments].slice(0, 1)
  const _args = [...arguments].slice(1)
  return function (...args) {
    let temp = _args.concat([...args])
    _self.apply(_this, temp)
  }
}

function fn(a, b, c) {
  return a + b + c;
}

const _fn = fn._bind(null, 10)
console.log(_fn(20, 30))