JavaScript Prototype Pattern (Prototype chain & Prototypical Inheritance)

In short “Prototype pattern is a pattern by which we can Share properties among many objects of the same type”

🔥 I have published an In Depth “React Native Advanced Guide Book” which secured ≈1000 GitHub STAR. (Free Book Link)

The prototype pattern is a useful way to share properties among many objects of the same type. The prototype is an object that’s native to JavaScript, and can be accessed by objects through the prototype chain.

In our applications, we often have to create many objects of the same type. A useful way of doing this is by creating multiple instances of an ES6 class.

Let’s say we want to create many dogs! In our example, dogs can’t do that much: they simply have a name, and they can bark!

class Dog {
  constructor(name) {
    this.name = name;
  }
 
  bark() {
    return `Woof!`;
  }
}
 
const dog1 = new Dog("Daisy");
const dog2 = new Dog("Max");
const dog3 = new Dog("Spot");

Notice here how the constructor contains a name property, and the class itself contains a bark property. When using ES6 classes, all properties that are defined on the class itself, bark in this case, are automatically added to the prototype.

As we already know that all child objects that are created from a Class, will inherit all the properties of the class those are under the object prototype . After inherit, all the newly created objects will have all the properties from Class prototype to their __proto__ property. See details in my article JavaScript prototype & __proto__ (Prototypical Inheritance) . This is why the method bark() will be added auto to the prototype of the class Dog.

Prototype Chain

So, the value of __proto__ on any child object of the Class (Constructor function), is a direct reference to the Class prototype! Whenever we try to access a property on an object that doesn’t exist on the object directly, JavaScript will go down the prototype chain to see if the property is available within the prototype chain.

That means if not found a property on an object __proto__ then JS will search that property on it’s parent’s property prototype.

Use-case of Prototype Pattern

The prototype pattern is very powerful when working with objects that should have access to the same properties. Instead of creating a duplicate of the property each time, we can simply add the property to the prototype, since all instances have access to the prototype object.

Since all instances have access to the prototype, it’s easy to add properties to the prototype even after creating the instances. Suppose, if you already created 3 objects A, B, and C from class MyClass. Then you feel you need to create more 5 objects of class MyClass in future. Also you feel that all the instances (objects) of MyClass must have a new property “country”. Then if you just add the “country” property in MyClass prototype, it will be a very good & efficient solution and also “country” will be auto inherited by all previously created objects A, B and C. Also all future instances will have this “country” property.

Let’s say that our dogs shouldn’t only be able to bark, but they should also be able to play! We can make this possible by adding a play property to the prototype.

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

  bark() {
    return `Woof!`;
  }
}

const dog1 = new Dog("Daisy");
const dog2 = new Dog("Max");
const dog3 = new Dog("Spot");

Dog.prototype.play = () => console.log("Playing now!");

dog1.play();

The term prototype chain indicates that there could be more than one step.

However, prototypes themselves also have a __proto__ object! 👇

Prototypical Inheritance

Let’s create another type of dog, a super dog! This dog should inherit everything from a normal Dog, but it should also be able to fly. We can create a super dog by extending the Dog class and adding a fly method.

class SuperDog extends Dog {
  constructor(name) {
    super(name);
  }
 
  fly() {
    return "Flying!";
  }
}

Let’s create a flying dog called Daisy, and let her bark and fly!

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

  bark() {
    console.log("Woof!");
  }
}

class SuperDog extends Dog {
  constructor(name) {
    super(name);
  }

  fly() {
    console.log(`Flying!`);
  }
}

const dog1 = new SuperDog("Daisy");
dog1.bark();
dog1.fly();

In above, we have access to the bark method, as we extended the Dog class. The value of __proto__ on the prototype of SuperDog points to the Dog.prototype object! This is because of Prototypical Inheritance. See bellow (This bellow Superdog.prototype basically gives us the name of __proto__ of Superdog) 👇

See visually from bellow 👇

It gets clear why it’s called a prototype chain: when we try to access a property that’s not directly available on the object, JavaScript recursively walks down all the objects that __proto__ points to, until it finds the property!

Object.create()

The Object.create method lets us create a new object, to which we can explicitly pass the value of its prototype.

const dog = {
  bark() {
    return `Woof!`;
  },
};
 
const pet1 = Object.create(dog);

Although pet1 itself doesn't have any properties, it does have access to properties on its prototype chain! Since we passed the dog object as pet1's prototype, we can access the bark property.

const dog = {
  bark() {
    console.log(`Woof!`);
  }
};

const pet1 = Object.create(dog);

pet1.bark(); // Woof!
console.log("Direct properties on pet1: ", Object.keys(pet1));
console.log("Properties on pet1's prototype: ", Object.keys(pet1.__proto__));

Output bellow 👇

Perfect! Object.create is a simple way to let objects directly inherit properties from other objects, by specifying the newly created object's prototype. The new object can access the new properties by walking down the prototype chain.

Benefits of → Prototypical Inheritance

The prototype pattern allows us to easily let objects access and inherit properties from other objects. Since the prototype chain allows us to access properties that aren’t directly defined on the object itself, we can avoid duplication of methods and properties, thus reducing the amount of memory used.

Recommendation to Read

Read my another article on JavaScript prototype & __proto__: https://medium.com/@anisurrahmanbup/javascript-prototype-proto-prototypical-inheritance-5e2d7584140d

Thank you for reading this article. I enjoy sharing my 5 years of experience in JavaScript, React, React-native & Node.js with you every day.

If you enjoyed reading this article, I would appreciate it if you could follow me on Twitter & Medium. You can also leave your feedback and comments there. Thank you for your support and interest.