JS高级——实现apply、call、bind函数

一、apply函数

1.1 JS中apply函数

语法：
fn.apply(thisArg, argsArray)

参数：
thisArg：在fn函数运行时绑定的对象，即fn中this指向thisArg;
argsArray:一个数组或者类数组对象，其中的数组元素将作为单独的参数传给fn函数。

返回值：
调用有指定this值和参数的函数的结果。

1.2 apply函数实现原理

// 自己实现cyapply
Function.prototype.cyapply = function(thisArg, argArray) {
  // 1.获取到要执行的函数
  const fn = this

  // 2.处理绑定的thisArg
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.执行函数
  thisArg.fn = fn
  
  // argArray = argArray ? argArray: []
  argArray = argArray || []
  const result = thisArg.fn(...argArray)
  delete thisArg.fn

  // 4.返回结果
  return result
}

function sum(num1, num2) {
  console.log("sum被调用", this, num1, num2)
  return num1 + num2
}

// 调用cyapply
const result = sum.cyapply("abc", [20, 30])
console.log(result)

二、call函数

1.1 JS中call函数

语法：
fn.call(thisArg, arg1, arg2, ...)
参数：
thisArg：在fn函数运行时绑定的对象，即fn中this指向thisArg;
arg1, arg2, ...：指定的参数列表。

返回值：
调用有指定this值和参数的函数的结果。

1.2 call函数实现原理

// 给所有的函数添加一个cycall的方法
Function.prototype.cycall = function(thisArg, ...args) {
  // 1.获取需要被执行的函数
  const fn = this

  // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.调用需要被执行的函数
  thisArg.fn = fn
  const result = thisArg.fn(...args)
  delete thisArg.fn

  // 4.将最终的结果返回出去
  return result
}

function sum(num1, num2) {
  console.log("sum函数被执行", this, num1, num2)
  return num1 + num2
}

// 自己实现的函数的cycall方法
// 默认进行隐式绑定
const result = sum.cycall("abc", 20, 30)
console.log("cycall的调用:", result)

三、bind函数

1.1 JS中bind函数

语法：
fn.bind(thisArg[, arg1[, arg2[, ...]]])

参数：
thisArg：在fn函数运行时绑定的对象，即fn中this指向thisArg;
arg1, arg2, ...：当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

返回值：
返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

1.2 bind函数实现原理

Function.prototype.cybind = function(thisArg, ...argArray) {
  // 1.获取到真实需要调用的函数
  const fn = this

  // 2.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  function proxyFn(...args) {
    // 3.将函数放到thisArg中进行调用
    thisArg.fn = fn
    // 特殊: 对两个传入的参数进行合并
    const finalArgs = [...argArray, ...args]
    const result = thisArg.fn(...finalArgs)
    delete thisArg.fn

    // 4.返回结果
    return result
  }
  return proxyFn
}

function sum(num1, num2, num3, num4) {
  console.log(num1, num2, num3, num4)
}


// 使用自己定义的cybind
const newSum = sum.cybind("abc", 10, 20)
const result = newSum(30, 40)