Instantiation patterns in JavaScript provide a way to create instances of objects. These objects are further defined by their properties and methods.
So what is the difference between modeling an "object" with an instantiation pattern and JavaScript's native Object data type? The Object data type provides a very simple way to create an object. However, it is best for a single instance of an object. If multiple instances of the object were created with the built-in Object, there would be multiple copies of the same code for each instance. That is were instantiation patterns are more efficient: they provide reusable code for the object's implementation.
The four major instantiation patterns are:
- Functional
- Functional Shared
- Prototypal
- Pseudoclassical
Functional
The Functional pattern creates an object using JavaScript's Object data type, but the Object is encapsulated in a function.
First, the function is created. Inside the function, a variable is declared and assigned an empty object literal. Then, the object properties and methods are added to the function. The variable is returned just before the end of the function.
The person object below is implemented using Functional:
const Person = function(first, last, dob) {
const person = {};
person.firstName = name;
person.lastName = last;
person.birthDate = new Date(dob);
person.calculateAge = function () {
return person.birthDate.getFullYear() - newDate().getFullYear();
};
return person;
};
let peep = Person('John', 'Do', '12/31/1999');
Functional Shared
The Functional Shared instantiation is similar to the Functional pattern, except the Functional Shared includes shareable properties and methods.
Just like the Functional instantiation, it starts with an function containing an empty object and it's properties. The methods are defined outside of the function in an object. The extend keyword is used to declare that the methods belong to the object. The extend statement is placed inside of the function before returning the object.
The person object below is implemented using Functional Shared:
const Person = function(first, last, dob) {
const person = {};
person.firstName = name;
person.lastName = last;
person.birthDate = new Date(dob);
extend(person, personMethods);
return person;
};
const personMethods = {
calculateAge: function () {
return this.birthDate.getFullYear() - newDate().getFullYear();
};
};
let peep = Person('John', 'Do', '12/31/1999');
Prototypal
The Prototypal pattern is similar to the implementation of JavaScript native data types, since they inherit properties and methods. This is known as prototypical inheritance.
Unlike Functional and Functional Shared, the Prototypal pattern does not use the empty object literal inside of the function declaration. Instead, it uses the Object.create method to create the object and to relate it to the methods declared outside of the function's scope. The Prototypal instantiation declares the methods in another object similar to Functional Shared.
The person object below is implemented using Prototypal:
const Person = function(first, last, dob) {
const person = Object.create(person.Prototype);
person.firstName = name;
person.lastName = last;
person.birthDate = new Date(dob);
return person;
};
Person.prototype.calculateAge = function() {
return this.birthDate.getFullYear() - newDate().getFullYear();
};
};
let peep = Person('John', 'Do', '12/31/1999');
Pseudoclassical
The Pseudoclassical pattern is similar to the implementation of objects in an object-oriented language. This is accomplished with the introduction of the new keyword. A function called with the new keyword is called a constructor function.
Like Prototypal, Pseudoclassical uses the prototype chain. Instead of using the Object.create(), Pseudoclassical instantiation uses the this keyword to refer to the object, so all properties are prefixed with the word this followed by a period. Each object method has it's own function declaration. The object's method is prefixed with the object name followed by a period the word prototype and another period.
The person object below is implemented using Pseudoclassical:
const Person = function(first, last, dob) {
this.firstName = name;
this.lastName = last;
this.birthDate = new Date(dob);
}
Person.prototype.calculateAge = function() {
return this.birthDate.getFullYear() - newDate().getFullYear();
}
let peep = new Person('John', 'Do', '12/31/1999');
The basic structure of each pattern has been presented using the same person object. The similarities between each instantiation are not coincidental. They try to solve a problem or short-coming of the prior. As a result, each pattern has it's pros and cons, but that is a topic for another time.
Top comments (0)