Javascript: Using object prototype to share state across class instances
Unless you’re trying to stick to strict procedural programming in Javascript, there might sometimes arise a need for you to have shared state amongst different object instances of the same class.
Javascript is a prototype based language ( read more about prototype-based languages ) and classes in Javascript are really functions which utilize a property called prototype to implement inheritance for Object-Oriented Programming. Let’s look at it with examples:
Example 1:
function Animal(name, sound) {
this.name = name ? name : this.name;
this.sound = sound ? sound : this.sound;
}Animal.prototype.introduce = function() {
return this.sound + "! I am a " + this.name;
}var animal = new Animal("Dog", "Woof");
console.log(animal.introduce()); // Woof! I am a Dog.
Example 2:
Class Animal {constructor(name, sound) {
this.name = name;
this.sound = sound;
}introduce() {
return this.sound + "! I am a " + this.name;
}
}var animal = new Animal("Dog", "Woof");
console.log(animal.introduce()); // Woof! I am a Dog.
Although syntactically different, both the codes above are pretty much the same internally. The Class Animal {…} in Example 2 basically, automatically assigns the internal definitions to the prototype property of the Animal variable. It is this prototype object that contains the constructor function, and other properties ( functions and variables ) that can be explicitly assigned based on requirements. Here’s a good detailed read on Classes in Javascript.
The constructor function points back to the Animal variable which basically lets you create instances ( or copies aptly ) of Animal. Now when you do something like this:
var animal = new Animal("Dog", "Woof");the instance variable is a copy of Animal which contains a _proto_ object that points to the prototype of Animal. In case you haven’t already realized where this is heading, let me put it straight here:
The prototype property of a Javascript object is shared among all the instances/copies of the object and can be used to store shared data/state.
When you try to access an object property using this, Javascript engine first looks for the property in the instance’s own properties. If not found, the engine then falls back to the _proto_ object also known as dunder proto to look for the property in the prototype object. This chain continues down to the topmost ancestor unless the _proto_ is null.
The properties in the prototype can be over-ridden using a simple assignment using this on the object to have its own values.
Ok then, let’s cut this complex ( or not so ) blabbering short and get on to some code to demonstrate how you can use object prototype in Javascript to share data/state. Below is the Gist of the code. You can also fiddle around this JS Bin.
Well, hope this really helps as wrapping one’s head around the entire ‘everything is an object ’ in javascript can be a bit confusing in some scenarios for beginners.
Thanks for reading through :) Go ahead and show your prototyped human appreciation through claps if you found this helpful and don’t forget to follow if you’re expecting more.
Merry Christmas!!
