JavaScript Prototypal Inheritance

Q: What exactly is the prototype chain in JavaScript?

Every JavaScript object holds an internal link pointing to a prototype object. Property lookups walk up this chain recursively until they locate a matching property or reach null.

Q: How does Object.getPrototypeOf differ from legacy __proto__?

The __proto__ property is a deprecated legacy accessor. The Object.getPrototypeOf() method is the modern, standardized interface. You should use the functional methods in production code.

Q: Is JavaScript class syntax fundamentally different from prototypes?

No, it is not. The class keyword compiles to a standard constructor function. Methods declared in classes sit directly on the constructor's prototype object at runtime.

Q: What is property shadowing in prototypal scope?

Shadowing occurs when an object defines a property matching the name of a prototype property. The object's own property overrides the lookup value without altering the prototype itself.

Q: How do I check if a property is defined directly on an object?

Use the Object.hasOwn(obj, prop) method. This returns true if the property exists directly on the target instance. It returns false for inherited prototype properties.

Understand the prototype chain, Object.create, and how class syntax wraps prototypal inheritance.

TL;DR

01Inherit object properties dynamically through a linked chain of prototypes.
02Construct prototype linkages directly using the standard Object.create method.
03Use modern class declarations as syntactic sugar over prototype chains.

Jump to section

#The Prototype Chain
#Creating Prototypes
#Constructor prototype
#Class Sugar
#Property Shadowing

Tips

01Use the standard Object.getPrototypeOf() method instead of legacy properties like __proto__ to inspect prototypes.
02Verify own object properties explicitly using Object.hasOwn() before accessing inherited properties.

Warnings

01Avoid setting object prototypes dynamically using Object.setPrototypeOf because it degrades property access performance.
02Filter properties inside for...in loops to prevent iteration leaks from inherited enumerable method names.

The Prototype Chain

Prototype linkage

Links objects together in a prototype chain for sharing property values.

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;
console.log(rabbit.eats); // true

Chain lookup rules

Walks up prototype chains until matching properties are found.

// Lookup: rabbit -> animal -> Object.prototype

Chain end

Ends prototype search trees at Object.prototype, which has null prototype.

const proto = Object.getPrototypeOf(
  Object.prototype
);
console.log(proto); // null

Creating Prototypes

Object.create

Creates new object instances with explicit prototype mappings.

const base = { greet() { return "hi"; } };
const obj = Object.create(base);
console.log(obj.greet()); // "hi"

Inspecting prototypes

Inspects prototype references using getPrototypeOf cleanly.

Object.getPrototypeOf(obj) === base; // true

Inheritance without classes

Models inheritance associations directly without requiring constructors.

const parent = { val: 42 };
const child = Object.create(parent);

Constructor prototype

Constructor functions

Attaches shared functions directly to constructor prototype properties.

function Dog(name) { this.name = name; }
Dog.prototype.bark = function() {
  return `${this.name} barks`;
};
const rex = new Dog("Rex");

Memory optimization

Shares method references across all constructed instances.

// rex.bark links to Dog.prototype.bark

instanceof verification

Confirms prototype links exist in target instance chains.

console.log(rex instanceof Dog); // true

Class Sugar

class keyword

Compiles class helper blocks to standard prototypes.

class Dog {
  constructor(name) { this.name = name; }
  bark() { return `${this.name} barks`; }
}
typeof Dog; // "function"

Subclass extends

Sets up prototype chains between parent and child automatically.

class Puppy extends Dog {
  bark() { return super.bark() + "!"; }
}

Property Shadowing

hasOwn check

Checks property existence directly on the local object instance.

const base = { color: "red" };
const item = Object.create(base);
console.log(Object.hasOwn(item, "color")); // false

Property overrides

Shadows prototype property definitions by setting local values.

item.color = "blue";
console.log(item.color); // "blue"
console.log(base.color); // "red"

In Practice

Compiling Class Inheritance to Prototypes

Demonstrates how modern ES6 classes are transformed into prototype constructors under the hood.

01Create a base constructor function to assign user properties.
02Attach the login method to the user constructor prototype.
03Create a subclass admin constructor calling the parent constructor context.
04Bind the admin prototype to a new object inheriting from the user prototype.
05Reset the admin constructor reference to point to itself correctly.

function createCompilledClass() {
  function User(name) {
    this.name = name;
  }

  User.prototype.login = function() {
    return this.name + " logged in";
  };

  function Admin(name, role) {
    User.call(this, name);
    this.role = role;
  }

  Admin.prototype = Object.create(
    User.prototype
  );
  Admin.prototype.constructor = Admin;

  return { User, Admin };
}

FAQ

What exactly is the prototype chain in JavaScript?

How does Object.getPrototypeOf differ from legacy __proto__?

Is JavaScript class syntax fundamentally different from prototypes?

What is property shadowing in prototypal scope?

How do I check if a property is defined directly on an object?