JavaScript中call与apply方法的区别详解：从使用场景到代码实践

JavaScript 中的 call 和 apply：深入理解它们的区别

在 JavaScript 中，call 和 apply 是两个非常实用的函数方法，它们都用来在调用函数时显式地设定函数内部的 this 指向。虽然它们的功能相同，但在具体使用方式和参数传递上存在关键区别。理解这些区别，有助于你在编写代码时更灵活地控制函数的执行上下文。

核心区别：参数传递方式

call 和 apply 的第一个参数都是用来指定 this 的值。从第二个参数开始，它们的传递方式完全不同：

• call 方法：从第二个参数开始，逐个传递参数。即 func.call(thisArg, arg1, arg2, ...)。
• apply 方法：只接收两个参数，第二个参数是一个数组（或类数组对象），数组中的每个元素将被依次传递给函数。即 func.apply(thisArg, [argsArray])。

基本示例演示

让我们来看一个具体的例子，直观感受它们的区别。

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

// 使用 call: 逐个传递参数
greet.call(person, 'Hello', '!');
// 输出: Hello, Alice!

// 使用 apply: 参数以数组形式传递
greet.apply(person, ['Hi', '?']);
// 输出: Hi, Alice?

在上面的代码中，greet.call(person, 'Hello', '!') 将参数 'Hello' 和 '!' 逐个传递给 greet 函数。而 greet.apply(person, ['Hi', '?']) 则通过一个数组来传递同样的两个参数。函数执行完毕后，它们都成功改变了 this 的指向，使得 this.name 能够访问到 person 对象的 name 属性。

流传参数个数固定的场景

当你明确知道函数需要接收多少个参数时，使用 call 会比较直观和简洁。

function introduce(role, age) {
  console.log('I am ' + this.name + ', a ' + role + ', and I am ' + age + ' years old.');
}

const user = { name: 'Bob' };

// 使用 call 方法，参数按顺序写出
introduce.call(user, 'developer', 30);
// 输出: I am Bob, a developer, and I am 30 years old.

处理参数个数不固定或参数是数组的场景

当函数可以接收任意数量的参数，或者当你已经有一个现成的参数数组时，apply 会非常方便。一个经典的例子是利用 Math.max 求数组中的最大值。

const numbers = [5, 12, 8, 130, 44];

// Math.max 接收的是逐个参数，而不是数组
// 使用 apply 可以把数组展开成参数
const max = Math.max.apply(null, numbers);
console.log(max); // 输出: 130

// 如果不使用 apply，也可以用展开运算符，这是现代更推荐的方式
const max2 = Math.max(...numbers);
console.log(max2); // 输出: 130

借用其他对象的方法

这是 call 和 apply 最强大的应用场景之一。你可以借用其他对象的方法，而无需修改原有对象的原型。

const cat = {
  name: 'Whiskers',
  sayHello: function(greeting) {
    console.log(greeting + ', I am ' + this.name);
  }
};

const dog = { name: 'Buddy' };

// 借用 cat 的 sayHello 方法给 dog 使用
cat.sayHello.call(dog, 'Woof');
// 输出: Woof, I am Buddy

// 也可以用 apply
cat.sayHello.apply(dog, ['Bark']);
// 输出: Bark, I am Buddy

实现“类继承”或伪多态

在早期的 JavaScript 中，call 和 apply 经常被用来实现“类”之间的继承。

function Animal(name) {
  this.name = name;
  this.species = 'animal';
}

function Dog(name, breed) {
  // 使用 call 方法调用 Animal 构造函数，将 Dog 的实例作为 this 传入
  Animal.call(this, name);
  this.breed = breed;
}

const myDog = new Dog('Max', 'Golden Retriever');
console.log(myDog.name);    // 输出: Max
console.log(myDog.species); // 输出: animal
console.log(myDog.breed);   // 输出: Golden Retriever

性能考虑

在绝大多数日常使用中，两者的性能差异微乎其微，完全可以忽略不计。选择哪一个主要取决于你的使用场景和代码的可读性。

• 当你的参数已经是一个数组（比如从 arguments 对象或者从外部 API 获取的数组）时，使用 apply 会更自然，可以省去手动展开数组的步骤。
• 当你明确知道要传递参数的顺序和数量时，使用 call 会让代码意图更清晰。

值得注意的是，ES6 引入的展开运算符 ... 为 call 提供了类似 apply 的能力：

const args = [1, 2, 3];
function sum(a, b, c) {
  return a + b + c;
}

// 使用 call 配合展开运算符
const result1 = sum.call(null, ...args);
console.log(result1); // 输出: 6

// 使用 apply
const result2 = sum.apply(null, args);
console.log(result2); // 输出: 6

总结

总而言之，call 和 apply 的核心功能一致：改变函数执行时的 this 上下文。区别仅在于参数传递的语法。在开发中，根据具体场景选择最方便、最易读的方式即可。随着 ES6 的普及，很多时候也可以用展开运算符配合 call 来替代 apply，使得代码风格更加统一。

JavaScriptcallapplythis指向参数传递