Constructor vs. class methods in Javascript

There are many ways to declare functions in Javascript. Sometimes, the way we choose to declare them might just be a matter of preference, but it’s good nevertheless to know some of the hidden costs that can occur when using certain constructs.

Here, we’re going to take a look at two different methods and compare their efficiencies. Before we jump into these different methods, here’s a quick refresher for those of you who aren’t too sure of the difference between classes and instances.

Think about a class as a template for a website. It defines the structure for the website by specifying the header, the footer and etc. An instance in this analogy is a page built based on that template. It’s an object built from that class. And now, on to the meatier stuff…

The code below uses the “constructor function” method to create a few instance of a Dog. If you look closely, the methods of the Dog class is all defined within the constructor.

function Dog(name, type){
   this.name = name;
   this.type = type;
 
   this.bark = function(){
      alert(this.name + " barks");
   };
 
   this.growl = function(){
      alert(this.name + " growls");
   };
 
   this.getBreed = function(){
         return this.type;
   };
}
 
var lassie = new Dog("Lassie", "Collie");
lassie.bark();  // Lassie bark
lassie.growl(); // Lassie growls
var breed = lassie.getBreed(); // Collie
 
var rintintin= new Dog("Rin Tin Tin", "German Shepard");
rintintin.bark();  // Rin Tin Tin barks
rintintin.growl(); // Rin Tin Tin growls
var breed = rintintin.getBreed(); // German Shepard

Now, this method works just fine, but at a greater cost to code efficiency. As you can see from the image above, each instance of the Dog class also has its own copy of the bark, growl and getBreed method. This is inefficient because the method is being duplicated for each instance and extra redundant memory is allocated for each of the duplicated methods. Let’s be good web citizens and try to avoid that, shall we!

In order to prevent the redundancies, we need to make sure only one copy of the function is shared amongst all the instances. In order to do this, we can use the prototype object in Javascript. The prototype object is initially an empty object that can be modified with custom properties and methods.

function Dog(name, type){
   this.name = name;
   this.type = type;
}
 
Dog.prototype.bark = function(){
   alert(this.name + " barks");
}
 
Dog.prototype.growl= function(){
   alert(this.name + " growls");
}
 
Dog.prototype.getBreed = function(){
   return this.type;
}
 
var lassie = new Dog("Lassie", "Collie");
lassie.bark();  // Lassie barks
lassie.growl(); // Lassie growls
var breed = lassie.getBreed(); // Collie
 
var rintintin= new Dog("Rin Tin Tin", "German Shepard");
rintintin.bark();  // Rin Tin Tin bark
rintintin.growl(); // Rin Tin Tin growls
var breed = rintintin.getBreed(); // German Shepard

Now, as the image above shows, the bark, growl and getBreed methods are rewritten as to be class methods and only one copy of those methods are created.

Leave a Reply

Your email address will not be published. Required fields are marked *