What the are Prototypes in JavaScript

Prototype is one of the most confusing concepts in JavaScript to wrap your head around. even seasoned JavaScript developers still have a hard time understanding prototyping and how to apply it in their code base.

JavaScript uses Prototypes and constructors to mimic class.
But in JavaScript, we dont have classes, what we have is object. so how can we implement inheritance using objects?

Let say we have a Car object, we can define another object called Vehicle and we add all the common behavior or common method to the Vehicle object, like:

drive(startLocation, endLocation) and some how, we can link the Car object and the Vehicle object. and now we refer to Vehicle object as the prototype of the Car.

So prototype is just the parent of another object. most materials out there makes prototypes sounds complicated. so whenever you hear the word prototyping just know it is just parent.

Every object in JavaScript has a prototype or parent except for one object. objects inherits all the members define in his prototype. let see that in action.

open google chrome and go to the developer tool on the console tab, define an empty object as shown below:

you will notice a property called [[Prototype]] . you will also notice other properties like constructor, hasOwnProperty,and so on.

Every object has a constructor property which reference the function that was used to construct that object.

let see a diagrammatic representation of the x object.

so we have this x object in memory, and the x object is linked another object (lets call it the base object ). the x object inherits the properties and methods of the base object.

So every object we create in JavaScript, directly or indirectly inherits from the base object.

so the base object is the root of all object in JavaScript and so doing, it doesnt have a prototype or parent.

let say we create another object in memory called myobject.

you will observe that both x object and myobject have the same properties and methods, because they inherit from the same baseobject. and based on the fact that they are empty objects. that is, they do not have properties and methods of their own except for the the once they inherit from the baseobject.

Back in you browser developer tool, if you type in Object.getPrototypeOf(x).

what you see above is the object base with its members.
an expression like as shown below will result to true. try it out on your browser developer tool.

Object.getPrototypeOf(x) === Object.getPrototype(myobject); // true 

The reason is because both x and myobject has exact same prototype.

when you access the property or method of an object, JavaScript engine first look for that property on the object if it cant find it, it looks at the [[prototype]] for that object which we called base object. in JavaScript, this is what is referred to as prototypical inheritance.

Conclusion

Overall, prototypes are a powerful feature of JavaScript that allows objects to inherit properties and methods from other objects. They are very vital when one wants to create multiple objects with the same properties and methods, which makes your code DRY.