实现call、apply、bind

 

一、实现myCall

首先，call函数是将this绑定到传入的第一个参数上，其余参数作为调用函数的参数。

func.call(thisArg, arg1, arg2, ...);

那么，分为三步：

1. 将 this 赋值给 thisArg ，作为它的某个函数属性
2. 调用这个函数属性
3. 删除这个属性

方法一：采用数组扩展符

Function.prototype.myCall = function (thisArg, ...arguments) {
  const func = Symbol();
  thisArg[func] = this;
  const res = thisArg[func](...arguments);
  delete thisArg[func];
  return res;
}

方法二：采用eval执行

Function.prototype.myCall = function (context) {
  var thisArg = context[0];
  thisArg.fn = this;
  var evalStr = 'thisArg.fn(';
  for (var i = 1; i < context.length; i++) {
    if (typeof context[i] === 'string') {
      evalStr += `"${context[i]}",`; // 对字符串情况的处理
    } else {
      evalStr += `${context[i]},`;
    }
  }
  var res = eval(evalStr);
  delete thisArg.fn;
  return res;
}

 

二、实现myApply

同myCall，只是参数需以数组的形式。

这里只写一种方法，另一种类似 call。

Function.prototype.myApply = function(thisArg, argArray) {
  const fn = Symbol();
  thisArg[fn] = this;
  const res = thisArg[fn](...argArray);
  delete thisArg[fn];
  return res;
}

三、实现myBind

bind函数返回一个新的函数，例如：

const fun2 = fun1.bind(obj, arg1, arg2);
fun2(arg3, arg4);
// 相当于
fun1.call(obj, arg1, arg2, arg3, arg4);

那么，可以写出：

Function.prototype.myBind = function(thisArg, ...argArray) {
  const self = this; // 这里先将此刻的this暂存起来
  return function(...argArray2) {
    const func = Symbol();
    thisArg[func] = self;
    const res = thisArg[func](...argArray, ...argArray2);
    delete thisArg[func];
    return res;
  }
}

这里只写一种方法，另一种类似 call。