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 to create objects with a specific prototype
- Leverage the prototype chain for inheritance ( 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!
js
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
contains a
property, and the class itself contains a
property. When using ES6 classes, all properties that are defined on the class itself,
in this case, are automatically added to the
.
We can see the
directly through accessing the
property on a constructor, or through the
property on any
instance.
js
console.log(Dog.prototype);
// constructor: ƒ Dog(name, breed) bark: ƒ bark()
console.log(dog1.__proto__);
// constructor: ƒ Dog(name, breed) bark: ƒ bark()
The value of
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.
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.
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
property to the prototype.
The term
prototype chain indicates that there could be more than one step. Indeed! So far, we've only seen how we can access properties that are directly available on the first object that
has a reference to. However, prototypes themselves also have a
object!
Let's create another type of dog, a super dog! This dog should inherit everything from a normal
, but it should also be able to fly. We can create a super dog by extending the
class and adding a
method.
js
class SuperDog extends Dog {
constructor(name) {
super(name);
}
fly() {
return "Flying!";
}
}
We have access to the
method, as we extended the
class. The value of
on the prototype of
points to the
object!
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
points to, until it finds the property!
The
method lets us create a new object, to which we can explicitly pass the value of its prototype.
js
const dog = {
bark() {
return `Woof!`;
},
};
const pet1 = Object.create(dog);
Although
itself doesn't have any properties, it does have access to properties on its prototype chain! Since we passed the
object as
's prototype, we can access the
property.
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.
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.
Source
References