The Core Difference: Objects and Prototypes

Many programming languages, like C# or Java, are described as object-oriented, supporting the Object-Oriented Programming (OOP) paradigm. JavaScript, however, is typically labeled a prototype-oriented language. This distinction is crucial. While it deals with objects, the mechanism for inheritance and object creation fundamentally differs from class-based languages. In class-based systems, classes serve as blueprints. Objects are instantiated from these classes, inheriting properties and methods directly. JavaScript, in contrast, does not have classes in the traditional sense. Instead, it relies on a chain of existing objects. When you try to access a property or method on an object, JavaScript first looks at the object itself. If it doesn't find it, it looks at the object's prototype. This process continues up a chain until the property or method is found or the end of the chain (null) is reached.

This prototype-based approach means that inheritance in JavaScript is not about copying properties from a class to an instance. It's about linking objects together. An object can inherit properties and methods from another object, its prototype. This creates a chain of delegation. When a method is called on an object, JavaScript searches up this chain, executing the method on the first object in the chain that possesses it. This is different from class-based inheritance where methods are typically copied or referenced from the class definition to the instance.

How Prototypes Work in Practice

Consider a simple object literal in JavaScript:


const person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

When you create this object, JavaScript automatically assigns it a prototype. In most modern JavaScript environments, this prototype will be Object.prototype. This is the base of the prototype chain for most objects created via literals or the Object.create() method. If you were to call person.toString(), JavaScript wouldn't find that method directly on the person object. It would look up its prototype chain, find toString() on Object.prototype, and execute it.

To illustrate inheritance, let's use Object.create(). This method allows you to create a new object, specifying its prototype:


const programmer = Object.create(person);
programmer.language = "JavaScript";

programmer.greet = function() {
  console.log(`Hello, my name is ${this.name} and I code in ${this.language}`);
};

programmer.greet(); // Output: Hello, my name is Alice and I code in JavaScript

Here, programmer is created with person as its prototype. When programmer.greet() is called, JavaScript finds the method directly on the programmer object. However, if we tried to access programmer.name, JavaScript would look at programmer, not find it, then look at its prototype (person), find name there, and return "Alice". This is delegation in action. The programmer object delegates the lookup of the name property to its prototype, person.

The Constructor Function and `__proto__`

Before ES6 introduced classes, constructor functions were the primary way to create object blueprints. A constructor function is essentially a regular function that is invoked with the new keyword. When you call a function with new, JavaScript creates a new empty object, sets this new object's prototype to the function's prototype property, and then calls the function with this bound to the new object.


function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const john = new Person("John", 30);
john.sayHello(); // Output: Hello, I'm John
console.log(john.__proto__ === Person.prototype); // Output: true

In this example, Person.prototype is an object that serves as the prototype for all objects created by the Person constructor. The john object has a hidden internal property, often referred to as __proto__ (though direct manipulation of __proto__ is discouraged in favor of Object.getPrototypeOf() and Object.setPrototypeOf()), which points to Person.prototype. This creates the inheritance chain. Any properties or methods defined on Person.prototype are accessible to instances created with new Person().

The surprising detail here is that even though john is an instance of Person, it doesn't contain its own copy of the sayHello method. Instead, it references it through its prototype chain. This is a key efficiency: if you create thousands of objects using the same constructor, they all share a single instance of the methods defined on the prototype, rather than each object having its own duplicate copy.

ES6 Classes: Syntactic Sugar

The introduction of the class keyword in ECMAScript 2015 (ES6) was a significant addition to JavaScript. However, it's crucial to understand that classes in JavaScript are primarily syntactic sugar over the existing prototype-based inheritance model. They do not introduce a new object-oriented inheritance model distinct from prototypes.


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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // Calls the parent class constructor
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.
console.log(dog instanceof Animal); // Output: true
console.log(dog.__proto__ === Dog.prototype); // Output: true
console.log(Dog.prototype.__proto__ === Animal.prototype); // Output: true

When you define a class like Dog that extends Animal, JavaScript sets up the prototype chain behind the scenes. Dog.prototype's prototype is set to Animal.prototype. The extends keyword and the super() call manage the creation and linking of these prototypes. Therefore, a Dog instance inherits from Dog.prototype, which in turn inherits from Animal.prototype. This is the same fundamental mechanism as constructor functions, but expressed with a syntax that is more familiar to developers coming from class-based languages.

The Power and Nuances of Prototypes

Understanding JavaScript's prototype system offers significant advantages. It provides a flexible and powerful way to manage object relationships and inheritance. It's less about rigid class definitions and more about dynamic object composition and delegation. This model can be more memory-efficient, as methods and properties are shared across instances via the prototype chain rather than being duplicated.

However, this model can also lead to confusion for developers accustomed to classical inheritance. Pitfalls can arise from misunderstanding how this behaves, how prototypes are modified at runtime (which affects all instances inheriting from that prototype), and the exact order of property lookups. The flexibility of prototypes means that the inheritance structure is not fixed at compile time but can be altered dynamically.

The core takeaway is that JavaScript's inheritance is object-to-object. Objects inherit from other objects through a chain of prototypes. This is not a limitation but a fundamental design choice that underpins JavaScript's dynamic nature and its unique approach to object-oriented programming.