Introduction to Prototype-Based Inheritance

JavaScript uses a prototype-based inheritance model, which differs significantly from class-based inheritance found in languages like Java or C++. Understanding prototypes is essential for mastering JavaScript's object-oriented features.

Constructor Functions and Prototype Properties

When you define a constructor function, JavaScript automatically creates a prototype object associated with that function. The constructor function gains a prototype property that points to this prototype object. Instance objects created with the constructor have a __proto__ property (now standardized as [[Prototype]]) that referneces the prototype object.

Consider this example demonstrating instance properties, prototype methods, and static members:

function Vehicle(brand) {
  this.brand = brand;
}

Vehicle.prototype.drive = function () {
  console.log("Driving the " + this.brand);
};

Vehicle.wheelCount = 4;
Vehicle.describe = function () {
  console.log("This is a vehicle class");
};

function Car(brand, model) {
  Vehicle.call(this, brand);
  this.model = model;
}

Car.prototype = Object.create(Vehicle.prototype);
Object.defineProperty(Car.prototype, 'constructor', {
  value: Car,
  enumerable: false
});

Car.prototype.honk = function () {
  console.log("Beep beep!");
};

// Static inheritance
Car.__proto__ = Vehicle;
Car.category = 'sedan';
Car.transport = function () {
  console.log("Transporting passengers");
};

// Test static members
console.dir(Car);
console.log(Car.wheelCount);
Car.describe();
console.log(Car.category);
Car.transport();

// Test instance members
let myCar = new Car('Toyota', 'Camry');
console.log(myCar.brand);
myCar.drive();
console.log(myCar.model);
myCar.honk();

Key principles from this example:

• Instance properties belong to the object itself and are defined within the constructor
• Shared methods are placed on the prototype object for memory efficiency
• Static members belong to the constructor function itself
• Use Function.call() or Function.apply() to inherit instance properties
• Use Object.create() to inherit prototype methods
• Always reset the constructor property when reassigning a prototype

The Prototype Chain

When accessing a property on an object, JavaScript follows a specific lookup process. First, it searches the object itself. If the property exists there, it returns immediately. If not found, JavaScript continues searching up the prototype chain via the __proto__ reference until reaching Object.prototype, which is the顶层 of all prototype chains.

The following code demonstrates prototype chain traversal:

console.log(myCar.__proto__ === Car.prototype);
console.log(myCar.__proto__.__proto__ === Vehicle.prototype);
console.log(myCar.__proto__.__proto__.__proto__ === Object.prototype);
console.log(myCar.__proto__.__proto__.__proto__.__proto__);

Each __proto__ traversal moves up one level in the prototype chain. The final traversal reaches null, indicating the end of the chain.

The prototype chain enables dynamic property inheritance and method sharing across all instances. Modifications to the prototype object are immediately visible to all instances that reference it, making prototypes a powerful mechanism for implementing inheritance and shared behavior.

Defining Prototype Objects

When replacing a constructor's prototype object entirely, you must manually add the constructor property to maintain the bidirectional relationship between the constructor and its prototype. Failure to do so breaks the standard prototype chain pattern.

function Device(name) {
  this.name = name;
}

Device.prototype = {
  constructor: Device,
  setName: function (newName) {
    this.name = newName;
  },
  getName: function () {
    return this.name;
  }
};

let gadget = new Device('Smartphone');
console.log(gadget.getName());
gadget.setName('Tablet');
console.log(gadget.getName());

An important caveat: built-in constructor prototypes (such as Array.prototype or Object.prototype) are read-only in most JavaScript environments. Attempting to replace them directly will not work and may cause unexpected behavior or errors. Instead, modify their properties or use Object.create() to create custom prototype chains.

Best Practices

When working with prototypes, keep these guidelines in mind: Always reset the constructor property after assigning a new prototype object. Use Object.create() for prototype inheritance to maintain proper prototype chain structure. Access prototype members only after establishing the prototype relationship. Be cautious with for...in loops, as they iterate over inherited properties from the prototype chain unless you use hasOwnProperty() checks.

Understanding prototypes provides deeper insight into JavaScript's object model and enables more sophisticated patterns for code organization and reuse. While ES6 classes provide syntactic sugar over this prototype-based system, the underlying mechanics remain essential knowledge for any JavaScript developer.