JavaScript Prototypes. It Doesn't Have to Be Complicated.

JavaScript Prototypes. It Doesn't Have to Be Complicated.

JavaScript prototypes. It doesn't have to be complicated. Understanding the complicated of Javascript Prototypes is essential, if you want to dive deeper into Javascript. Every object in JavaScript has a private [[Prototype]] prototype. How doesn't get the prototype chain actually work?

It's hard to skip prototypes (or the prototype chain or prototypal inheritance) if you want to dive deeper into JS development (Not only pure JS, but also Node.js, Frameworks like Vue.js, React.js, Angular,...).

If you are like me a few years ago and get some serious headache each time you have to deal with prototypes in JavaScript, this will probably be THE article you were looking for to get your head wrapped around the principle of prototypes in JS.

From the  MDN documentation (don't be scared, we'll clarify everything below):

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]]) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

Private [[Prototype]] property

Refer back to the below illustration whenever you feel the need, it might help you to wrap your head around this concept easier.

Prototype chain

So let's start from the base. Every object in JavaScript has a private [[Prototype]] prototype, which holds a reference to another object (or null). This means, that our new object will have access to methods and properties of that referenced object.

javascript prototypes prototypal inheritance prototype chain

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Prototypal Inheritance — The second pillar of Javascript

What we will learn here will help us understand Object-oriented programming(OOP).

Objects, [[Prototype]] and Prototypal Inheritance in JavaScript

Prototypal inheritance is topic every developer should know. Learn about what prototypal inheritance is, how it works and how to use it.

Prototypal Inheritance In JavaScript | JavaScript Prototypal Inheritance Explained

This video on Prototypal Inheritance in JavaScript will take you through the basics of how inheritance is integrated into JavaScript before introducing classes. In this tutorial, Javascript Prototypal Inheritance is explained with the help of examples. We’ll also understand the Object.create() method of creating an object in JavaScript.

Prototype and Inheritance in JavaScript

In brushing up on my foundational JavaScript knowledge, I realized that I had never done a deep-dive on prototype. In the early days of my learning JavaScript, I had come across the __proto__ object property in the console. I clicked on it, saw a whole bunch of properties that I was not immediately concerned with, and made a mental note to someday investigate.

Brief prototypical inheritance vs classical inheritance in Javascript

Brief prototypical inheritance vs classical inheritance in Javascript. You have probably heard of the terms prototypical inheritance and classical inheritance a lot. But what do they actually mean?