JavaScript 中 call、apply、bind 方法的手写实现详解

正文

在 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 值和传入参数的目的。

总结

本文介绍了 call、apply 和 bind 这三个函数的作用及其实现原理，并手动模拟实现了这三个函数。在实现过程中，我们学习了函数的 this 指向、函数的 apply 和 call 方法，以及函数的柯里化等知识点。

掌握这些知识点有助于我们更好地理解 JavaScript 中的函数机制，并能够编写更加灵活、高效的代码。

以上就是 JS 中 call、apply、bind 函数手写实现 demo 的详细内容，更多关于 JS call、apply、bind 函数的资料请关注本站其它相关文章！