JavaScript Objects and its secret associates: Prototype

In my blog post, "JavaScript Objects and their Hidden Attributes," I generally covered the concept of JavaScript's hidden attributes. This article will provide more information on the prototype and its uses.

If you open a browser console in the Devtools and create an object literal like this: const myObj = {}; and then try accessing the new object properties by typing in myObj. in the console, you will see a list of suggested properties.

When you create an object, it is assigned an internal property called prototype (is shown as __proto__ in the browsers, also seen in the screenshot above), which is itself an object having its own prototype object. This property is actually a reference to another object, which may also have a prototype property referencing yet another object, and so on until it reaches the top-level object. The top-level object is known as Object.prototype and does not have a prototype property. All the properties listed in the console come from this Object.prototype. This linking of the properties starting from the object until its top-level object through its prototype is called the prototype chain.

If you want to determine the prototype object of your myObj in the console, simply type in Object.getPrototypeOf(myObj);. This will display the final prototype object, which you can confirm by checking the value of __proto__. As I mentioned earlier, end-level objects do not have a prototype, so the value of __proto__ will be null.

There is a not-so-recommended way to access the prototype - myObj.__proto__, which I will explain later. The standard way is the Object.getPrototypeOf() method.

It's worth noting that not all objects have Object.prototype as their prototype object. For instance, if you create an object using the Array constructor, its prototype will be Array.prototype. However, if you trace the prototype chain of Array.prototype, you'll eventually find that Object.prototype is at the end of the chain. Same with the case of the Date object.

What is the purpose of all this? Do you remember the accessor property of the object, i.e., the 'get' property? The 'get' property follows this prototype link for the GET operation of finding an object's property all the way up the chain until it finds it.

You can use Object.create or constructors to manipulate the properties an object can inherit as below.

const myPrototype = {
  welcome() {
    console.log("Welcome!");
  },
};

const myObj = Object.create(myPrototype);
myObj.welcome(); // Welcome!

const myPrototype = {
  welcome() {
    console.log(`Welcome, ${this.name}!`);
  },
};

function Guest(name) {
  this.name = name;
}
Guest.prototype.welcome = myPrototype.welcome;
//OR
//Object.assign(Guest.prototype, myPrototype);

const newGuest = new Guest("Mariam");
newGuest.welcome(); // Welcome, Mariam!

The main benefit of this is that inheriting common properties for newly created objects supports object-oriented programming in JavaScript. Classes and constructors use these prototype features under the hood.

By now, you must have understood clearly what a prototype is and its uses. However, the ability to modify an object's prototype can also make your code vulnerable to security threats. In my next article, I will be exploring this topic in detail. So, stay tuned to learn more.