JavaScript函数的三种调用方式和模拟实现

2024-01-23 12:34:49

简介

在JavaScript中，函数是一等公民，这意味着它们可以像其他数据类型一样被赋值、传递和调用。函数还具有属性和方法，其中两个重要的非继承方法是call()和apply()。这两种方法都允许开发者在特定的作用域中调用函数，并传递参数。

call()方法

call()方法接受两个参数：

在其中运行函数的作用域
一个参数数组

call()方法将函数的作用域设置为第一个参数，并使用第二个参数作为函数的参数。例如，以下代码将把函数greet()的作用域设置为对象person，并使用字符串"John"作为参数调用函数：

const person = {
  name: "John"
};

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call(person, "John"); // Hello, John!

apply()方法

apply()方法与call()方法非常相似，但它接受的参数列表略有不同。apply()方法接受两个参数：

在其中运行函数的作用域
一个包含参数的数组

apply()方法将函数的作用域设置为第一个参数，并使用第二个参数作为函数的参数数组。例如，以下代码将把函数greet()的作用域设置为对象person，并使用数组["John", "Doe"]作为参数调用函数：

const person = {
  name: "John"
};

function greet(firstName, lastName) {
  console.log(`Hello, ${firstName} ${lastName}!`);
}

greet.apply(person, ["John", "Doe"]); // Hello, John Doe!

bind()方法

bind()方法与call()和apply()方法不同，它不会立即调用函数。相反，它返回一个新的函数，该函数的作用域被绑定到第一个参数。这意味着你可以稍后在另一个上下文中调用返回的函数，而无需再次指定作用域。例如，以下代码将把函数greet()的作用域绑定到对象person，并返回一个新的函数：

const person = {
  name: "John"
};

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const greetJohn = greet.bind(person);

greetJohn(); // Hello, John!

模拟实现

我们可以模拟call()、apply()和bind()方法，以更好地理解它们的内部工作原理。以下是如何模拟这些方法的代码：

Function.prototype.myCall = function (context, ...args) {
  context.fn = this;
  context.fn(...args);
  delete context.fn;
};

Function.prototype.myApply = function (context, args) {
  context.fn = this;
  context.fn(...args);
  delete context.fn;
};

Function.prototype.myBind = function (context, ...args) {
  const fn = this;
  return function (...innerArgs) {
    fn.myApply(context, [...args, ...innerArgs]);
  };
};