function add(c, d) {
  return this.a + this.b + c + d;
}

const obj = {
  a: 1,
  b: 2,
};

console.log(add.call(obj, 3, 4)); // 10

const o = {
  a: 1,
  b: 2,
  add: function (c, d) {
    return this.a + this.b + c + d;
  },
};

// 1. 将函数设为对象的属性
o.fn = bar;
// 2. 执行该函数
o.fn();
// 3. 删除该函数
delete o.fn;

Function.prototype.es3Call = function (context) {
  var content = context || window;
  content.fn = this;
  var args = [];
  // arguments是类数组对象，遍历之前需要保存长度，过滤出第一个传参
  for (var i = 1, len = arguments.length; i < len; i++) {
    // 避免object之类传入
    args.push('arguments[' + i + ']');
  }
  var result = eval('content.fn(' + args + ')');
  delete content.fn;
  return result;
};
console.error(add.es3Call(obj, 3, 4)); // 10
console.log(
  add.es3Call(
    {
      a: 3,
      b: 9,
    },
    3,
    4
  )
); // 19
console.log(
  add.es3Call(
    {
      a: 3,
      b: 9,
    },
    {
      xx: 1,
    },
    4
  )
); // 12[object Object]4

// ES6 call 实现
Function.prototype.es6Call = function (context) {
  var content = context || window;
  content.fn = this;
  var args = [];
  for (var i = 1, len = arguments.length; i < len; i++) {
    args.push(arguments[i]);
  }
  const result = content.fn(...args);
  delete content.fn;
  return result;
};

console.error(add.es6Call(obj, 3, 4));
console.log(
  add.es6Call(
    {
      a: 3,
      b: 9,
    },
    {
      xx: 1,
    },
    4
  )
); // 12[object Object]4

Function.prototype.es3Apply = function (context, arr) {
  var context = context || window;
  context.fn = this;
  var result;
  if (!arr) {
    result = context.fn();
  } else {
    // 获取参数
    var args = [];
    for (var i = 0, len = arr.length; i < len; i++) {
      args.push('arr[' + i + ']');
    }
    // 执行函数
    result = eval('context.fn(' + args + ')');
  }
  delete context.fn;
  return result;
};

console.log(add.es3Apply(obj, [1, 'abc', '2'])); // 4abc

Function.prototype.es6Apply = function (context, arr) {
  var context = context || window;
  context.fn = this;
  var result;
  if (!arr) {
    result = context.fn();
  } else {
    if (!(arr instanceof Array)) throw new Error('params must be array');
    result = context.fn(...arr);
  }
  delete context.fn;
  return result;
};

console.error(add.es6Apply(obj, [1, 2])); // 6

function foo(c, d) {
  this.b = 100;
  console.log(this.a);
  console.log(this.b);
  console.log(c);
  console.log(d);
}
// 我们将foo bind到{a: 1}
var func = foo.bind(
  {
    a: 1,
  },
  '1st'
);
func('2nd'); // 1 100 1st 2nd
// 即使再次call也不能改变this。
func.call(
  {
    a: 2,
  },
  '3rd'
); // 1 100 1st 3rd

// 当 bind 返回的函数作为构造函数的时候，
// bind 时指定的 this 值会失效，但传入的参数依然生效。
// 所以使用func为构造函数时，this不会指向{a: 1}对象，this.a的值为undefined。如下

// new func('4th'); //undefined 100 1st 4th

Function.prototype.es3Bind = function (context) {
  if (typeof this !== 'function') throw new TypeError('what is trying to be bound is not callback');
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);
  const fBound = function () {
    // 获取函数的参数
    var bindArgs = Array.prototype.slice.call(arguments);
    // 返回函数的执行结果
    // 判断函数是作为构造函数还是普通函数
    // 构造函数this instanceof fNOP返回true，将绑定函数的this指向该实例，可以让实例获得来自绑定函数的值。
    // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
    return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
  };
  // 创建空函数
  var fNOP = function () {};
  // fNOP函数的prototype为绑定函数的prototype
  fNOP.prototype = this.prototype;
  // 返回函数的prototype等于fNOP函数的实例实现继承
  fBound.prototype = new fNOP();
  // 以上三句相当于Object.create(this.prototype)
  return fBound;
};

var func = foo.es3Bind(
  {
    a: 1,
  },
  '1st'
);
func('2nd'); // 1 100 1st 2nd
func.call(
  {
    a: 2,
  },
  '3rd'
); // 1 100 1st 3rd
new func('4th'); //undefined 100 1st 4th

Function.prototype.es6Bind = function (context, ...rest) {
  if (typeof this !== 'function') throw new TypeError('invalid invoked!');
  var self = this;
  return function F(...args) {
    if (this instanceof F) {
      return new self(...rest, ...args);
    }
    return self.apply(context, rest.concat(args));
  };
};

var func = foo.es6Bind(
  {
    a: 1,
  },
  '1st'
);
func('2nd'); // 1 100 1st 2nd
func.call(
  {
    a: 2,
  },
  '3rd'
); // 1 100 1st 3rd
new func('4th'); //undefined 100 1st 4th