amerrika

Prototypes

Prototypes are the mechanism by which JavaScript objects inherit methods and properties from one another. Since prototypes are an important part of JavScript, it's important to understand the basics of this concept.

The goal of this article is to show how prototype object of constructor functions is used to pass methods and properties to its instances.

Prototype as a property of functions

In JavaScript, functions are objects. They are instances of the Function() constructor and this way every created function inherit certain methods and properties. One such inherited property is prototype. Initial value of the prototype is an empty object. Arrow functions are an exception, they do not have the prototype object and cannot be used as a constructor.

Let's create a simple function and we'll see that by default it contains the prototype property

amerrika

Inheritance

After grasping the concept of prototype objects in the first article, Prototypes, we will focus on inheritance. Without delving too deeply or covering all aspects, this article should answer the following questions:

• How does inheritance work?
• Why is it an important concept in JavaScript?
• Why is it useful for us to understand it?

Prototypal inheritance

This type of inheritance is based on the prototype chain. A prototype object is simply a regular object. This is why it's necessary to have a mechanism that allows created objects to inherit methods and properties. We briefly mentioned this mechanism in our "Prototypes" article. It is generally called the internal prototype (historically proto but the use of it has been deprecated).

In what ways can this concept be helpful in JavaScript? Suppose we have three objects, A, B, and C, that are connected by prototypal inheritance. If object B has a property that object A n

amerrika

Prototypes and inheritance exercise

After reading the first two articles, "Prototypes" and "Inheritance," it's time to practice what we've learned. The example I came up with for this article is for learning purposes only. It's not related to real-world use cases.

Coming up with a good example turned out to be tricky. One reason is the difficulty of coming up with an example with meaningful logic and hierarchy. Hopefully, my solution will do the job.

Explaining our case

The idea is as follows:

• We need to create task items of some kind (like to-do lists). They could represent "li" elements, for example.
• Now, let's assume there are two types of these items based on priority: primary and secondary.
• Further, let's assume that all task items have the same parent element (ul) and CSS class. One way to provide this information to every task instance is through prototypal inheritance. Additionally, if we need to change the parent element or class name, every task item will detect the change.