prototype-pattern

Prototype Pattern

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.

When to Use

• Use this when many objects need access to the same methods without duplicating them
• This is helpful for understanding JavaScript's inheritance model and ES6 classes

Instructions

• Use ES6 classes to automatically add methods to the prototype
• Use Object.create() to create objects with a specific prototype
• Leverage the prototype chain for inheritance (extends keyword in ES6 classes)
• Understand that properties on the prototype are shared and not duplicated per instance

Details

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.

We can see the prototype directly through accessing the prototype property on a constructor, or through the __proto__ property on any instance.

console.log(Dog.prototype);
// constructor: ƒ Dog(name, breed) bark: ƒ bark()

console.log(dog1.__proto__);
// constructor: ƒ Dog(name, breed) bark: ƒ bark()

The value of __proto__ on any instance of the constructor, is a direct reference to the constructor's 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.