js【详解】bind()、call()、apply()（ 含手写 bind，手写 call，手写 apply ）

let newFunc = obj.myFn.bind(newObj,'北京','上海');
newFunc();

obj.myFn.call(newObj,'北京','上海')

obj.myFn.apply(newObj,['北京','上海'])

var name="张三",age=18;

var obj = {
  name:"李四",
  oldAge:this.age,
  myFn:function(a, b){
    console.log( this.name+"年龄"+this.age,"来自"+a+"去往"+b )
  }
}

var newObj = {
    name:"王五",
    age:22
}

obj.myFn.call(newObj,'北京','上海'); // 王五年龄22 来自北京去往上海
obj.myFn.apply(newObj,['北京','上海']);　　// 王五年龄22 来自北京去往上海　
obj.myFn.bind(newObj,['北京','上海'])();　//王五年龄22 来自北京,上海去往undefined
obj.myFn.bind(newObj,'北京','上海')();　// 王五年龄22 来自北京去往上海

// 手写 bind
Function.prototype.my_bind = function () {
  // 将参数拆解为数组
  const argList = Array.prototype.slice.call(arguments);

  // 获取参数的第一项，并将参数的第一项从参数数组中移除
  const first_arg = argList.shift();

  // 返回一个函数
  return () => {
    // 箭头函数中的this继承函数外的this
    return this.apply(first_arg, argList);
  };
};

// 手写 call
Function.prototype.my_call = function () {
  // 将参数拆解为数组
  const argList = Array.prototype.slice.call(arguments);

  // 获取参数的第一项，并将参数的第一项从参数数组中移除
  const first_arg = argList.shift();

  // 返回函数执行的结果
  return this.apply(first_arg, argList);
};

// 手写 apply
Function.prototype.my_apply = function (new_this, argArray) {
  if (new_this !== null && new_this !== undefined) {
    // 第一个参数不是 null 和 undefined 时，将其转换为对象
    new_this = Object(new_this);
  } else {
    // 第一个参数是 null 或 undefined 时，将其重置为 window
    new_this = window;
  }
  // 若第二个参数没有传 argArray ，则重置为空数组
  argArray = argArray || [];

  // 使用 Symbol 生成一个唯一的属性，避免覆盖 new_this 中的已有属性
  const key = Symbol("fn");

  // 将原this（即原函数）变为新this(即传入的new_this) 的方法
  new_this[key] = this;

  // 将原函数作为新this的对象方法执行，实现函数内 this 的指向变为 新this
  const result = new_this[key](...argArray);

  // 移除新增的方法
  delete new_this[key];

  // 返回函数执行的结果
  return result;
};