call\apply\bind详解

const obj = {
  name: '张三',
  age: 20，
}
function fn(params1, params2) {
  console.log(this.name, this.age, params1, params2);
}
const result = fn.call(obj, '参数1', '参数2'); // 打印：张三, 20, 参数1, 参数2
console.log(result); // 打印undefined

const obj = {
  name: '张三',
  age: 20，
}
function fn(params1, params2) {
  console.log(this.name, this.age, params1, params2);
}
const result = fn.apply(obj, ['参数1', '参数2']); // 打印：张三, 20, 参数1, 参数2
console.log(result); // 打印undefined

const obj = {
  name: '张三',
  age: 20，
}
function fn(params1, params2) {
  console.log(this.name, this.age, params1, params2);
}
const resultFun = fn.bind(obj, '参数1', '参数2');
resultFun(); // 打印：张三, 20, 参数1, 参数2

// 实现call
Function.prototype.myCall = function () { // call挂载在Function构造函数的原型链上，因此myCall也要挂载在Function的prototype上
  // 先获取调用myCall的函数
  const fn = this;
  
  // myCall的调用者数据类型必须是函数，否则抛出错误
  if(typeof fn !== 'function') {
    throw TypeError('Not a Function');
  }
  const args = []; // 创建一个数组，用于接收myCall的实参
  /*
    arguments是原生js的一个对象，可以获取传入myCall函数的实参，是一个类数组对象，类数组对象拥有数组的特性，即length，但是不能使用Array的方法
    我们需要将arguments类数组对象转成数组：
      1.正常情况下可以通过Array.prototype.slice.call()的方式，即Array.prototype.slice.call(arguments)转成数组，但是我们还没实现call,所以此方法暂时不用
      2.es6中的新方法Array.from()也可以将类数组对象转成数组，即Array.from(arguemtns)
      3.我们使用最原始的方法，以循环的形式，将类数组对象转成数组，获取myCall的实参数组
  */
  for (let i = 0; i < arguments.length; i++) {
    args.push(arguments[i]);
  }
  // 获取指定的this指向，即实参数组中的第一个值，并将指定的this指向从参数数组中剔除
  let context = args.shift() ;
  /*
    容错机制：要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。
    如果context是简单类型的数据，需要转成对应类型的对象；
    如果context是复杂类型的数据，则保持不变；
    如果是undefined、null，则默认指向window；
    备注：其实判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型
  */
  if (typeof context === 'undefined') {
    context = window;
  } else if (typeof context === 'boolean') {
    context = new Boolean(context);
  } else if (typeof context === 'number') {
    context = new Number(context);
  } else if (typeof context === 'string') {
    context = new String(context);
  } else if (typeof context === 'symbol') {
    context = new Symbol(context);
  } else if (typeof context === 'function') {
    context = context;
  } else if (typeof context === 'object') {
    // context = context ? context : window;
    context = context ? context : window;
  }
  let randomAttributeName = Symbol(); // 创建一个随机属性名，Symbol()始终返回唯一值
  context[randomAttributeName] = fn; // 将fn临时作为context这个对象的属性存储起来，去调用fn的时候this也就指向context
  let result = context[randomAttributeName](...args); // 用context这个对象调用函数fn
  delete context[randomAttributeName]; // 删除临时绑定在context上的属性，让context回归原本的样子
  return result; // call返回的是改造后的函数调用后所返回的值（原函数返回啥，call就返回啥）
}
// 测试
function fn(params1, params2) {
  console.log(this, params1, params2)
}
const obj = {
  name: '张三',
  age: 20,
}
fn.myCall(obj, '参数1', '参数2'); // 打印obj、参数1、参数2

// 实现apply
Function.prototype.myApply = function (context, args = []) { // apply挂载在Function构造函数的原型链上，因此myApply也要挂载在Function的prototype上
                                                        // 第一个参数是指定的this指向
                                                        // 第二个参数是一个数组，数组中是要传给改造后的函数作为参数
  // 先获取调用myApply的函数
  const fn = this;
  
  // myApply的调用者数据类型必须是函数，否则抛出错误
  if(typeof fn !== 'function') {
    throw TypeError('Not a Function');
  }
  /*
    容错机制：要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。
    如果context是简单类型的数据，需要转成对应类型的对象；
    如果context是复杂类型的数据，则保持不变；
    如果是undefined、null，则默认指向window；
    备注：其实判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型
  */
  if (typeof context === 'undefined') {
    context = window;
  } else if (typeof context === 'boolean') {
    context = new Boolean(context);
  } else if (typeof context === 'number') {
    context = new Number(context);
  } else if (typeof context === 'string') {
    context = new String(context);
  } else if (typeof context === 'symbol') {
    context = new Symbol(context);
  } else if (typeof context === 'function') {
    context = context;
  } else if (typeof context === 'object') {
    // context = context ? context : window;
    context = context ? context : window;
  }
  let randomAttributeName = Symbol(); // 创建一个随机属性名，Symbol()始终返回唯一值
  context[randomAttributeName] = fn; // 将fn临时作为context这个对象的属性存储起来，去调用fn的时候this也就指向context
  let result = context[randomAttributeName](...args); // 用context这个对象调用函数fn
  delete context[randomAttributeName]; // 删除临时绑定在context上的属性，让context回归原本的样子
  return result; // myApply返回的是改造后的函数调用后所返回的值（原函数返回啥，myApply就返回啥）
}
// 测试
function fn(params1, params2) {
  console.log(this, params1, params2)
}
const obj = {
  name: '张三',
  age: 20,
}
fn.myApply(obj, ['参数1', '参数2']); // 打印obj、参数1、参数2

// 实现bind
Function.prototype.myBind = function () { // bind挂载在Function构造函数的原型链上，因此myBind也要挂载在Function的prototype上
  // 先获取调用myBind的函数
  const fn = this;
  
  // myBind的调用者数据类型必须是函数，否则抛出错误
  if(typeof fn !== 'function') {
    throw TypeError('Not a Function');
  }
  const args = []; // 创建一个数组，用于接收myBind的实参
  /*
    arguments是原生js的一个对象，可以获取传入myBind函数的实参，是一个类数组对象，类数组对象拥有数组的特性，即length，但是不能使用Array的方法
    我们需要将arguments类数组对象转成数组：
      1.正常情况下可以通过Array.prototype.slice.call()的方式，即Array.prototype.slice.call(arguments)转成数组，但是我们还没实现call,所以此方法暂时不用
      2.es6中的新方法Array.from()也可以将类数组对象转成数组，即Array.from(arguemtns)
      3.我们使用最原始的方法，以循环的形式，将类数组对象转成数组，获取myBind的实参数组
  */
  for (let i = 0; i < arguments.length; i++) {
    args.push(arguments[i]);
  }
  // 获取指定的this指向，即实参数组中的第一个值，并将指定的this指向从参数数组中剔除
  let context = args.shift() ;
  /*
    容错机制：要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。
    如果context是简单类型的数据，需要转成对应类型的对象；
    如果context是复杂类型的数据，则保持不变；
    如果是undefined、null，则默认指向window；
    备注：其实判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型
  */
  if (typeof context === 'undefined') {
    context = window;
  } else if (typeof context === 'boolean') {
    context = new Boolean(context);
  } else if (typeof context === 'number') {
    context = new Number(context);
  } else if (typeof context === 'string') {
    context = new String(context);
  } else if (typeof context === 'symbol') {
    context = new Symbol(context);
  } else if (typeof context === 'function') {
    context = context;
  } else if (typeof context === 'object') {
    // context = context ? context : window;
    context = context ? context : window;
  }
  // bind方法返回的是一个函数，所以myBind也应该返回一个函数，而且这个函数的this得是指定的this指向，即context
  return function F(...rest) { // 除了通过arguments可以获取F的实参外，还能通过剩余参数...rest的形式来获取F的实参。这边是为了区分myBind和F的实参，所以F不用arguments而是...rest
    
    if (this instanceof F) { // 处理myBind return出去的函数被作为构造函数使用的情况，即通过new运算符来调用return出去的函数实例（ 如 new func.bind() ） （很少有这样的用法，一般都是return出去之后直接调用的）
      return new fn(...args, ...rest);
    }
    /*
      以下一段完全可以用
        return fn.apply(context, args.concat(...rest))
      代替。
      只是我们假装没有apply方法，故以下面的写法来实现
    */
    let randomAttributeName = Symbol(); // 创建一个随机属性名，Symbol()始终返回唯一值
    context[randomAttributeName] = fn; // 将fn临时作为context这个对象的属性存储起来，去调用fn的时候this也就指向context
    let paramsArr = args.concat(...rest); // args.concat(...rest)是为了支持函数柯里化
    let result = context[randomAttributeName](...paramsArr); // 用context这个对象调用函数fn
    delete context[randomAttributeName]; // 删除临时绑定在context上的属性，让context回归原本的样子
    return result;
  }
}
// 测试
function fn(params1, params2) {
  console.log(this, params1, params2)
}
const obj = {
  name: '张三',
  age: 20,
}
fn.myBind(obj, '参数1', '参数2')(); // 打印obj、参数1、参数2