JavaScript Prototypes, End to End.

Every object has a parent

In JavaScript, every object has a hidden internal slot called [[Prototype]] — a pointer to another object. When you ask for a property, the engine looks at the object itself, and if it doesn't find it, follows that pointer. And follows the next. Until either it finds the property, or hits null.

The four names for the same thing

What happens when you declare them

Function and class declarations both create constructor functions. Class adds ergonomics and subtle behavior — but the underlying object structure is identical.

When you declare a function

function Dog(name) {
  this.name = name;
}
Dog.prototype.bark = function() {
  console.log(this.name + ' says woof');
};

What new Dog('Rex') actually does

// new Dog('Rex') is roughly equivalent to:
const obj = Object.create(Dog.prototype);  // 1. new object
const result = Dog.call(obj, 'Rex');          // 2. run with this = obj
return (typeof result === 'object' && result !== null)
  ? result : obj;                              // 3. return obj

When you declare a class

class Dog {
  constructor(name) { this.name = name; }
  bark() { console.log(this.name + ' says woof'); }
}

The same three things happen. Dog is still a function. Dog.prototype still exists. bark is placed on Dog.prototype.

Side by side

The full chain of an instance

Once you create an instance, three objects exist in a triangle. The relationships between them are the source of nearly every prototype quiz question.

Why methods live on the prototype

const dogs = [];
for (let i = 0; i < 10000; i++) {
  dogs.push(new Dog('dog' + i));
}
// All 10,000 dogs share the SAME bark function:
dogs[0].bark === dogs[9999].bark  // true

If 10,000 dogs each carried their own copy of bark, that's 10,000 function objects in memory. With prototypes, there's one bark, shared.

Extending the chain

Inheritance is just adding another link to the prototype chain. extends automates what used to take three lines of manual prototype manipulation.

class Animal {
  constructor(name) { this.name = name; }
  eat() { console.log(this.name + ' eats'); }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() { console.log('woof'); }
}

Where prototypes get weird

This is the section that costs people interviews. Each of these has fooled experienced engineers.

class Dog {
  toys = [];   // instance field — OK
}
Dog.prototype.friends = [];  // ⚠ shared by ALL dogs

const rex = new Dog();
const max = new Dog();
rex.friends.push('spot');
console.log(max.friends);  // ['spot'] — wat

const bare = Object.create(null);
bare.toString();    // TypeError

class Dog {
  name = 'Rex';
  bark = () => console.log(this.name);  // instance method
  woof() { console.log(this.name); }    // prototype method
}

arr instanceof Array         // might be false across iframes!
Array.isArray(arr)             // ✓ the safe way

const obj = { a: 1 };
Object.prototype.bad = 'gotcha';
for (const k in obj) console.log(k);  // 'a', then 'bad'