DEV Community

Cover image for What are Prototypes in JavaScript?
Rahul
Rahul

Posted on

7 1

What are Prototypes in JavaScript?

The prototype is the simple and the hardest feature of JavaScript. Once you get the main concept that it's just a tree or "chain" then all of those methods like Object.getPrototypeOf() or the instanceof operator and even constructors.


Objects in JS

Let's cover some JavaScript objects basics first...

const obj - {
    x: 1, // property with key x and value 1
    y: 2, 
    doubleY: function() {
        return this.y * 2 // this keyword
    }
}

obj.x        // 1 - dot access
obj.['y']    // 2 - dynamic access
obj.doublyY() // 4 - method call

obj.toString() // '[object Object]'

// WAIT...!! Who defined obj.toString? 
Enter fullscreen mode Exit fullscreen mode

So, What is the prototype?

Every JavaScript object has a second object associated with it. This is called its prototype. Objects inherit all of the properties of their prototypes.

const obj = {x: 1}

// get the prototype of obj: 
Object.getPrototypeOf(obj); // Object

//obj inherits properties from Object
obj.toString() // '[object Object]'
// We haven't defined the toString method but obj inherited it from it's prototype. 
Enter fullscreen mode Exit fullscreen mode

Creating objects

Now, let's back to objects basics for a minute. What are the ways we can create one?

// First way
let a = {a: 1}; 

// second way
let b = new Object(); 
b.x = 1; 

Object.getPrototypeOf(a) // Object.prototype
Object.getPrototypeOf(b) // Object.prototype
// The objects created by new Object () inherits from Object.prototype just as the object creared with { } does. 
Enter fullscreen mode Exit fullscreen mode

There's also a third way of creating an object and it gives you freedom over which object to be used as a prototype of the newly created object.

// Third way

let c = Object.create(null, {})
Object.getPrototypeOf(c) // null
// we just created an object without prototype 
Enter fullscreen mode Exit fullscreen mode

Object.create()

To Object.create() method creates a new object, using an existing object as the prototype of the newly created object. The first parameter is the existing object. The second is the newly created object.

const obj = {a: 1, b: 2}
const obj2 = Object.create(obj, {})
obj2.j = 10
obj2.j // 10 (own property)

Object.getPrototypeOf(obj2) // obj
obj2.a // 1 (inherited property)
//obj2 inherited the properties of obj

// what if we go all the way down? 
Object.getPrototypeOf(obj2) // obj
Object.getPrototypeOf(obj) // Object.prototype
Object.getPrototypeOf(Object.prototype) // null
// This is called the prtotype chain!


Enter fullscreen mode Exit fullscreen mode

Prototype Chain

(TWIST 😉) There are objects without a prototype. But 99% of the objects have it. JavaScript's normal behaviour is giving a prototype to every object you create and making it part of the prototype chain, Only one object if the non-user defined objects don't have a prototype. This is Object.prototype which evaluates to null. All other objects step on the top of Object.prototype and they all form the chain.

As we in the example you can also use Object.create() tp define an object without a prototype. Which I don't recommend if you don't know what you're doing.


⌛Thanks For Reading | Happy Coding⚡

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from Here

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay