JS Object Classes

Javascript object classes are constructor functions that build object classes or data structures. These class constructor functions return objects that are instances of the class.

Functional Class Pattern

Functional class patterns are constructor functions where the object, its ‘class’ properties and it’s methods are declared within the same function.

var Human = function(hairColour, height) {
    
    var obj = {};
    obj.hairColour = hairColour;
    obj.height = height;
    obj.dyeBrown = function() {
        obj.hairColour = 'brown';
    };
    return obj;
};
var John = Human('red', 180);
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'

Functional-Shared Class pattern

Functional shared class patterns are designed to prevent duplicate building of the object methods declared inside the constructor functions. In the example above the dyeBrown function is run and built every time Human is invoked. To prevent this we encapsulate the function definitions in an object outside of the constructor function. We will call this object ‘methods’ in the example below. We will then use _.extend to copy the key-value pairs from the methods object to the new object created in Human.

var Human = function(hairColour, height) {
    var obj = {};
    obj.hairColour = hairColour;
    obj.height = height;
    _.extend(obj, methods);
    return obj;
};
var methods = {};
methods.dyeBrown = function() {
    this.hairColour = 'brown';
};
var John = Human('red', 180);
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'

We have to use the ‘this’ keyword to access the object instance in the function definitions as the functions will no longer have closure scope access to the constructors’ ‘obj’. In this case ‘this’ will refer to the object instance from which the method is called; in the example above ‘this’ refers to ‘John’.

Prototype chains

To copy the properties from one object to another we can use _.extend(destinationObject, sourceObject) which is not a native JS function but is often available from jQuery. _.extend(obj, methods) only creates a one time property copying of the methods object to the obj object.

Get Simon de Moor’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

On the other hand using var obj = Object.create(methods) provides an ongoing lookup time delegation between the object ‘obj’ and the object methods. Any call to an obj property or method that is not found within it’s instance will delegate the call to the ‘methods’ object. This allows ‘obj’ to inherit properties and methods from ‘methods’ and avoids the properties or methods being duplicated for each instance of ‘obj’. This is how an Array is an object of class ‘array’ and inherits certain properties and methods from the object prototype. Using Object.create automatically creates an obj.prototype methods object which does not not have to be declared which can be used to store methods in outside of the constructor function.

Prototypal class

This class is similar to the shared functional class except it uses Object.create(obj.methods) to create a new object instance with an ongoing lookup time delegation to the methods object containing methods.

var Human = function(hairColour, height) {
    var obj = Object.create(Human.prototype);
    obj.height = height;
    obj.hairColour = hairColour;
    return obj;
};
Human.prototype.dyeBrown = function() {
    this.hairColour = 'brown';
};
var John = Human('red', 180);
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'

In the example above we have stored methods inside the automatically generated Human.prototype object. Whereas below we store them in a different object named methods, in this case we have to define the methods object outside of the constructor function as it has not yet been created.

var Human = function(hairColour, height) {
    var obj = Object.create(methods);
    obj.height = height;
    obj.hairColour = hairColour;
    return obj;
};
var methods = {};
methods.dyeBrown = function() {
    this.hairColour = 'brown';
};
var John = Human('red', 180);
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'

Pseudoclassical classes

This class does the same as the prototypal class but automatically adds
this = Object.create(obj.prototype) at the beginning of the constructor function and return this; at the end of the function thus automatically creating an instance of the object with an ongoing lookup time delegation to obj.prototype and returns that instance. Now only the object properties have to be added inside the constructor function. To implement this pattern one has to include the keyword new when instantiating a new object as shown below.

var Human = function(hairColour, height) {
// this = Object.create(Human.prototype);=>automatically implemented
    this.height = height;
    this.hairColour = hairColour;
// return this;=>automatically implemented
};
Human.prototype.dyeBrown = function() {
    this.hairColour = 'brown';
};
var John = new Human('red', 180); // insert keyword new 
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'