Class Instantiation —

AKA Keeping Your Code Clean and Tidy

Class Instantiation:
So what exactly is class instantiation? For those that are unfamiliar, class instantiation allows programmers to organize their code while reducing repetition. This is achieved by creating Object Classes that return specific values upon invocation, thereby reducing the need to rewrite often-used parts of your code. You may be asking yourself, how exactly does that work? Well, let’s say we’re creating a game like Super Mario Bros where a lot of different boxes have the same attributes (like location, size, color, function, etc…). We could create a box object that has specific information associated with it, and just copy paste it a bunch of times, changing specific details along the way, but that would be time-consuming, inefficient, and unproductive — all things we programmers should avoid being. By creating a Box Class, use the template found within the Box Class to create new objects without all the repetition, plus we don’t have to worry about massive overhauls to our code in the event that the box dimensions would need to be changed.

Each box can be instantiated through a Box Class

In this post, we’ll be going over the four main instantiation patterns within JavaScript (Functional, Functional-Shared, Prototypal, and Pseudoclassical). These all share lots of similarities and ultimately it will be up to you to decide on which to implement in your code. So let’s dive in.

Function Instantiation:
As I mentioned earlier, class instantiation allows us to create a template that can be called upon whenever we need to create multiple objects with similar attributes. For our examples, we will be creating Box classes in the various instantiation patterns to get an idea of how they are created, and how they can be implemented throughout your program.

Functional Instantiation:
var Box = function(height, width, color) {
var obj = {}; //declares the new object within the Class
obj.height = height;
obj.width = width;
obj.color = color;
obj.changeColor = function() {
obj.color = 'black'
};
return obj;
};
var brickBox = Box(5,5,"brown"); //creates a new object with 
// the key-value pairs found in the Box class.

By capitalizing the Box class we are letting other programmers know that this is a Class and not some regular function. Functional Instantiation is by far the easiest to follow, since everything exists within the function. However, this is not without its faults. Every time the Box class will be called, a new set of functions will be created within the memory, which can take up a lot of storage in bigger apps and games.

Functional-Shared Instantiation:
Much like the Functional Instantiation beforehand, Functional-Shared Instantiation leaves most of the information within the Class, extending its properties through the extend function, while leaving the functions outside the call to prevent multiple invocations at instantiation.

Functional-Shared Instantiation:
var Box = function(height, width, color) {
var obj = {}; //declares the new object within the Class
extend(obj, newObj) //extends the obj properties onto a new object
obj.height = height;
obj.width = width;
obj.color = color;
return obj;
};
var extend = function(to, from) {   
for (var key in from) {
to[key] = from[key];
}
};
var newObj = {};
newObj.changeColor = function() {
this.color = 'black'
};
var brickBox = Box(5,5,"brown") //creates a new object with 
// the key-value pairs found in the Box class.

By moving the changeColor outside the Box class, our new instances will refer to the references being stored in the memory, allowing for greater less memory usage. However, this makes fallback look-ups less efficient then if we were to simply store our method within the Class.

Prototypal Instantiation:
As you can see, Functional and Functional-Shared Instantiations are pretty similar to one another.

Prototypal Instantiation:
var Box = function(height, width, color) {
var obj = Object.create(Box.prototype); //declares the new
// object within the Class
obj.height = height;
obj.width = width;
obj.color = color;
return obj;
};
Box.prototype.changeColor = function() {
this.color = 'black'
};
var brickBox = Box(5,5,"brown"); //creates a new object with 
// the key-value pairs found in the Box class.

Unlike the Functional-Shared Instantiation, this pattern attaches methods directly onto the object prototype. You’ll also notice that we no longer need the function we relied upon before since the native Object.create() effectively does the same thing. Although this is more efficient then our previous examples, it is still rather long. Remember, the goal of any good program is to keep it short and simple to avoid potential mistakes and retain clarity.

Pseudoclassical Instantiation:
Finally, we have Pseudoclassical Instantiation. Although the prior instantiation patterns all have their merits, Pseudoclassical Instantiation has been optimized to run on JavaScript, making it my preferred method of Class Instantiation.

Pseudoclassical Instantiation:
var Box = function(height, width, color) {
this.height = height;
thos.width = width;
this.color = color;
};
Box.prototype.changeColor = function() {
this.color = 'black'
};
var brickBox = new Box(5,5,"brown"); //creates a new object with 
// the key-value pairs found in the Box class.

You’ll notice that the Object.create() and return methods are nowhere to be found in the Pseudoclassical instantiation. That’s because both are being implemented behind the scenes. Just like with the Prototypal Instantiation, methods are attached directly onto the object prototype.

The one downside to this Class Instantiation is that it can be difficult to understand upon first glance. Don’t get down on yourself if it doesn’t come naturally to write, that’s completely normal. Adjusting for the this and the new keyboards may take some time, but it’ll come with practice. Don’t be afraid to reference these examples in the future for further clarity on their implementation.

I hope that was helpful! If you want to learn more about Class Inheritance or Subclass Instantiation check out this post.