A Prototype Chain By Any Other Name Would Smell As Sweet…

Javascript, I love it when you talk prototypes and chains at me…

But JS, I know you’re lying to me. You really don’t have classes like in other OOP (object oriented programming) languages.

When we code, we’re really only concerned about two things: storing data in memory and applying functionality to this data. Object Oriented Programming (OPP) is important and necessary for complex coding and our goal is always to store relevant functions with their relevant data. In Javascript, we use a chain of prototypes to simulate OOP.

That’s basically what’s happening when you create a shiny new object out of a constructor function (using the “new” keyword). Prototypes are the mechanism where JS objects inherit features from each other. Inheritance always comes via an object and that’s where the methods and properties are inherited from. If you look in your code, you’ll notice that each of the inherited objects has a property called “__proto__” that points to the original prototype object that it was created from.

“__proto__” is a special bond like closure that sometimes can be accessed as a live store of data when we can’t find the reference from an inner function and when scope looks and finds/references __proto__ in the outer function. When we use the “new” keyword, it by creates both a function aspect and an object aspect (after all functions are just objects in JS) with a default property called prototype. In the local execution context of object function after the “new” keyword, the “this” keyword (used in the new binding way) creates a special bond “__proto__” that is stores on the global memory of the prototype object of the object function after the “new” keyword. Holy moly this is a mother load! Basically under the hood, Javascript is doing all this heavy lifting and then making it very accessible to use via constructor functions, the “new” keyword, and now the term classes.

A prototype chain is just a linked list. One object has a link inside it connected to another prototype object that has a link inside it. When you use the constructor function with the “new” keyword, you’re basically just creating an object with a default property prototype and linking it to other prototype objects.

The Javascript engine looks for a property in the object itself and if it’s not there it transverses over to the next nearest object into the property of prototype. In JS OOP, each object stores its state (data) privately and only the object’s methods have access to change it. In other words to change the object’s encapsulation, you can’t directly mutate it. Instead, you must call a method on the object and then maybe the object will respond by updating its state. Redux and React have become very popular because they manage state automatically for you.

So what’s really going on with classes in Javascript? The JS term of classes is such syntactical sugar for what’s really going on and that’s a linked list of objects (each containing a property called prototype) chained together.

When Brendan Eich built Javascript in 10 days back in 1995, he wanted to combine the functional programming of Scheme (higher order functions, closure) with the OOP of Java (constructor functions, the “this” keyword, encapsulation, (eventually) classes and the “new” keyword). A lot of people don’t know this but Eich also modeled Javascript around a third programming language called Self which uses prototype chains which was more powerful and flexible than Java.

It’s clear that Javascript has been misunderstood by a lot of developers. For example, programmers coming from other OOP languages like Java noticed quickly misperceived that Javascript objects (and later classes) don’t have a mechanism for data privacy. These developers decided to denote private properties and methods by prefixing them (rather controversially) with underscores. Javascript does have a mechanism for data privacy but it’s through the functional programming concept of closure.

So perhaps naming constructor functions as classes through ES6 was just a way to placate the developers coming from other OOP languages. After all, classes sounds a lot more sexy than prototype chains.