Prototypes in JavaScript — Prototype Chain Guide

Prototypes

Prototype in JavaScript is one of the most important concepts that every JavaScript developer must know. In this tutorial, we will discuss what prototypes are in JavaScript, and how they help JavaScript achieve object-oriented programming concepts. To understand this tutorial, you should first understand JavaScript classes and objects.

Conventional JavaScript doesn't have class instead it has prototypes. Whenever we create a function using JavaScript, then JavaScript engine adds a prototype property inside a function, and this prototype property is known as the Prototype object. We can easily attach methods and properties to a prototype object, which enables all the other objects to inherit these methods and properties.

example

function Student() {
	this.name = 'Uttam';
	this.gender = 'Male';
}

var studentObject1 = new Student();
studentObject1.age = 25;
console.log(studentObject1.age); // 25

var studentObject2 = new Student();
console.log(studentObject2.age); // undefined

In the above example, age property is attached to studentObject1 instance, so studentObject2 instance will not have age property because it is defined only on studentObject1 instance. If we want to add new properties at later stage to a function which will be shared across all the instances, then we have set the properties using prototype.

example

function Student() {
	this.name = 'Uttam';
	this.gender = 'Male';
}

Student.prototype.age = 25;

var studentObject1 = new Student();
console.log(studentObject1.age); // 25

var studentObject2 = new Student();
console.log(studentObject2.age); // 25

Prototype Chain

Every JavaScript object has a hidden [[Prototype]] link. When you access a property, JavaScript first looks at the object itself, then walks up the prototype chain until it finds the property or reaches null.

Prototype Chain

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a sound.`;
};

function Dog(name, breed) {
  Animal.call(this, name); // inherit properties
  this.breed = breed;
}
// Set up prototype chain
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  return `${this.name} barks!`;
};

const dog = new Dog('Rex', 'Labrador');
console.log(dog.speak()); // Rex makes a sound.  (from Animal.prototype)
console.log(dog.bark());  // Rex barks!           (from Dog.prototype)
console.log(dog instanceof Dog);    // true
console.log(dog instanceof Animal); // true

// Check prototype chain
console.log(Object.getPrototypeOf(dog) === Dog.prototype);    // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true

Adding Methods to Built-in Prototypes

You can extend built-in types like Array or String via their prototypes, though this is generally discouraged in production code to avoid conflicts.

Extending Prototypes

// Adding a method to Array prototype
Array.prototype.sum = function() {
  return this.reduce((total, n) => total + n, 0);
};
console.log([1, 2, 3, 4, 5].sum()); // 15

// Adding a method to String prototype
String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
};
console.log('hello world'.capitalize()); // Hello world

// ES6 class syntax (uses prototypes under the hood)
class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  describe() {
    return `${this.make} ${this.model}`;
  }
}
class Car extends Vehicle {
  constructor(make, model, doors) {
    super(make, model);
    this.doors = doors;
  }
  info() {
    return `${this.describe()} with ${this.doors} doors`;
  }
}
const car = new Car('Toyota', 'Camry', 4);
console.log(car.info()); // Toyota Camry with 4 doors

Key Takeaways

Every JavaScript object has a [[Prototype]] - a link to another object from which it inherits properties.
The prototype chain ends at Object.prototype, whose [[Prototype]] is null.
Use Object.create(proto) to set up prototype inheritance without calling the constructor.
ES6 class syntax is syntactic sugar over prototype-based inheritance - it uses prototypes under the hood.
hasOwnProperty() checks if a property belongs to the object itself, not inherited from the prototype.
Avoid modifying built-in prototypes (Array, String, etc.) in production - it can cause conflicts with libraries.