JavaScript中apply、call和bind方法的原理与手动实现

function foo(x, y ,z) {
  console.log(this, x, y, z)
}

const obj = { name: 'curry', age: 30 }
/**
 * 1.将obj对象绑定给foo函数的this
 * 2.数组中的1 2 3分别传递给foo函数对应的三个参数
 */
foo.apply(obj, [1, 2, 3])

function foo(x, y ,z) {
  console.log(this, x, y, z)
}

const obj = { name: 'curry', age: 30 }
/**
 * 1.将obj对象绑定给foo函数的this
 * 2.call剩余参数中的a b c分别传递给foo函数对应的三个参数
 */
foo.call(obj, 'a', 'b', 'c')

function foo(...args) {
  console.log(this, ...args)
}

const obj = { name: 'curry', age: 30 }
/**
 * 1.将obj对象绑定给foo函数的this
 * 2.bind剩余参数中的1 2 3分别传递给foo函数中参数
 * 3.也可在newFoo调用时传入参数，这时bind传递的参数会与newFoo调用时传递的参数进行合并
 */
const newFoo = foo.bind(obj, 1, 2, 3)
newFoo()
newFoo('a', 'b', 'c')

Function.prototype.myApply = function(thisArg, argArray) {
  // 1.获取当前需要被执行的函数
  // 因为myApply是需要被当前函数进行调用的，根据this的隐式绑定，此处的this就是指向当前需要被执行的函数
  const fn = this

  // 2.对传入的thisArg进行边界判断
  if (thisArg === null || thisArg === undefined) {
    // 当传入的是null或者undefined是，被执行函数的this直接指向全局window
    thisArg = window
  } else {
    // 将传入的thisArg对象化，方便后面在thisArg添加属性
    thisArg = Object(thisArg)
  }
  // 也可简单写成三元运算符：
  // thisArg = (thisArg === null || thisArg === undefined) ? window : Object(thisArg)

  // 3.将获取的fn添加到thisArg对象上
  // 这里使用Symbol的原因是避免外部传入的thisArg中的属性与添加fn有冲突
  const fnSymbol = Symbol()
  Object.defineProperty(thisArg, fnSymbol, {
    enumerable: false,
    configurable: true,
    writable: false,
    value: fn
  })
  // 也可简单写成
  // thisArg[fnSymbol] = fn

  // 4.对argArray进行判断
  // 看是否有传入值，没有值传入就默认 []
  argArray = argArray || []

  // 5.调用获取的fn函数，并将对应传入的数组展开传递过去
  const result = thisArg[fnSymbol](...argArray)
  // 调用完后删除添加的属性
  delete thisArg[fnSymbol]

  // 6.将结果返回
  return result
}

function foo(x, y, z) {
  console.log(this, x, y, z)
}

foo.myApply({name: 'curry'}, [1, 2, 3])

Function.prototype.myCall = function(thisArg, ...args) {
  // 1.获取当前需要被执行的函数
  const fn = this

  // 2.对传入的thisArg进行边界判断
  thisArg = (thisArg === null || thisArg === undefined) ? window : Object(thisArg)

  // 3.将获取的fn添加到thisArg对象上
  const fnSymbol = Symbol()
  thisArg[fnSymbol] = fn

  // 4.调用获取的fn函数，并将对应传入的args传递过去
  const result = thisArg[fnSymbol](...args)
  // 调用完后删除添加的属性
  delete thisArg[fnSymbol]

  // 5.将结果返回
  return result
}

function foo(x, y, z) {
  console.log(this, x, y, z)
}

foo.myCall({name: 'curry'}, 1, 2, 3)

Function.prototype.myBind = function(thisArg, ...argsArray) {
  // 1.获取当前的目标函数，也就是当前使用myBind方法的函数
  const fn = this

  // 2.对传入的thisArg进行边界判断
  thisArg = (thisArg === null || thisArg === undefined) ? window : Object(thisArg)

  // 3.将获取的fn添加到thisArg对象上
  const fnSymbol = Symbol()
  thisArg[fnSymbol] = fn

  // 4.定义一个新的函数
  function newFn(...args) {
    // 4.1.合并myBind和newFn传入的参数
    const allArgs = [...argsArray, ...args]
    // 4.2.调用真正需要被调用的函数，并将合并后的参数传递过去
    const result = thisArg[fnSymbol](...allArgs)
    // 4.3.调用完后删除添加的属性
    delete thisArg[fnSymbol]

    // 4.4.将结果返回
    return result
  }

  // 6.将新函数返回
  return newFn
}

function foo(x, y, z) {
  console.log(this, x, y, z)
}

const newFoo = foo.myBind({ name: 'curry' }, 1, 2)
newFoo(3)