DEV Community

Cover image for JAVASCRIPT OBJECT PROTOTYPES
Maame Afia Fordjour
Maame Afia Fordjour

Posted on

2 1 1 1 1

JAVASCRIPT OBJECT PROTOTYPES

Prototypes allow objects in JavaScript to inherit features from one another. Every object possesses a unique quality known as a prototype.

A prototype has its own prototype because the prototype is also another thing. As a result, a prototype chain is created. When a prototype has null for its own prototype, the prototype chain comes to an end.

Because the quantity and complexity of our JavaScript used to be so small, we could previously ignore it with little to no repercussion.

However, with the advancement of browser technology, we now live in a world where complicated client-side behavior is expected, requiring much more work. We can no longer use SOLID programming techniques in our JavaScript when that complexity rises. Once you start working with JavaScript in a more object-oriented manner, several riddles will become evident. These mysteries can be solved by understanding prototypes.

Syntax:

Object.prototype
Enter fullscreen mode Exit fullscreen mode

Example 1: In this example, the object gains a new property.

function Student(a, b) {
    this.name = a;
    this.id = b;
}

Student.prototype.age = 12;

const s1 = new Student("Dinesh", 1234567);

console.log(s1.name +
    " is " + s1.age + " years old.");

Enter fullscreen mode Exit fullscreen mode

Example 2: This example adds a new method to the object.

function Student(a, b) {
    this.name = a;
    this.id = b;
}

Student.prototype.details = function () {
    return this.name + " " + this.id
};

let s1 = new Student("Dinesh", 1234567);

console.log(s1.details());

Enter fullscreen mode Exit fullscreen mode

📌 Genealogy of the Prototype

Every JavaScript object derives its methods and attributes from a prototype:

Date and Array objects are descended from Date.prototype and Array.prototype, respectively.
Person prototypes are the ancestors of Person objects.
At the top of the prototype inheritance hierarchy is the Object.prototype:

Person, Date, and Array objects all derive from Object.prototype.

📌 Giving Objects Properties and Methods

There are occasions when you wish to give every object of a certain type that already exists new properties (or methods).

An object constructor may occasionally need to have new methods or properties added to it.

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (0)

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup 🚀

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

đź‘‹ Kindness is contagious

Dive into this informative piece, backed by our vibrant DEV Community

Whether you’re a novice or a pro, your perspective enriches our collective insight.

A simple “thank you” can lift someone’s spirits—share your gratitude in the comments!

On DEV, the power of shared knowledge paves a smoother path and tightens our community ties. Found value here? A quick thanks to the author makes a big impact.

Okay