JavaScript prototypes and inheritance | Web Security Academy

JavaScript makes use of a prototypal inheritance mannequin, which is sort of totally different from the class-based mannequin utilized by many different languages. On this part, we’ll present a fundamental overview of how this works, which ought to offer you sufficient of an understanding to comply with our studying supplies on client-side prototype pollution vulnerabilities.

What’s an object in JavaScript?

A JavaScript object is actually only a assortment of key:worth pairs often called “properties”. For instance, the next object may characterize a consumer:

const consumer =
username: "wiener",
userId: 01234,
isAdmin: false


You possibly can entry the properties of an object by utilizing both dot notation or bracket notation to seek advice from their respective keys:

consumer.username // "wiener"
consumer['userId'] // 01234

In addition to knowledge, properties can also include executable features. On this case, the perform is named a “technique”.

const consumer =
username: "wiener",
userId: 01234,
exampleMethod: perform()
// do one thing

The instance above is an “object literal”, which suggests it was created utilizing curly brace syntax to explicitly declare its properties and their preliminary values. Nonetheless, it is necessary to grasp that just about every part in JavaScript is an object below the hood. All through these supplies, the time period “object” refers to all entities, not simply object literals.

What’s a prototype in JavaScript?

Each object in JavaScript is linked to a different object of some form, often called its prototype. By default, JavaScript robotically assigns new objects one among its built-in international prototypes. For instance, strings are robotically assigned the built-in String.prototype. You possibly can see some extra examples of those international prototypes under:

let myObject = ;
Object.getPrototypeOf(myObject); // Object.prototype

let myString = "";
Object.getPrototypeOf(myString); // String.prototype

let myArray = [];
Object.getPrototypeOf(myArray); // Array.prototype

let myNumber = 1;
Object.getPrototypeOf(myNumber); // Quantity.prototype

Objects robotically inherit the entire properties of their assigned prototype, until they have already got their very own property with the identical key. This allows builders to create new objects that may reuse the properties and strategies of present objects.

The built-in international prototypes present helpful properties and strategies for working with fundamental knowledge sorts. For instance, the String.prototype object has a toLowerCase() technique. In consequence, all strings robotically have a ready-to-use technique for changing them to lowercase. This protects builders having to manually add this conduct to every new string that they create.

How does object inheritance work in JavaScript?

Everytime you reference a property of an object, the JavaScript engine first tries to entry this straight on the article itself. If the article would not have an identical property, the JavaScript engine appears for it on the article’s prototype as a substitute. Given the next objects, this allows you to reference myObject.propertyA, for instance:

You should use your browser console to see this conduct in motion. First, create a very empty object:

let myObject = ;

Subsequent, sort myObject adopted by a dot. Discover that the console prompts you to pick from an inventory of properties and strategies:

Though there aren’t any properties or strategies outlined for the article itself, it has inherited some from the built-in Object.prototype.

The prototype chain

Be aware that an object’s prototype is simply one other object, which must also have its personal prototype, and so forth. As just about every part in JavaScript is an object below the hood, this chain finally leads again to the top-level Object.prototype, whose prototype is just null.

Crucially, objects inherit properties not simply from their instant prototype, however from all objects above them within the prototype chain. Within the instance above, which means the username object has entry to the properties and strategies of each String.prototype and Object.prototype.

Accessing an object’s prototype utilizing __proto__

Each object has a particular property that you should use to entry its prototype. Though this does not have a formally standardized identify, __proto__ is the de facto customary utilized by most browsers. In case you’re aware of object-oriented languages, this property serves as each a getter and setter for the article’s prototype. This implies you should use it to learn the prototype and its properties, and even reassign them if crucial.

As with every property, you’ll be able to entry __proto__ utilizing both bracket or dot notation:

username.__proto__
username['__proto__']

You possibly can even chain references to __proto__ to work your means up the prototype chain:

username.__proto__ // String.prototype
username.__proto__.__proto__ // Object.prototype
username.__proto__.__proto__.__proto__ // null

Modifying prototypes

Though it is typically thought of unhealthy follow, it’s attainable to switch JavaScript’s built-in prototypes similar to another object. This implies builders can customise or override the conduct of built-in strategies, and even add new strategies to carry out helpful operations.

For instance, trendy JavaScript offers the trim() technique for strings, which allows you to simply take away any main or trailing whitespace. Earlier than this built-in technique was launched, builders typically added their very own customized implementation of this conduct to the String.prototype object by doing one thing like this:

String.prototype.removeWhitespace = perform()
// take away main and trailing whitespace


Because of the prototypal inheritance, all strings would then have entry to this technique:

let searchTerm = " instance ";
searchTerm.removeWhitespace(); // "instance"