JavaScript Fundamentals: Prototypical Inheritance

JavaScript is a prototype-based language, meaning that objects inherit directly from other objects. The language is designed such that objects are linked together in a chain, with the topmost object in the chain being the root object. Any object can be used as a prototype for another object, and the chain of objects can be arbitrarily long.

What is a prototype in JavaScript?

A prototype is an object that is used as a blueprint for creating other objects. When an object is created using a prototype, the new object inherits all of the properties and methods of the prototype.

Sidenote: Is everything an object in JavaScript?

No, not everything is an object. In JavaScript, there are six data types that are not objects: undefined, null, boolean, number, string, and symbol. Additionally, although functions are technically objects, they are not considered to be part of this group.

How do JavaScript prototypes compare with other inheritance methodologies?

JavaScript prototypes are different from other inheritance methodologies in that they allow for objects to inherit directly from other objects. This means that you can create a chain of objects, with each object inheriting from the object before it.

In JavaScript, an object can be created by using an object literal, which is a set of comma-separated name/value pairs enclosed in curly braces:

var obj = {
 name: "John",
 age: 30
};

This object inherits directly from the root object, which is the default object in JavaScript. The root object has no prototype, and therefore, all objects in JavaScript inherit from it.

The root object in JavaScript is the global object. The global object provides a namespace for all global variables and functions.

Pros and Cons of Prototypes

The advantage of using prototypes is that you don't have to create a new instance of an object to add new properties and methods to it. You can simply add them to the prototype, and they will be available to all instances of that object.

Another advantage of prototypes is that they allow you to share code between objects. If you have two objects that need to share some code, you can put that code in a prototype, and both objects will have access to it.

The disadvantage of prototypes is that they can make your code harder to understand. When you're looking at a piece of code, it can be hard to tell where the properties and methods are coming from. Is that property coming from the object itself, or is it coming from the prototype?

If you're working on a large project with many developers, it's important to agree on a convention for how you will use prototypes. That way, everyone on the team will be on the same page, and your code will be easier to understand.

Prototypes and inheritance

The prototype property of an object is used to specify the object from which it inherits. In the above example, the prototype property of the obj object is not specified. Therefore, it inherits from the root object.

It is possible to override the prototype property of an object. For example:

var obj = {
 name: "John",
 age: 30
};

obj.prototype.age = 40;

In this case, the prototype property of the obj object is set to an object with a single property, age, which has a value of 40. Therefore, the obj object now inherits from this object, and its age property is set to 40.

Do all objects inherit?

The default is yes but you can override this. It is possible to create an object that doesn't inherit from any other object. This can be done by setting the prototype property of an object to null:

var obj = {
 name: "John",
 age: 30
};

obj.prototype = null;

In this case, the obj object will not inherit from any other object.

The new keyword

Objects can be created from other objects by using the new keyword. For example:

var obj = new Object();

This creates an empty object that doesn't inherit from any other object. The properties of this object can then be set as follows:

obj.name = "John";
obj.age = 30;

It is also possible to create an object that inherits from another object by using the new keyword. For example:

var obj = new Object();

obj.prototype = {
 name: "John",
 age: 30
};

This creates an object that inherits from the object specified by the prototype property. The properties of the prototype object can be overridden as follows:

obj.name = "Jane";

In this case, the name property of the obj object is set to "Jane", overriding the value inherited from the prototype object.

Adding new properties and methods

The prototype property of an object can also be used to add new properties and methods to an object. For example:

var obj = {
 name: "John",
 age: 30
};

obj.prototype.sayHello = function() {
 console.log("Hello!");
};

In this case, the prototype object of the obj object is extended with a new method, sayHello. This method can then be invoked as follows:

obj.sayHello(); //Hello!

It is also possible to add new properties to an object by using the prototype property. For example:

var obj = {
 name: "John",
 age: 30
};

obj.prototype.lastName = "Smith";

In this case, the prototype object of the obj object is extended with a new property, lastName. This property can then be accessed as follows:

console.log(obj.lastName); //Smith

Prototypical inheritance is a powerful mechanism that allows objects to inherit from other objects. It is easy to use and understand, and it is widely used in JavaScript libraries and frameworks.

If you're still fuzzy on what prototypes are in JavaScript, here's an article I wrote a while back on the topic.