如何使用50行javaScript代码实现简单版的call,apply,bind

下面是如何使用50行JavaScript代码实现简单版的call, apply, bind的完整攻略。

步骤

1. 首先，我们需要一个函数作为示例，以便于演示call, apply, bind的使用。我们用一个简单的计算器函数，实现加法和乘法，代码如下：

function Calculator() {
  this.add = function(num1, num2) {
    return num1 + num2;
  };
  this.multiply = function(num1, num2) {
    return num1 * num2;
  };
}

1. 实现call函数，call函数会调用函数并将指定的上下文作为this传入。代码如下：

Function.prototype.myCall = function(context, ...args) {
  context = context || window;
  const fn = Symbol();
  context[fn] = this;
  const result = context[fn](...args);
  delete context[fn];
  return result;
};

1. 实现apply函数，apply函数会调用函数并将指定的上下文作为this传入，但是不同于call函数的是，apply函数接受一个数组作为参数。代码如下：

Function.prototype.myApply = function(context, args) {
  context = context || window;
  const fn = Symbol();
  context[fn] = this;
  const result = context[fn](...args);
  delete context[fn];
  return result;
};

1. 实现bind函数，bind函数会返回一个绑定了指定上下文的函数，而不会立即执行。代码如下：

Function.prototype.myBind = function(context, ...args1) {
  const self = this;
  return function(...args2) {
    const combinedArgs = args1.concat(args2);
    return self.apply(context, combinedArgs);
  };
};

示例说明

1. 我们使用上面实现的Calculator函数作为示例，并创建一个对象，用于作为call, apply和bind函数的上下文。

const calculator = new Calculator();
const context = {
  x: 10,
  y: 20
};

1. 我们可以使用call函数来调用Calculator函数，并将context作为this传入，接着将两个数字作为参数传入计算器的add方法，输出结果。

const result1 = calculator.add.myCall(context, 5, 6);
console.log(result1); // 输出31：10 + 21 = 31

1. 我们可以使用apply函数来调用Calculator函数，并将context作为this传入，接着将两个数字作为数组传入计算器的multiply方法，输出结果。

const result2 = calculator.multiply.myApply(context, [7, 8]);
console.log(result2); // 输出140：10 * 20 * 7 * 8 = 14000

1. 我们可以使用bind函数来绑定Calculator函数，并将context作为this传入，接着传入两个数字作为参数，返回一个绑定了上下文的函数，最后调用该函数输出结果。

const boundFunc = calculator.add.myBind(context, 9, 10);
const result3 = boundFunc();
console.log(result3); // 输出39：10 + 29 = 39

至此，我们已经成功实现了一个简单版的call, apply, bind函数。