理解call、bind、apply及手写代码

首先，这三个函数是为了改变函数时的执行上下文，也就是为了改变函数运行时this的指向。
1、call、bind、apply的区别
call和apply是改变了函数的this上下文便执行该函数；而bind则是返回改变了上下文后的一个函数。
call和apply的区别：他俩的区别在于参数的不同。call和apply的第一个参数都是要改变上下文的对象，而call从第二个对象开始以参数列表的形式展现，apply则是把除了改变上下文对象的参数都放在一个数组里面作为第二个参数。
bind方法是事先把fn的this改变为我们想要的结果，并且把对应的参数值准备好，以后要用到了，直接的执行即可。

• apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以利用后续参数传参；
• 三者第一个参数都是this要指向的对象，如果没有这个参数或参数为undefined或null，则默认指向全局window。
• 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
• bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即调用 。

// 求数组中最大的值
console.log(Math.max.call(null, 1,2,3,6)); // 6
console.log(Math.max.call(null, [1,2,3,6])); // NaN
console.log(Math.max.apply(null, [1,2,3,6])); // 6

例2：

function fn () {
  console.log(this);
}
// apply 方法结果如下：
fn.call(); // 普通模式下this是window，在严格模式下this是undefined
fn.call(null); // 普通模式下this是window，在严格模式下this是null
fn.call(undefined); // 普通模式下this是window，在严格模式下this是undefined

• 函数定义在哪里 ?
  定义在Function的原型上
• 函数接受参数？
  bind函数返回一个绑定函数，最终调用需要传入函数实参和绑定函数的实参。
• 如何显式绑定this？
  如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。

手写call

Function.prototype.call = function (context) {
  const cxt = context || window;
  // 将当前被调用的方法定义在cxt.func上，为了能以对象调用的形式绑定this
  cxt.func = this;
  // 获取实参
  const args = Array.from(arguments).slice(1);
  // 以对象调用的形式调用func，此时this指向cxt，也就是传入的需要绑定的this指向
  const res = arguments.length > 1 ? cxt.func(...args) : cxt.func();
  // 删除该方法，不然会对传入对象造成污染（添加该方法）
  delete cxt.func;
  return res;
};

手写apply
apply实现的思路与call基本相同,我们只需要对参数进行不同处理即可.

Function.prototype.apply = function (context) {
  const cxt = context || window;
  // 将当前被调用的方法定义在cxt.func上，为了能以对象调用的形式绑定this
  cxt.func = this;
  // 获取实参
  const res = arguments[1] ? cxt.func(...arguments[1]) : cxt.func();
  // 删除该方法，不然会对传入对象造成污染（添加该方法）
  delete cxt.func;
  return res;
};

手写bind

Function.prototype.bind = function (context) {
  // 对context进行深拷贝，防止污染
  const cxt = JSON.parse(JSON.stringify(context))|| window;
   // 将当前被调用的方法定义在cxt.func上，为了能以对象调用的形式绑定this
  cxt.func = this;
  // 获取实参
  const args = Array.from(arguments).slice(1);
  // bind返回一个绑定函数，等待调用
  return function () {
    // 这里需要注意一点的是需要对bind函数的实参和返回的绑定函数的实参进行参数合并，调用时传入！
    const allArgs = args.concat(Array.from(arguments));
    // 以对象调用的形式调用func，此时this指向cxt，也就是传入的需要绑定的this指向
    return allArgs.length > 0 ? cxt.func(...allArgs) : cxt.func();
  };
};