--- title: "What are Prototypes in JavaScript?" url: "https://www.bekk.christmas/post/2021/01/what-are-prototypes-in-javascript" authors: ["Petter Sæther Moen"] published: "2021-12-01" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["JavaScript"] keywords: ["prototype", "ecmascript", "object", "objectoriented", "oo"] --- # What are Prototypes in JavaScript? Have you ever inspected an object in your browser's console and stumbled upon the field `[[Prototype]]` or `__proto__`. Or maybe you have seen someone use the mystical prototype field on classes, such as `String.prototype`. Ever wondered what kind of sorcery this prototype is? Great! ️This article will hopefully make things a bit clearer, and make you an advanced prototype wizard. 🧙♂️ ## In short JavaScript prototypes are ordinary objects used to share methods and other properties between instances. The class syntax is just sugar over constructor functions and prototype objects, and inheritance works by walking an object's prototype chain until a matching property is found. - **For:** JavaScript developers with basic OOP knowledge - **Good to know beforehand:** Basic knowledge of object-oriented programming _AI-generated_ ## Categories of Object-Orientation For us to understand what prototypes are we are going to have to talk about categories of object-orientation. Hold on! Before you close this article, I promise this isn't going to be one of those articles that go into the nitty-gritty of programming language theory. I intend only to poke at the surface of the rabbit hole, so this should be digestible by anyone who has basic knowledge of object-oriented programming. Still here? Awesome! Let's briefly look at two different categories of object-orientation, namely class-based and prototype-based object-orientation. 🤓 ### Class-based vs. Prototype-based Object-Orientation Class-based and prototype-based object-orientation are categories referring to how inheritance is handled in the language. In class-based languages, such as Java, inheritance is defined in the class definitions through super-/sub-class relations, while in prototypical languages, objects inherit properties directly from other objects. What does that even mean? Well, instead of JavaScript having classes that contain the objects' shared properties, such as methods, JavaScript instead uses other objects to store this. These objects are what we call _prototypes_. So all instances of the same _"class"_ in JavaScript will share the same prototype object_._ ## Why does JavaScript use Prototypes when it also has Classes? Here's the cool part, there aren't really any classes in JavaScript! 🤯 The `class`-syntax in JavaScript is just _syntactic sugar_ for creating a prototype and an object-constructor function. Confused? Let's look at what this means. The following example shows how you could implement a `Santa` class in JavaScript. The `Santa` class has some property `hasEatenCookies` which is set in the constructor of the class. In addition, we also have a method to check if Santa is hungry. 🎅🍪🤰 ```jsx class Santa { constructor(hasEatenCookies) { this.hasEatenCookies = hasEatenCookies; } isHungry() { return this.hasEatenCookies === false; } } ``` Since JavaScript doesn't really have classes, this would be transformed into a prototype object and a function for constructing `Santa` objects, like the following: ```jsx const santaPrototype = { isHungry: function() { return this.hasEatenCookies === false; } } function santaConstructor(hasEatenCookies) { const santaObject = { hasEatenCookies: hasEatenCookies } Object.setPrototypeOf(santaObject, santaPrototype) return santaObject } ``` Note: This is a somewhat simplified example of a class transformation, if you would like to see a more complete transformation you can check out [this Babel REPL](https://babeljs.io/repl#?browsers=defaults%0A&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=MYGwhgzhAEDKYDsAuZoG8BQ1vAPYIiQCcBXYJXIgCgAtIBRMJAUwQGFdcBrAS2YgCU6LNlFIaPCADo6ERi3ade_aAF5os-aw7c-EANwjoAXxEjJACRIIA5kQCeVIZlHQizJCSIJo4yTIYmbSU9NVV1ADMwEAhmQ2xTYyA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=&prettier=false&targets=&version=7.15.8&externalPlugins=%40babel%2Fplugin-transform-classes%407.15.4&assumptions=%7B%7D). As we can see, the methods of the `Santa` class has been put into a normal object, while the constructing of objects has been made into a standard function. The `santaConstructor` function simply creates an object with the `hasEatenCookie` property, and the object is then assigned the `santaPrototype`. ## How does Inheritance work with Prototypes? It is actually quite simple. Since prototypes themselves are just objects, they can themselves also have prototypes. So if we made a subclass, `BadSanta`, of our `Santa` class, this would result in our `BadSanta` prototype having the Santa prototype as its prototype... That was a lot of prototype at once. Let's instead look at some code. Below we have implemented our `BadSanta` class, which introduces a method to check if `BadSanta` cares if you've been naughty or nice. ```jsx class BadSanta extends Santa { constructor(hasEatenCookies) { super(hasEatenCookies) } function caresIfYouveBeenNaughtyOrNice() { return false; } } ``` We could then create an instance of `BadSanta` and call the methods from both our `BadSanta` and our `Santa` class. ```jsx const willie = new BadSanta(false); willie.caresIfYouveBeenNaughtyOrNice(); // false willie.isHungry(); // true ``` What is happening here is that for every time we try to reference an attribute on an object, there's a check performed to see if the attribute exists on the object. If it doesn't exist it will do the same check on its prototype, recursively. So when we do `willie.isHungry()`, JavaScript will check if `isHungry` exists on the object `willie`. Since `willie` doesn't have any attribute with that name it will check its prototype, `BadSanta`. `BadSanta` doesn't have this attribute either, so it will check its prototype, `Santa`. Fortunately, the `Santa` prototype has this attribute, and we can use this function for our function call. ## That's it! As we have seen, prototypes aren't all that mystical. They are just objects used to share properties between objects, such as the methods we would define in a class. We also saw how inheritance is handled in JavaScript, where class-based languages has classes with superclasses, JavaScript instead has prototypes with parent prototypes. This is possible since prototypes themselves are just objects. ![Wait, it's all objects? Always has been.](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/236fe7d69848cdaf5dbe3083444407861db1d200-800x416.jpg) ## Relevant resources recommended by the author - [Object prototypes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes): The MDN docs about object prototypes