JavaScript中为何使用call()方法？对比直接传参的场景疑问

Great question! Your simple example makes it seem like passing an object as a parameter works just fine—and in that specific case, it does. But call() (and its cousins apply() and bind()) shine in scenarios where dynamic context switching or reusing existing code is critical. Let’s break down the key reasons you’d reach for call() over a plain parameter:

1. Reuse methods from existing objects/prototypes #

Lots of built-in JavaScript methods are designed to operate on this rather than accepting an object as a parameter. For example, if you want to convert an array-like object (like a DOM NodeList or arguments object) to a real array, you can reuse the native Array.prototype.slice method with call():

// A common array-like object (e.g., from document.querySelectorAll)
const nodeList = document.querySelectorAll('div');
// Reuse Array's slice method by binding `this` to nodeList
const realArray = Array.prototype.slice.call(nodeList);

If you tried to pass nodeList as a parameter to slice, it wouldn’t work—slice expects this to be the array it operates on. call() lets you "borrow" the method without rewriting it for array-like objects.

2. Control this in callback functions #

Callbacks (like event listeners or timer functions) often have a default this context that’s not what you want. call() lets you force the callback to use your desired context. For example:

const user = {
  name: 'Chris',
  greet() {
    console.log(`Hey, I'm ${this.name}!`);
  }
};

// If we just pass user.greet to the listener, `this` will be the button element
const button = document.querySelector('button');
button.addEventListener('click', () => user.greet.call(user));

If you rewrote greet to accept a person parameter, you’d have to pass user every time you call it—even when you’re calling it directly on the user object (user.greet(user)), which feels redundant and breaks the natural object-oriented pattern.

3. Adapt to APIs that expect this to be a specific object #

Many libraries and native APIs are built around this context. For example, if you have a class method that’s designed to use this for its properties, you can reuse that method on another object without redefining it:

class Person {
  constructor(name) {
    this.name = name;
  }

  introduce() {
    console.log(`I'm ${this.name}, nice to meet you!`);
  }
}

const chris = new Person('Chris');
const alex = { name: 'Alex' };

// Use Person's introduce method on alex, even though alex isn't a Person instance
chris.introduce.call(alex); // Outputs: I'm Alex, nice to meet you!

Changing introduce to accept a person parameter would require modifying the class’s design, which isn’t always feasible (especially if it’s a third-party library class).

4. Maintain clean, object-oriented code #

In OOP, methods are meant to operate on the object they belong to—using this is the standard way to access the object’s properties. If you pass the object as a parameter every time, you end up with verbose, repetitive code:

// Less clean: passing the object every time
const sayName = (person) => console.log(person.name);
sayName(chris);
sayName(alex);

// Cleaner: using methods tied to `this`
chris.introduce();
alex.introduce.call(alex); // Or use bind for a reusable function

call() lets you keep your methods focused on their object’s properties, without cluttering them with extra parameters.

To circle back to your original example: yes, passing person1 as a parameter works for that simple function. But when you’re working with existing methods, callbacks, or OOP patterns, call() becomes an indispensable tool for dynamic context control and code reuse.

内容的提问来源于stack exchange，提问作者Christopher Hill