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? 

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. 

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. 

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 

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!

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