Class Instantiation Patterns


Class Instantiation Patterns

While Javascript does not have classes in the way that most other languages do, it does provide class-like functionality through several different instantiation patterns. I will provide a brief description and an example for four instantiation patterns.

Functional

This pattern provides the easiest to read format, particularly to those who are not as familiar with Javascript syntax.

var animalMaker = function(name,age,height){  
  var newAnimal = {};
  newAnimal.name = name;
  newAnimal.age = age;
  newAnimal.height = height;
  newAnimal.say = function(){
    console.log("My name is " + newAnimal.name);
  };
  newAnimal.setHeight = function(height){
    newAnimal.height = height;
  };
  return newAnimal;
};

Functional-shared

Similar to functional, the main difference is that each new instance points to the same method objects, hence the ‘shared’ distinction in its name. The advantage is that if you conduct a large number of instantiations, you will not unnecessarily take up additional memory.

var animalMaker = function(name,age,height){  
  var newAnimal = _.extend({},animalMaker.methods);
  newAnimal.name = name;
  newAnimal.age = age;
  newAnimal.height = height;
  return newAnimal;
};

animalMaker.methods = {};

animalMaker.methods.say = function(){  
  console.log("My name is " + newAnimal.name);
};
animalMaker.methods.setHeight = function(height){  
  newAnimal.height = height;
};

Prototypal

Prototypal provides several distinct advantages compared to functional and functional-shared. Because it takes advantage of the prototype property, it allows you to add and edit methods for all instances of a class at any point in the program, not just when you define the constructor. Like functional-shared, all of the instances in a class will point to one object for its common methods and properties.

var animalMaker = function(name,age,height){  
  var newAnimal = Object.create(animalMaker.prototype);
  newAnimal.name = name;
  newAnimal.age = age;
  newAnimal.height = height;
  return newAnimal;
};

animalMaker.prototype.say = function(){  
  console.log("My name is " + this.name);
};
animalMaker.prototype.setHeight = function(height){  
  this.height = height;
};

Pseudoclassical

In terms of functionality, pseudoclassical is the exact same as prototypal. It provides more magic by utilizing an implied this = Object.create(prototype) and then returning ‘this’.

var animalMaker = function(name,age,height){  
  this.name = name;
  this.age = age;
  this.height = height;
};

animalMaker.prototype.say = function(){  
  console.log("My name is " + this.name);
};
animalMaker.prototype.setHeight = function(height){  
  this.height = height;
};

So which one should you use? 
When I first learned about these four instantiation patterns, my initial gut instinct was to ask, “so which is the best one on some XYZ technical measure?” The truth is, when it comes to deciding which instantiation pattern to use, there’s a whole set of reasons why one is used over others, without strong technical rationale.

So in terms of hierarchy, this is how I believe you will pick your instantiation pattern:

  • Because someone (more senior than you) told you to - Let’s face it, if your technical lead picks any of the four instantiation patterns, it’s unlikely that an impassioned argument for another pattern will result in switching patterns. Picking one consistent instantiation pattern is more important than any alleged technical advantage will provide in using multiple patterns.
  • Pseudoclassical because it’s the industry standard- Many tech companies (if not most) who use javascript significantly will prefer the pseudoclassical instantiation pattern. The initial popularity of pseudoclassical was due to its early introduction in the language and its syntactic familiarity for programmers that come from other languages that have robust class functionality. Because pseudoclassical has been popular for so long, browsers have optimized their interpreters to run pseudoclassical the fastest. Even though prototypal and pseudoclassical are exactly the same functionality-wise, pseudoclassical has received special favor and runs even faster than prototypal.
Posted

views