如何手写call、apply、及bind函数

首先从以下几点来考虑如何实现这几个函数

• 不传人第一个参数，那么上下文默认为 window
• 改变 this 指向，让新的对象可以执行函数，并能接受参数

1、实现 call

Function.prototype.myCall = function(context) {
  if (typeof this !== 'function' ) {
    throw new TypeError('Error');
  };

  context = context || window;
  context.fn = this;
  const args = [...arguments].slice(1);
  const result = context.fn(...args);
  delete context.fn;
  retrun result;
};

下面是对实现的分析：

• 首先 context 为可选参数，如果不传的话默认上下文为 window

• 接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数

• 因为 call 可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来

• 然后调用函数并将对象上的函数删除

2、实现 apply

以上就是实现 call 的思路，apply 的实现也类似，区别在于对参数的处理

Function.prototype.myApply = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error');
  }

  context = context || window;
  context.fn = this;
  let result;
  // 处理参数和 call 有区别
  if (arguments[1]) {
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  };
  delete context.fn;
  return result;
};

3、实现 bind

bind 的实现对比其它两个函数略微地复杂了一点，因为 bind 需要返回一个函数，需要判断一些边界问题，以下是 bind 的实现

Function.prototype.myBind = function(context) {
  if (typeof this !== 'funtion') {
    throw new TypeError('Error');
  };

  const _this = this;
  const args = [...arguments].slice(1);
  // 返回一个函数
  return function F() {
    // 因为返回一个函数，我们可以 new F()，所以需要判断
    if (this instanceof F) {
      return new _this(...args, ...arguments);
    };
    return _this.apply(context, args.concat(...arguments));
  };
};

以下是对 bind 实现的分析

• 前几步和之前的差不多，就不阐述了

• bind 返回了一个函数，对于函数来说，有两种方式调用，一种是直接调用，一种是 new 的方式，先来说说直接调用的方式

• 对于直接调用来说，这里选择了 apply 的方式实现，但是对于参数需要注意一下情况：因为 bind 可以实现类似这样的代码 f.bind(obj, 1)(2)，所以我们需要将两边参数拼接起来，于是就有了这样的实现 args.concat(...arguments)

• 最后来说是通过 new 的方式，熟悉 this 指向问题的都知道，对于 new 的情况来说，不会被任何方式改变 this，所以对于这种情况需要忽略传入的 this

---END---