JS中callapplybind函数手写实现demo

2023-03-15 17:23

短信预约 -IT技能 免费直播动态提醒

正文

JavaScript 中的函数是一等公民，可以像普通变量一样被传递和使用。这种灵活性使得函数可以被用于各种场景，比如对象方法的调用、构造函数的创建和原型继承等。在函数的使用过程中，call、apply、bind 是 JavaScript 中比较常用的一些方法，它们可以改变函数执行的上下文，同时还能传递参数。

在本篇文章中，我们将会详细介绍 call、apply、bind 这三个方法，并且手动模拟实现它们。

call 方法

call 方法用于调用一个函数，并且可以设置函数内部的 this 值。它可以让你将一个函数的 this 对象指向任意一个对象，并且传入任意个数的参数。

下面是 call 方法的基本语法：

function.call(thisArg, arg1, arg2, ...)

其中：

function：要调用的函数。
thisArg：设置 function 函数中的 this 对象的值。
arg1、arg2、...：传递给 function 函数的参数，可以有多个。

下面是一个简单的示例：

const person = {
  name: 'Zhang San',
  sayHi() {
    console.log(`Hi, my name is ${this.name}.`);
  },
};
person.sayHi(); // 输出 "Hi, my name is Zhang San."
const otherPerson = {
  name: 'Zhang San',
};
person.sayHi.call(otherPerson); // 输出 "Hi, my name is Zhang San."

在上面的例子中，我们创建了一个 person 对象，它有一个 sayHi 方法，用于输出自我介绍。我们使用 call 方法将 person 对象的 sayHi 方法绑定到 otherPerson 对象上，并且输出了 otherPerson 对象的名字。

接下来，我们将手动模拟实现 call 方法，实现一个名为 myCall 的函数。

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

上面的代码中，我们给 Function.prototype 添加了一个新的方法 myCall。该方法接收两个参数，第一个参数 context 表示要绑定的 this 值，第二个参数 args 表示要传递给函数的参数列表。如果第一个参数 context 为空，则默认绑定到全局对象 window 上。

接着，我们在绑定的对象 context 上添加了一个 fn 属性，并且将当前函数绑定到该属性上，接着调用该函数，并将结果保存到 result 变量中。

最后，我们删除 context 对象上的 fn 属性，并将结果返回。这样，我们就成功地手动模拟实现 call 方法。

apply 方法

apply 函数的语法为：function.apply(thisArg, [argsArray])，其中 thisArg 表示函数执行时的上下文对象，也就是函数中的 this 关键字所指向的对象，argsArray 是一个数组，表示函数执行时传递的参数列表。

实现步骤

声明一个函数，以便在之后使用 apply 函数。

function sum(a, b) {
  return a + b;
}

然后我们现在需要为函数 sum 添加 apply 方法，该方法接受两个参数：上下文对象 thisArg 和参数数组 argsArray。

Function.prototype.apply = function(thisArg, argsArray) {
  // 代码实现
};

在 apply 函数中，第一个参数 thisArg 表示要调用函数的上下文对象。如果没有传递 thisArg，那么默认为全局对象 window。

Function.prototype.apply = function(thisArg, argsArray) {
  thisArg = thisArg || window;
};

我们需要在函数执行时将函数中的 this 关键字指向上下文对象 thisArg，从而改变函数的上下文对象。

Function.prototype.apply = function(thisArg, argsArray) {
  thisArg = thisArg || window;
  let fn = Symbol('fn');
  thisArg[fn] = this;
  let result = thisArg[fn](...argsArray);
  delete thisArg[fn];
  return result;
};

在上述代码中，我们使用了一个新的 Symbol 类型的变量 fn，用于存储函数对象。然后我们将函数对象存储在上下文对象 thisArg 中，并立即执行该函数，从而改变函数的上下文对象。最后，我们删除存储在上下文对象中的函数对象，并返回函数执行的结果。

下面是完整的 apply 函数的代码实现：

function sum(a, b) {
  return a + b;
}
Function.prototype.apply = function(thisArg, argsArray) {
  thisArg = thisArg || window;
  let fn = Symbol('fn');
  thisArg[fn] = this;
  let result = thisArg[fn](...argsArray);
  delete thisArg[fn];
  return result;
};
console.log(sum.apply(null, [1, 2])); // 输出：3

bind 方法

bind函数也是对函数的this指向进行修改的函数，不同于 call 和 apply 函数的立即执行，bind 函数返回一个新的函数，这个新的函数可以在后续调用时再传入参数并执行。bind 函数的实现可以通过在返回的新函数中使用闭包来保存传入的 this 值，并返回一个新函数。

bind 函数的语法如下：

function.bind(thisArg[, arg1[, arg2[, ...]]])

其中，thisArg 为需要绑定的 this 值，arg1 , arg2 等为新函数的参数。bind 函数返回一个新函数，这个新函数的 this 值被绑定为传入的 thisArg 值，同时可以传入额外的参数作为新函数的参数。当调用返回的新函数时，会以传入的参数和之前绑定的 this 值作为参数调用原函数。

下面是一个手动实现的 bind 函数：

Function.prototype.bind2 = function(thisArg) {
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var bindArgs = Array.prototype.slice.call(arguments);
    return self.apply(thisArg, args.concat(bindArgs));
  };
}

在实现中，先保存 this 的指向，然后将传入的参数放到 args 数组中。接下来返回一个新的函数，这个新的函数会保存 bind2 函数中的 this 值和 args 数组中的参数。在新函数被调用时，会将之前保存的 this 值和 args 数组中的参数与新传入的参数合并为一个数组，并调用原函数的 apply 方法传入这个数组作为参数，以达到修改 this 值和传入参数的目的。