JavaScript数组方法为何可链式调用？原理是什么？

Great question — you’re already connecting the dots on method chaining, so let’s clarify exactly why these array methods work the way they do.

First, let’s recap the type of chaining you initially learned: when a method returns this, you’re operating on the same object instance the whole time. For example, a custom class might look like this:

class Car {
  setColor(color) {
    this.color = color;
    return this; // Return the same car instance
  }
  setYear(year) {
    this.year = year;
    return this; // Return the same instance again
  }
}

const myCar = new Car().setColor("red").setYear(2024);

Here, every method call returns the exact same Car object, so you can keep calling its methods in a chain.

Now, what about array methods like .map? #

Your guess is spot-on! These methods don’t return this (the original array), but they return a new Array instance. And since this new array inherits from Array.prototype, it has access to all the same array methods (map, filter, reduce, etc.) as the original.

Let’s break down a concrete example:

const numbers = [1, 2, 3];
const result = numbers
  .map(x => x * 2) // Returns [2, 4, 6] — a NEW array
  .filter(x => x > 3) // Calls filter on the NEW array, returns [4, 6]
  .reduce((sum, num) => sum + num, 0); // Calls reduce on that array, returns 10

• The first map call takes the original numbers array, processes it, and spits out a brand-new array.
• That new array is still an Array object, so its prototype chain includes Array.prototype — meaning filter is available to call on it.
• filter then returns another new array, which again has access to reduce, and so on.

Key difference between the two chaining styles #

• Returning this: Modifies and reuses the same object instance (great for mutating an object’s state step-by-step).
• Array method chaining: Each step returns a new instance of the same type (Array), leaving the original array untouched. These are "pure functions" that transform data without side effects, perfect for data pipelines.

To drive this home, let’s make our own array method that supports chaining:

// Add a custom method to Array.prototype that returns a new array
Array.prototype.triple = function() {
  return this.map(x => x * 3); // Return a new array, not this
};

// Chain it with built-in methods
const chainedResult = [1, 2, 3].triple().filter(x => x > 5);
console.log(chainedResult); // [6, 9]

Since triple returns a new Array, we can immediately call filter on it — just like with map or filter themselves.

Final takeaway #

Chaining doesn’t require returning this — it just requires that each method returns an object that has the next method you want to call. For array methods, since they return new Array instances (which inherit all Array prototype methods), the chain stays unbroken.

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