Prototype

Explanation

Every JavaScript object has an internal [[Prototype]] slot pointing to another object (its prototype), or null if it's at the top of the chain. When you access a property, JavaScript checks the object first, then its prototype, then the prototype's prototype, all the way up to Object.prototype (which has methods like toString, hasOwnProperty, valueOf), then null — if not found anywhere, returns undefined. Functions have a prototype property (not the internal [[Prototype]], but an explicit .prototype object). When you call new MyFunction(), JavaScript creates a new object and sets its [[Prototype]] to MyFunction.prototype. All instances created with new MyFunction() share the same prototype object — that's how methods defined on the prototype are shared across instances without being duplicated per instance. ES6 classes are syntactic sugar over this prototype mechanism. class Animal {} creates a constructor function Animal; methods defined in the class body are added to Animal.prototype. extends sets up a prototype chain: Dog.prototype's [[Prototype]] is set to Animal.prototype. Object.getPrototypeOf(rex) === Dog.prototype is true; Object.getPrototypeOf(Dog.prototype) === Animal.prototype is true. Object.create(proto) creates a new object with proto as its [[Prototype]]. This is the low-level API for prototype-based inheritance without classes. Object.create(null) creates an object with NO prototype — useful for dictionaries where you don't want inherited properties like toString to interfere.

Code Example

// Prototype chain mechanics

// Every object's prototype chain ends at Object.prototype
const obj = { name: 'Alice' };
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true
console.log(obj.hasOwnProperty('name')); // inherited from Object.prototype

// Constructor functions and prototypes (pre-class syntax)
function Animal(name) {
  this.name = name; // instance property
}
Animal.prototype.speak = function() { // shared method on prototype
  return `${this.name} makes a sound`;
};

const cat = new Animal('Cat');
console.log(cat.speak()); // found on Animal.prototype
console.log(cat.hasOwnProperty('speak')); // false — it's on the prototype

// class syntax — identical behavior, cleaner code
class AnimalClass {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
  // speak is on AnimalClass.prototype, NOT on each instance
}

// Prototype chain for inheritance
class Dog extends AnimalClass {
  bark() { return `${this.name} barks`; }
}

const d = new Dog('Rex');
// d → Dog.prototype → AnimalClass.prototype → Object.prototype → null
console.log(Object.getPrototypeOf(Object.getPrototypeOf(d)) === AnimalClass.prototype); // true

Why It Matters for Engineers

Understanding prototypes explains why class-based JavaScript code works the way it does. When a method isn't found on an instance (undefined) but you're sure the class defines it, prototype chain knowledge tells you to check whether the method is on the class prototype or accidentally on the instance, and whether the inheritance chain is set up correctly. Prototype knowledge is also directly tested in JavaScript interviews. "What's the difference between __proto__ and prototype?" and "How does JavaScript inheritance work under the hood?" are classic interview questions where prototype chain understanding is required.