Javascript-Instantiation

Instantiation refers to the creation of an object. Following that, instantiation patterns refer to the different ways to create instances of objects.

The functional pattern of instantiation is very easy-to-read. This pattern provides an object and assigns both its properties and methods in the same function call, which makes it easy for readers to interpret.

// Functional instantiation
const FuncPerson = function(name, favFood) {
 const obj = {};

 obj.name = name;
 obj.favFood = favFood;

 obj.greet = function() {
  return `Hi, my name is ${name}!`;
 }

 obj.ask = function() {
  return `Would you like to get some ${favFood}?`;
 }

 return obj;
};

const tom = FuncPerson('Tom', 'pizza');
tom.name;  // returns 'Tom'
tom.greet();  // returns 'Hi, my name is Tom!'

First, we create a function, FuncPerson. Inside of that function, we declare an object(obj). Then we assign properties to that object. In this case, you can create the properties name and favFood and assign them values of the name and favFood properties passed into the FuncPerson function, respectively. Next, you can create any methods we wish to make available to objects created with the FuncPerson function, .greet, and .ask in our example. Finally, you can call the object to complete our function. Invoking our function will provide a new object with the aforementioned properties (name and favFood) that has our created methods (.greet and .ask) available to it.

Functional-shared:

Functional-shared instantiation is qual to the functional instantiation pattern, but we do not suffer from the method-duplication problem seen in the functional pattern.

// Functional-shared instantiation
const FSPerson = function(name, favFood) {
 const obj = {};

 obj.name = name;
 obj.favFood = favFood;

 _.extend(obj, fSPersonMethods);

 return obj;
};

const fSPersonMethods = {
 greet: function() {
  return `Hi, my name is ${this.name}!`;
 },

 ask: function() {
  return `Would you like to get some ${this.favFood}?`;
 }
};

const brad = FSPerson('Brad', 'spaghetti');
brad.name;  // returns 'Brad'
brad.ask();  // returns 'Would you like to get some spaghetti?'

Prototypal:

Instead of placing methods inside of an object. the javascript prototypal instantiation pattern will place them on the object’s prototype. To do this, we will make use of the Object. create.

// Prototypal instantiation
const ProtoPerson = function(name, favFood) {
 const obj = Object.create(protoPersonMethods);

 obj.name = name;
 obj.favFood = favFood;

 return obj;
};

const protoPersonMethods = {
 greet: function() {
  return `Hi, my name is ${this.name}!`;
 },

 ask: function() {
  return `Would you like to get some ${this.favFood}?`;
 }
};

const susan = ProtoPerson('Susan', 'ice cream');
susan.name;  // returns 'Susan'
susan.ask();  // returns 'Would you like to get some ice cream?'

Pseudoclassical:

Pseudoclassical instantiation provides the method inheritance almost identically to the prototypal pattern, we just have a few syntactical differences.

// Pseudoclassical instantiation
const PseudoPerson = function(name, favFood) {
 this.name = name;
 this.favFood = favFood;
};

PseudoPerson.prototype.greet = function () {
 return `Hi, my name is ${this.name}!`;
};

PseudoPerson.prototype.ask = function () {
 return `Would you like to get some ${this.favFood}?`;
};

const chuck = new PseudoPerson('Chuck', 'smores');
chuck.name;  // returns 'Chuck'
chuck.ask();  // returns 'Would you like to get some smores?'

ES6 Pseudoclassical:

This pattern defines the class keyword to create your constructor function, then another constructor function inside of that handles assigning properties.

// ES6 Pseudoclassical instantiation
class ES6Person {
 constructor(name, favFood) {
  this.name = name;
  this.favFood = favFood;
 }

 greet() {
  return `Hi, my name is ${this.name}!`;
 };

 ask() {
  return `Would you like to get some ${this.favFood}?`;
 }
};

const becky = new ES6Person('Becky', 'waffles');
becky.name;  // returns 'Becky'
becky.ask();  // returns 'Would you like to get some waffles?'