大白话解读call与apply方法，手把手教你轻松实现自我构建过程！

2023-09-17 21:13:52

作为一名JavaScript开发人员，想必你对call和apply方法并不陌生。它们是函数对象内置的方法，允许你改变函数的调用方式，从而实现更灵活的代码重用和对象操作。

call方法

1. 实例方法

call方法可以将一个函数对象绑定到指定的对象上，并以该对象作为函数的调用者执行。

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

const person = {
  name: 'John Doe',
};

sayHello.call(person); // 输出: Hello, John Doe!

在这个例子中，我们将sayHello函数绑定到person对象上，并以person对象作为函数的调用者执行。因此，Hello, John Doe!被输出到控制台。

2. 自调用函数

call方法还可以用于实现自调用函数。自调用函数是指在定义函数的同时立即执行函数。

(function() {
  console.log('Hello, world!');
})(); // 输出: Hello, world!

在这个例子中，我们使用call方法立即执行一个匿名函数。因此，Hello, world!被输出到控制台。

apply方法

apply方法与call方法相似，但它允许你以数组的形式传递参数。

function sum() {
  return Array.prototype.reduce.call(arguments, (a, b) => a + b, 0);
}

const numbers = [1, 2, 3, 4, 5];

console.log(sum.apply(null, numbers)); // 输出: 15

在这个例子中，我们将sum函数绑定到null对象上，并以numbers数组作为参数执行。因此，15被输出到控制台。

自我构建call和apply方法

现在，让我们来实现我们自己的call和apply方法。

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

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