JavaScript中的call和apply方法|极客笔记

JavaScript中的call和apply方法

什么是call和apply

在JavaScript中，call和apply都是函数的方法，用于改变函数的执行上下文。它们允许我们在调用函数时指定函数体内this的值，从而达到改变函数的执行上下文的目的。

1. call

call方法允许我们显式地指定一个对象作为函数执行时的上下文（也就是this的值），然后调用该函数。

语法

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

在上述语法中，thisArg为可选参数，表示调用函数时的上下文对象。如果不传递该参数，将使用全局对象，浏览器环境下为window对象。

arg1、arg2等为可选参数，表示传递给被调用函数的参数列表。

示例代码

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

const person = {
  name: 'John'
};

greet.call(person, 'Alice');

运行结果

Hello, Alice! I am John.

在上述示例中，person对象通过call方法调用了greet函数，并将其作为上下文对象。当greet函数执行时，this指向了person对象。

2. apply

apply方法与call方法类似，也允许我们改变函数执行时的上下文，但参数列表的传递方式略有不同。

语法

function.apply(thisArg, [argsArray])

在上述语法中，thisArg为可选参数，表示调用函数时的上下文对象。如果不传递该参数，将使用全局对象，浏览器环境下为window对象。

argsArray为可选参数，表示以数组形式传递给被调用函数的参数列表。

示例代码

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

const max = Math.max.apply(null, numbers);

console.log(max);

运行结果

在上述示例中，我们使用apply方法调用了Math.max函数，将numbers数组作为参数传递给了Math.max。由于Math.max是一个内置函数，并没有一个特定的对象将其作为方法调用，因此我们将第一个参数设置为null。

call和apply的区别

call方法和apply方法的主要区别在于参数的传递方式。

call方法的参数是逐个传递的，通过逗号分隔。
apply方法的参数以数组形式传递。

如果已知函数需要的参数个数固定且少于或等于3个，建议使用call方法。如果参数个数不确定，或需要使用已有数组作为参数传递，建议使用apply方法。

应用场景

调用对象的已有方法

我们经常会遇到需要将一个对象的方法绑定到另一个对象上的情况。这时，可以使用call或apply来调用该方法，并将需要绑定的对象作为上下文对象。

示例代码

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

const person1 = {
  name: 'Alice'
};

const person2 = {
  name: 'Bob'
};

greet.call(person1);
greet.call(person2);

运行结果

Hello, Alice!
Hello, Bob!

在上述示例中，我们定义了一个greet函数，该函数在调用时打印出问候语。然后，我们创建了两个person1和person2对象，并使用call调用了greet函数，将对象作为上下文对象，从而打印出相应的问候语。

参数传递

apply方法对于参数个数不确定的情况特别有用，我们可以使用一个数组或类数组对象作为参数传递给函数。

示例代码

function sum() {
  let result = 0;

  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }

  return result;
}

const numbers = [1, 2, 3, 4, 5];
const result = sum.apply(null, numbers);

console.log(result);