JavaScript Prototypes & Inheritance Cheat Sheet

Covers the prototype chain, constructor functions, ES6 class syntax, and Object.create for building inheritance in JavaScript.

1 PageAdvancedApr 2, 2026

The Prototype Chain

Property lookups walk up the chain until found.

javascript

const animal = {  eats: true,  walk() { return "walking"; },};const rabbit = Object.create(animal);   // rabbit's prototype is animalrabbit.jumps = true;rabbit.eats;    // true -- found on animal via the prototype chainrabbit.walk();  // "walking" -- inherited methodObject.getPrototypeOf(rabbit) === animal;   // true// Every object chain ends at Object.prototype, then nullObject.getPrototypeOf(Object.prototype);   // null

Constructor Functions

The pre-ES6 way to build objects with shared methods.

javascript

function Animal(name) {  this.name = name;}// Methods go on the prototype so all instances share one copyAnimal.prototype.speak = function () {  return `${this.name} makes a sound`;};const dog = new Animal("Rex");dog.speak();                          // "Rex makes a sound"dog instanceof Animal;                // truedog.__proto__ === Animal.prototype;   // true (legacy accessor)

ES6 Classes (Syntactic Sugar)

Classes still use prototypes under the hood.

javascript

class Animal {  constructor(name) {    this.name = name;  }  speak() {    return `${this.name} makes a sound`;  }}class Dog extends Animal {  constructor(name, breed) {    super(name);            // Calls Animal's constructor    this.breed = breed;  }  speak() {    return `${super.speak()} (woof!)`;   // Extend, not just override  }}const rex = new Dog("Rex", "Lab");rex.speak();               // "Rex makes a sound (woof!)"rex instanceof Animal;     // true -- classes still use prototypes under the hood

Object.create & Prototypal Patterns

Build objects with an explicit prototype.

javascript

const proto = {  greet() { return `Hi, I'm ${this.name}`; },};const person = Object.create(proto, {  name: { value: "Alice", enumerable: true },});person.greet();   // "Hi, I'm Alice"// Check own vs inherited propertiesperson.hasOwnProperty("name");   // trueperson.hasOwnProperty("greet");  // false (inherited)Object.create(null);   // Object with no prototype at all -- no inherited methods

Key Concepts

Core vocabulary for prototype-based inheritance.

[[Prototype]]- Internal slot every object has, accessed via Object.getPrototypeOf() or __proto__
prototype- Property on functions/classes; becomes the [[Prototype]] of instances created with new
instanceof- Checks whether a constructor's prototype appears anywhere in an object's chain
class- Syntactic sugar over prototype-based inheritance, not a separate object model
extends / super- Sets up the prototype chain between classes and calls the parent constructor/method
Object.setPrototypeOf()- Changes an existing object's prototype (slow -- prefer Object.create at creation time)

Pro Tip

Defining methods inside a constructor function (this.speak = function(){}) creates a new function per instance; put shared behavior on the prototype (or use class methods, which do this automatically) to save memory.

Was this cheat sheet helpful?

JavaScript Closures Cheat Sheet

JavaScript Event Loop Cheat Sheet

Explore Topics

#JavaScriptPrototypesInheritance#JavaScriptPrototypesInheritanceCheatSheet#Programming#Advanced#ThePrototypeChain#ConstructorFunctions#ES6#Classes#OOP#Functions#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services