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

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!

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

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

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

  • 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

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

DataNumen PSD Repair 2.9 is released on May 4, 2021

DataNumen PSD Repair Boxshot

How to make a website from scratch Part 3

test this medium post

Clone of Facebook

Log In page

Extending HTTP Interceptors Hierarchically in Angular

Variables

How I integrated CSS Modules with SCSS into my React application

[Learning]#17 JS: loop — Part 2

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
Karis Tobias

Karis Tobias

More from Medium

Part 1: The JavaScript OLOO Pattern Explained (with pictures)

3 Concepts of Functions to Add to Your Arsenal as a JavaScript Developer

The main pitfalls of learning JavaScript

JavaScript or TypeScript.