Skip to main content

Prototype

Prototype = inheritance mechanism in JavaScript

What is Prototype?​

"Objects inherit from prototypes"

JavaScript uses prototype-based inheritance where objects inherit properties and methods from other objects.

"Prototypes are the mechanism by which JavaScript objects inherit features from other objects, enabling prototype-based inheritance."

Prototype Chain​

Object → Prototype → Prototype → null

const obj = {};
// obj → Object.prototype → null

Every object has a link to a prototype object.

"The prototype chain allows objects to access properties and methods from their prototype, creating an inheritance chain."

proto vs prototype​

**proto = instance link, prototype = constructor property**

PropertyOnPurpose
__proto__InstanceLink to prototype
prototypeConstructorDefines prototype for instances
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  return `Hello, ${this.name}`;
};

const john = new Person("John");
john.__proto__ === Person.prototype; // true

"proto is the instance's link to its prototype, while prototype is the constructor's property that defines what instances inherit."

Constructor Functions​

Function + new = instance with prototype

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

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

const john = new Person("John");
john.sayHello(); // Uses prototype method

"Constructor functions create instances that inherit from the constructor's prototype property."

Object.create()​

Create object with specific prototype

const animal = {
  makeSound() {
    console.log("Sound");
  },
};

const dog = Object.create(animal);
dog.makeSound(); // Inherited

"Object.create creates a new object with a specified prototype, enabling prototype-based inheritance."

hasOwnProperty()​

Check if property is own, not inherited

const obj = { name: "John" };
obj.hasOwnProperty("name"); // true
obj.hasOwnProperty("toString"); // false (inherited)

"hasOwnProperty checks if a property belongs to the object itself, not inherited from prototype."

Prototype Inheritance​

Child inherits from parent

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function () {
  console.log(`${this.name} eats`);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function () {
  console.log("Woof!");
};

"Prototype inheritance allows child constructors to inherit from parent constructors by setting up the prototype chain."

ES6 Classes​

Syntactic sugar over prototypes

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

  eat() {
    console.log(`${this.name} eats`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

Classes are syntactic sugar - they still use prototypes under the hood.

"ES6 classes are syntactic sugar over prototype-based inheritance, making it more familiar to developers from class-based languages."

Method Overriding​

Child can override parent methods

class Animal {
  makeSound() {
    console.log("Generic sound");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof!"); // Overrides parent
    super.makeSound(); // Call parent
  }
}

"Child classes can override parent methods, and use super to call the parent method."

Prototype vs Class​

Prototype = underlying, Class = syntax

  • Classes compile to prototype-based code
  • Both achieve inheritance
  • Classes are easier to read
  • Prototypes are more flexible

"Classes provide cleaner syntax, but JavaScript still uses prototype-based inheritance under the hood."

"JavaScript uses prototype-based inheritance where objects inherit from prototypes. The prototype chain allows property lookup up the chain. Constructor functions use the prototype property, instances use proto. Object.create creates objects with specific prototypes. ES6 classes are syntactic sugar over prototypes. hasOwnProperty distinguishes own properties from inherited ones."

🧠 Ultra-Short Cheat Sheet​

Prototype-based inheritance
Prototype chain
__proto__ (instance)
prototype (constructor)
Object.create()
hasOwnProperty()
ES6 classes = syntactic sugar
Method overriding