Part 2: The JavaScript Pseudo-Classical Pattern Explained (with pictures)

  1. Some sort of constructor function for creating objects
  2. A new keyword which initializes the creation of a new object

Constructor Functions, Prototypes and Objects

To explain how this all works lets go back to our myChair object we created in Part 1:

the myChair object
let myChair = {
width: 50,
minHeight: 45,
};
function Chair(width, minHeight) {
this.width = width;
this.minHeight = minHeight;
}
let myChair = new Chair(50, 45);
myChair; // { width: 50, minHeight: 45 }
  • The Chair function is invoked with the new operator, which turns an ordinary function into a ‘constructor function’ (we will explain constructors later). Constructors are typically capitalised to differentiate themselves from normal functions and other variables.
  • Within the Chair constructor this sets width and minHeight properties to itself, and assigns passed-in values to these new properties (again this will be explained later).
  • An object is returned from the method as indicated on the last line when we reference the object assigned to myChair —it returns the same value as our object literal.

All functions are objects — they have properties and methods just like regular objects!

Functions are actually objects! Now that we know this, we can finally understand how Pseudo-classical inheritance works:

typeof Chair.prototype;    // "object"
under the hood of a constructor, JavaScript implements prototype-based inheritance
the myChair prototype chain

The 5 Steps of JavaScript Constructors

Lets now have a closer look at how the constructors work, using our Chair example. If we remember our Pseudo-classical implementation from before:

function Chair(width, minHeight) {
this.width = width;
this.minHeight = minHeight;
}
let myChair = new Chair(50, 45);
  1. Chair becomes a constructor and creates a new blank object:
    There’s nothing special about this blank object — think of it as a plain old empty object {}.
  2. The blank object’s hidden[[Prototype]] property is set to reference the Chair.Prototype object:
    As mentioned before, this is so our chair object can now receive prototype-based inheritance.
  3. The execution context (this) is set from the global object to the blank object:
    Because the Chair invocation had no explicit caller, by default this references the global object instead of our blank object. Before we can assign properties to our blank object, this must first point to it.
  4. Execute the function to add properties to the chair object:
    Our constructor function is finally executed, and all code within the definition runs. In this case, both passed-in arguments width and minHeight are assigned to properties of the same name, and set to our new chair object.
  5. The new chair object is returned from the Chair constructor function:
    By default, constructors will implicitly return the object created in step 1, unless an explicit return is used to return some other object.

Setting Behaviours to Pseudo-classical Objects

Now that you understand how constructors really work — congratulations! It is no small task!

function Chair(width, minHeight) {
this.width = width;
this.minHeight = minHeight;
}
let myChair = new Chair(50, 45);
let anotherChair = new Chair(40, 60);
myChair; // { width: 50, minHeight: 45 }
anotherChair; // { width: 40, minHeight: 60 }
function fold() {
console.log('chair folded!');
}
Chair.prototype.fold = function() {
console.log('chair folded!');
}
chair objects inherit the fold() method from their prototype

Conclusion

Phew! There is a lot involved when it comes to the OLOO and Pseudo-classical object creation patterns — so I’m glad you stuck it out to the end!

  • JavaScript is an object-oriented programming language in the purest sense: it has no classes of its own, and simple objects can become working prototypes for other objects
  • JavaScript supports prototype-based inheritance: inheritance can only be performed using objects and prototypes. Anything else that claims to look like inheritance is just objects working under the surface
  • Objects delegate shared, common properties to their prototypes using a prototype chain: this way, objects only contain the necessary properties that makes them unique, keeping them small and efficient

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store