Understanding JavaScript Constructors, Prototypes, Classes, and Inheritance

This article provides a comprehensive tutorial on core JavaScript concepts such as constructors, prototypes, the this binding, and class syntax. It explains how constructors are just regular functions that can be invoked with new , how the prototype chain works, and why this points to different objects in various call contexts (direct call, method call, call/apply/bind , and arrow functions).

Key points include:

All functions can be used as constructors when called with new , except arrow functions.

The prototype of a constructor ( Constructor.prototype ) becomes the __proto__ of objects created by new Constructor() .

Property lookup follows the prototype chain until Object.prototype and then returns undefined if not found.

Modifying prototype properties affects all instances, while modifying instance properties overrides the prototype value.

The article also demonstrates how to implement a custom new function ( myNew ) and a custom instanceof function ( myInstanceof ) using prototype checks.

It then introduces ES6 class syntax as syntactic sugar over the constructor‑prototype pattern, covering instance fields, prototype methods, static members, and the constructor method. The class example is shown alongside its equivalent constructor‑prototype implementation.

Inheritance patterns are explored in depth:

Prototype chain inheritance – setting Child.prototype = new Parent() (issues: shared reference properties, no constructor arguments).

Constructor inheritance – calling Parent.call(this, args) inside the child constructor (issues: no prototype inheritance).

Combination inheritance – combines both approaches but calls the parent constructor twice.

Parasitic combination inheritance – uses Object.create(Parent.prototype) to avoid the double call.

Finally, the article shows how ES6 class with extends implements parasitic combination inheritance under the hood, using Object.create for the prototype chain and super() to invoke the parent constructor. It also covers static inheritance via super in static methods.

Throughout the tutorial, code snippets are provided to illustrate each concept, and diagrams (referenced as images) visualize the prototype chain and inheritance structures.