JavaScript Instantiation Patterns - Part 2 of 2

This is part 2 of my posts about JavaScript instantiation patterns. You can read part 1 which covers Functional and Functional Shared here.

We previously covered both the Functional and Functional Shared Instantiation methods. I showed how Functional Shared made some improvements over Functional. The next two methods I will cover are Prototypal and Pseudo-classical instantiation. They both provide improved performance over the first two methods.

If you are not familiar with prototypes, let me give you a quick summary. Every new object has a prototype chain. Prototype chains make it possible for many child objects to all reflect the properties of one parent object.

Prototypal

The Prototypal instantiation pattern uses Object.create to generate an object with a delegation relationship. Any failed property lookups on instances will fall through to the prototype.

This reduces redundancy because new instances will have access to properties stored in the prototype.

var Car = function(exterior, interior){
  var obj = Object.create(carMethods);
  obj.exterior = exterior;
  obj.interior = interior;

  obj.driveCar = function() {
    // code to drive car
  };

  return obj;
}

carMethods = {
  driveCar: function() {
    this.exterior = 'red';
    // code to drive car;
  }
};

Now that you have defined your new Car you need to be able to create it. To create a new car you would use:

myCar = car('black', 'black');

Pros: Very easy to add new items and have it automatically updated to new instances. You change a property or add a new property in the delegatee object, the delegator will get that change when you reference it in the future. Cons: Object delegation can only be setup at the time of object creation since delegation relationships are only created via use of the Object.create function.

Pseudoclassical

When you create a function using the new keyword, JavaScript automatically adds two lines of codes for you. They are:

this = Object.create(objMethods);
return this;

Now that you know JavaScript automatically adds these lines for you, you can delete them from your code.

Pseudo-classical is very similar to the functional-shared pattern, except that access to the shared methods is achieved by use of a prototype chain, rather than by copying the method references on to a new instance one at a time.

var Car = function(exterior, interior){
  this.exterior = exterior;
  this.interior = interior;
}

obj.driveCar = function() {
    // code to drive car
  };

Now that you have defined your new Car you need to be able to create it. To create a new car you would use:

myCar = new Car('black', 'black');

Pros: this is the current industry standard Cons: the syntax is a bit awkward and heavy, its not always clear what lines of code are being inserted which can cause confusion