扩展JavaScript对象为何需要prototype？Array实例为何不能直接调用forEach？

Hey there! Great question—this is such a common point of confusion when coming from class-based OOP languages to JavaScript's prototype-driven model. Let's break this down step by step.

First: The Difference Between Constructors and Instances #

Let's start with the core distinction:

• Array is a constructor function (or in ES6 terms, a "class" syntax sugar) that creates array instances.
• Something like const myArr = [1, 2, 3] is an instance of Array.

When you call myArr.forEach(...), you're calling a method that belongs to that specific instance's prototype chain—not directly to the Array constructor itself.

Why Use prototype? #

JavaScript uses prototypes to enable shared behavior and inheritance without wasting memory. Here's the key:

• If every array instance had its own copy of forEach, map, filter, etc., we'd be duplicating tons of code in memory for every array we create.
• By attaching these methods to Array.prototype, every array instance shares the exact same method reference. When you call myArr.forEach(), JavaScript looks up the method in the instance's prototype chain (starting with myArr.__proto__, which points to Array.prototype) and runs it with this bound to myArr.

This is JavaScript's version of "class inheritance"—but instead of classes defining methods directly, prototypes act as the shared blueprint for all instances.

Why Can't You Call Array.forEach() Directly? #

Short answer: Because forEach isn't a property of the Array constructor—it's a property of Array.prototype.

Think of it this way:

• Methods on the prototype are designed to operate on instances of the constructor. They rely on this to access the instance's data (like the elements in an array).
• If you tried to call Array.forEach(), there's no bound this pointing to a specific array, so the method wouldn't have any elements to iterate over.

That said, you can invoke the prototype method on non-instances using call or apply if you need to:

// Iterate over a class-like array (e.g., arguments object)
Array.prototype.forEach.call(arguments, (item) => console.log(item));

Connecting to Class-Based OOP #

Your intuition about inheritance is spot-on! In JavaScript:

• Array.prototype inherits from Object.prototype (so all arrays get access to toString, hasOwnProperty, etc.).
• When you create an array instance, its internal __proto__ link points to Array.prototype. This is JavaScript's way of saying "this instance inherits behavior from the Array blueprint."

ES6 class syntax makes this look more like traditional OOP, but it's just sugar over prototypes:

class MyArray extends Array {
  // This method gets added to MyArray.prototype
  customMethod() {
    return this.map(x => x * 2);
  }
}

Quick Example to Drive It Home #

Let's make our own constructor to see the difference:

// ❌ Wasteful: Each Person instance gets its own sayHello method
function Person(name) {
  this.name = name;
  this.sayHello = () => console.log(`Hi, I'm ${this.name}`);
}

// ✅ Efficient: All Person instances share the same sayHello method
function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hi, I'm ${this.name}`);
};

In the second example, no matter how many Person instances you create, there's only one copy of sayHello in memory—attached to Person.prototype.

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