JavaScript Objects and Prototypal Inheritance

Objects are a fundamental data structure to any and all programming languages. They go by many names such as hashes, dictionaries, even associative arrays but what they really are is an unordered collection of properties or values that are retrieved by a name or key. In JavaScript, objects are reference data types, dynamic, can maintain their own properties but also can inherit properties from other objects. This brings us to the main idea, in JavaScript, objects follow what is known as “prototypal inheritance” which means that objects inherit from the prototype object of their constructor, also known as a class.

The easiest way to create an object is using the object literal syntax which instantiates a new Object object.

let firstObj = {};

When we do this, we are creating an instance of the Object class or creating an object that belongs to a set of objects that inherit from the Object prototype. We can also get the same results by creating the object using the constructor which demonstrates the idea of instantiating more clearly.

let secondObj = new Object();

Both objects are identical in that they are instances of the Object class and so they share identical methods inherited from the Object prototype. The prototype property is an object that defines methods, and/or properties, that instances will inherit. We can illustrate this idea even clearer by creating an object in the third way like so:

let thirdObj = Object.create(Object.prototype);

The “Object.create()” static method takes an object as its first argument that serves as the prototype from which the created object will inherit. Finally, here we are explicitly assigning a new object to inherit from the Object prototype resulting in an object that will share identical inherited methods like the two previous examples. Some of the inherited methods are “hasOwnProperty()”, “toString()”, “valueOf()”, and so on. Actually, if we were to create an array, which is another variation of an object in JavaScript, we would still find that the newly created array would share the listed methods above.

let firstArr = [];
firstArr instanceOf Array; // => true
firstArr instanceOf Object; // => true
OR
Array.prototype.isPrototypeOf(firstArr); // => true
Object.prototype.isPrototypeOf(firstArr); // => true

The “firstArr” would not only inherit from the Array prototype, gaining access to methods like “push()”, “pop()”, and so, but also the Object methods listed above. The reason for this is because of the “prototype chain.” While “firstArr” belongs to the Array class, the prototype of Array belongs to the Object class. Because the prototype is an object, it will inherit from the Object prototype. The prototype chain ends with the Object prototype object which does not inherit from any other prototype.

Prototypal-base inheritance is how JavaScript defines and established classes, and it simply refers to objects inheriting from the same prototype. It is also useful to understand how the prototype objects are created, via the constructor functions.

function Dog(breed) {
  this.breed = breed;
}
let newDog = new Dog("poodle");

Here we have defined a constructor function. We know that it is a constructor function because the first name is capitalized, separating it from standard camelcase naming for JavaScript functions, and it is invoked alongside the “new” keyword. In invoking the constructor function in this manner, the function gains access to a property, “prototype”, which is the object from where each new instance of Dog will inherit. The “new” keyword creates a new object, inherits from the prototype property of the constructor function which now contains the very constructor function as a method within it, and calls it. By doing so, the object is assigned, the defining properties of the constructor function, the “breed” property as an own property, or non-inherited property. Furthermore, any methods that the Dog instance requires, as mentioned before, can be inherited from the prototype like so:

Dog.prototype.bark = function() { console.log("bark bark!"); }

In this example, we emphasize that methods are generally inherited and are not own properties of an instance. And because the system in which objects inherit via the prototype is dynamic, you can assign methods to the prototype object after instances have been created and they will still gain access to them.

newDog.bark(); // => bark bark!
newDog instanceOf Dog // => true
newDog instanceOf Object // => true

As you can see, the prototype object is at the core of every object within JavaScript. It is how the language establishes classes and the mechanism of inheritance. Understanding the prototype object and its connection to all objects will also aid in having a deeper grasp on Object-Oriented Programming. To learn more about prototypes you can check out the link below.

Object prototypes