重学js（call、apply和bind的学习）

前言

最近闲下来有空系统重新预习一下js， call，apply，bind属于显示绑定，这三个方法都能直接修改this指向。其中call与apply比较特殊，它们在修改this的同时还会直接执行方法，而bind只是返回一个修改完this的boundFunction并未执行，那么今天我们来讲讲如果通过JavaScript模拟实现call与apply方法。

call第一参数为this指向，后续散列参数均为函数调用所需形参，而在apply中这些参数被包裹在一个数组中。
废话不多说 我们来看看代码

call实现

// apply/call/bind的用法

// 给所有的函数添加一个mycall 的方法
Function.prototype.mycall = function (thisArg, ...args) {
  // 1.对thisArg转成对象类型(防止它传入的是非对象类型)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
  // 2.Symbol实现唯一值
  const fnSymbol = Symbol()
  // 3.调用需要被执行的函数
  thisArg[fnSymbol] = this
  let result = thisArg[fnSymbol](...args)
  delete thisArg[fnSymbol]
  // 4.将最终的结果返回出去
  return result
}


function foo() {
  console.log("foo函数被执行", this)
}

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


// 系统的函数的call方法
foo.call(undefined)
let result = sum.call({}, 20, 30)
console.log("系统调用的结果:", result)

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

apply实现

与call（）只有一个区别，apply第二个参数为数组

// 自己实现myapply
Function.prototype.myapply = function (thisArg, argArray) {

  // 1.处理绑定的thisArg
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
  // 2.Symbol实现唯一值
  const fnSymbol = Symbol()
  // 3.执行函数
  thisArg[fnSymbol] = this
  let result
  // if (!argArray) { // argArray是没有值(没有传参数)
  //   result = thisArg[fnSymbol]()
  // } else { // 有传参数
  //   result = thisArg[fnSymbol](...argArray)
  // }

  // argArray = argArray ? argArray: []
  argArray = argArray || []
  result = thisArg[fnSymbol](...argArray)

  delete thisArg[fnSymbol]

  // 4.返回结果
  return result
}

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

function foo(num) {
  return num
}

function bar() {
  console.log("bar函数被执行", this)
}

// 系统调用
// let result = sum.apply("abc", 20)
// console.log(result)

// 自己实现的调用
// let result = sum.myapply("abc", [20, 30])
// console.log(result)

// let result2 = foo.myapply("abc", [20])
// console.log(result2)

// edge case
bar.myapply(0)

bind实现

Function.prototype.hybind = function (thisArg, ...argArray) {
  // 1.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
  // 2.获取到真实需要调用的函数
  const fn = this


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

    // 4.返回结果
    return result
  }

  return proxyFn
}

function foo() {
  console.log("foo被执行", this)
  return 20
}

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

// 系统的bind使用
let bar = foo.bind("abc")
bar()

// let newSum = sum.bind("aaa", 10, 20, 30, 40)
// newSum()

// let newSum = sum.bind("aaa")
// newSum(10, 20, 30, 40)

// let newSum = sum.bind("aaa", 10)
// newSum(20, 30, 40)


// 使用自己定义的bind
// let bar = foo.hybind("abc")
// let result = bar()
// console.log(result)

let newSum = sum.hybind("abc", 10, 20)
let result = newSum(30, 40)