Javascript class patterns

Last week, I learned 4 different types of Javascript class patterns at Code Chrysalis , and I ‘d like to share them.

1) Functional Style

The characteristics of Functional Style is that you define methods inside of the class not using prototype.

◯Advantage
You can chose which property or methods you want to make it public or private using closure.

×Disadvantage
The methods have to create new instance every time because it’s not on prototype.

var Stack = function(){
var __storage = {};
var index = 0;
    var push = function(value){
__storage[index++] = value ;
};
    var pop = function(){
if(index === 0){
return undefined;
}
var popedItem = __storage[--index];
__storage[index] = undefined;
return popedItem;
};
    var length = function(){
return index;
}

return {
__storage : __storage,
push : push,
pop: pop,
length: length
};
}

Let’s say if you don’t return the length property, you won’t be able to access to the property from the instance of Stack as the length property is not public.

2) Pseudoclassical Style

The characteristic of Pseudoclassical Style is that you define methods outside of constructor through prototype.

◯Advantage
It’s clear that the methods are prototype. And compare to 1)Functional style, since using prototype, the methods are shared on memory so they are not instantiated every time the instance is created.

×Disadvantage
You can’t treat methods private like you can 1)Functional style.

var Stack = function(){
}

Stack.prototype = {
__storage : {},
index : 0,
push : function(value){
this.__storage[this.index++] = value ;
},
pop: function(){
if(this.index === 0){
return undefined;
}
var removedIndex = this.index;
var popedItem = this.__storage[--this.index];
this.__storage[removedIndex] = undefined;
return popedItem;
},
length: function(){
return this.index;
}
}

3) Prototypal Style

The characteristic of Prototypal Style is very similar with 2)Pseudoclassical style but it uses Object.create() instead.

◯Advantage
The same as 2)Pseudoclassical style but using Object.create() has better performance.

×Disadvantage
You need to make sure that you return the instance object that you created in the constructor.

var Stack = function(){
var instance = Object.create(Stack.prototype);
return instance;
}

Stack.prototype = {
__storage : {},
index : 0,
push : function(value){
this.__storage[this.index++] = value ;
},
pop: function(){
if(this.index === 0){
return undefined;
}
var removedIndex = this.index;
var popedItem = this.__storage[--this.index];
this.__storage[removedIndex] = undefined;
return popedItem;
},
length: function(){
return this.index;
}
}

4) ES6 CLASS

The characteristic of ES6 CLASS is that it is a syntax sugar, how we write it completely changes.

◯Advantage
You can write clean code and it is very easy to use. ES6 checks the syntax error as well so it’s easy to find mistakes as well.

×Disadvantage
Not much of the disadvantages of using ES6 CLASS but if you have to consider for users using old web browsers, you might have to avoid using this (or use babel).

class Stack {
constructor(){
this.__storage = {};
this.index = 0;
}
    push(value){
this.__storage[this.index++] = value ;
};
    pop(){
if(this.index === 0){
return undefined;
}
var removedIndex = this.index;
var popedItem = this.__storage[--this.index];
this.__storage[removedIndex] = undefined;
return popedItem;
};
    length(){
return this.index;
}
}

Which one would I chose to use?

I’ll definitely like to use ES6 from now on. I can write clean code without screwing up, I like it:)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.