apply call bind 的实现

1 call 实现

函数的实现 会有很多的 edge case (边界判断) ， 就是 特殊的情况

// 给所有函数添加 _call 方法
Function.prototype._call = function (thisArg, ...restParameters) {
  // 执行 调用的那个函数 ， 其实是一个隐式绑定
  // 如果是一个 单纯的 数字， Object(数字)  可以转换成 对象模式
  // Object(null/undefined) 会返回一个空对象

  // 1. 获取需要被执行的函数
  var fn = this

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

  // 3.调用需要被执行的函数
  thisArg.fn = fn
  var result = thisArg.fn(...restParameters)
  delete thisArg.fn
  // 4.将 结果返回
  return result
}

function foo(num1, num2) {
  console.log('foo 被执行', this, num1, num2);
  return num1 + num2
}

var result1 = foo._call({ name: "呆呆狗" }, 100, 200)
var result2 = foo._call('呆呆狗')
var result13 = foo._call(null)
console.log('返回结果:', result1);

2 apply 实现

Function.prototype._apply = function (thisArg, argArray) {
  // 当传递一个参数的时候， 会报错，argArray 是 没有值的，此时的 argArray 就是 undefined
  // 解决方案：1. 可以判断 argArray 有没有值

  // 1. 拿到 函数
  var fn = this
  // 2. 转换成 对象  (如果 thisArg 是 0 或者 '' 呢？ Boolean(0或者空字符串) 的结果是 false)
  thisArg = thisArg ? Object(thisArg) : window
  // 3. 执行
  thisArg.fn = fn
  // var result = thisArg.fn(...argArray)
  // 解决 argArray 不传递的情况 , 方案 1
  // var result
  // if (!argArray) {
  //   // argArray 没有传递参数的时候
  //   result = thisArg.fn()
  // } else {
  //   result = thisArg.fn(...argArray)
  // }

  // 解决 argArray 不传递的情况 , 方案 2
  argArray = argArray ? argArray : []
  var result = thisArg.fn(...argArray)

  delete thisArg.fn
  return result
}

function sum(num1, num2) {
  console.log('sum 被调用');
  return num1 + num2
}
// 如果是一个参数呢
function sum1(params) {
  return params
}

// 如果没有传递参数 ，
function sum2() {

}

var result = sum._apply({ name: "呆呆狗" }, [10, 20])
var result1 = sum1._apply({ name: "呆呆狗" }, [10])
var result2 = sum2._apply({ name: "呆呆狗" },)

console.log('结果1', result);
console.log('结果2', result1);
console.log('结果3', result2);

3 bind 实现

Function.prototype._bind = function (thisArg, ...argArray) {
  // 1. 获取到真实调用的函数
  var fn = this
  // 2.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
  function proxyFn(...args) {
    // 3. 
    var finalArgs = [...argArray, ...args]
    thisArg.fn = fn
    var result = thisArg.fn(...finalArgs)
    delete thisArg.fn
    return result
  }
  return proxyFn
}

function sum(num1, num2, num3, num4) {
  console.log('sum被执行', this);
  console.log('参数', num1, num2, num3, num4);
  return 20
}

var bar = sum._bind({ name: "呆呆狗" }, 10, 20)
var result = bar(30, 40)
console.log(result);