{"id":190,"date":"2022-01-26T18:29:51","date_gmt":"2022-01-26T18:29:51","guid":{"rendered":"http:\/\/codebitshub.com\/?p=190"},"modified":"2023-09-17T16:07:37","modified_gmt":"2023-09-17T16:07:37","slug":"javascript-prototypes","status":"publish","type":"post","link":"https:\/\/codebitshub.com\/javascript-prototypes\/","title":{"rendered":"Why Javascript Prototypes are More Painful than Stepping on a Lego"},"content":{"rendered":"<p style=\"text-align: justify;\">The javascript prototypes are one of the most important concepts of Javascript since it is the mechanism by which Javascript objects inherit features from one another.<\/p>\n<p style=\"text-align: justify;\">Additionally, inheritance is a common concept in the most modern programming languages, and many times people, even more, experienced programmers, are having difficult times understanding and using it in certain situations.<\/p>\n<p style=\"text-align: justify;\">As I mentioned before, the javascript prototypes are the foundation stone on how the Javascript implements the inheritance between objects, therefore it can be proved a difficult concept to familiarize with.<\/p>\n<p style=\"text-align: justify;\">In this article, you are going to learn what a prototype is, the logic behind the prototype chaining, what is the property shadowing technique, and how the Javascript engine implements object inheritance.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Requirements\" >Requirements<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Javascript_Objects\" >Javascript Objects<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Javascript_constructor\" >Javascript constructor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#%E2%80%98this_keyword_in_Javascript\" >\u2018this\u2019 keyword in Javascript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#What_is_a_Javascript_prototype_object\" >What is a Javascript prototype object?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#What_if_I_want_to_share_new_properties\" >What if I want to share new properties?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Replace_Javascript_prototypes\" >Replace Javascript prototypes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Update_Javascript_prototypes\" >Update Javascript prototypes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Javascript_Prototypes_Chaining\" >Javascript Prototypes Chaining<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Shadowing_Javascript_prototypes\" >Shadowing Javascript prototypes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Inheritance\" >Inheritance<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Object_literal_method\" >Object literal method<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Objectcreate_method\" >Object.create method<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Constructor_method\" >Constructor method<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#ES6_class_method\" >ES6 class method<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Requirements\"><\/span>Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">In order to understand better these concepts, you have to be familiar with the following concepts<\/p>\n<ul style=\"text-align: justify;\">\n<li>Javascript objects<\/li>\n<li>Javascript object constructor<\/li>\n<li>this keyword<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">For reasons of completeness of this article, I will give a short definition of each of these terms.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Javascript_Objects\"><\/span><a href=\"https:\/\/www.w3schools.com\/js\/js_objects.asp\" target=\"_blank\" rel=\"noopener\">Javascript Objects<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">You can consider JavaScript objects as containers for named values called properties. Objects can also have methods that are basically properties with functions as values.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Javascript_constructor\"><\/span><a href=\"https:\/\/www.w3schools.com\/js\/js_object_constructors.asp\" target=\"_blank\" rel=\"noopener\">Javascript constructor<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">The main purpose of a constructor is to create and initialize an object instance. You can call a constructor using the <strong>new<\/strong>\u00a0keyword.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"%E2%80%98this_keyword_in_Javascript\"><\/span><a href=\"https:\/\/www.w3schools.com\/js\/js_this.asp\" target=\"_blank\" rel=\"noopener\">\u2018this\u2019 keyword in Javascript<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">The JavaScript <a href=\"http:\/\/codebitshub.com\/this-in-javascript\/\" target=\"_blank\" rel=\"noopener\"><strong>this<\/strong><\/a>\u00a0keyword refers to the object it belongs to.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"What_is_a_Javascript_prototype_object\"><\/span>What is a Javascript prototype object?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As you may know, <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\" target=\"_blank\" rel=\"noopener\">Javascript<\/a> is a dynamic prototype-based object-orientation language.<\/p>\n<p style=\"text-align: justify;\">A prototype is a <strong>hidden built-in property<\/strong> that you can find in every Javascript object by default.<\/p>\n<p style=\"text-align: justify;\">Furthermore, a prototype is a special type of enumerable object itself, so each prototype has its own prototype, making a prototype chain. The chain ends when the last prototype object has null for its own prototype.<\/p>\n<p style=\"text-align: justify;\">Additionally, you can use a prototype as a basis to create other objects.<\/p>\n<p style=\"text-align: justify;\">Each object that you create from the same prototype, will share a similar structure meaning that will contain the properties and methods of its prototype.<\/p>\n<p style=\"text-align: justify;\">In order to have a better understanding of this let\u2019s see some examples.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"gOXOrZE\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/gOXOrZE\"><br \/>\nattach properties to object<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">In the example above, I create two objects named <strong>south_china_tiger<\/strong> and <strong>indo_chinese_tiger<\/strong> from the same function constructor.\u00a0 So they share a similar structure.<\/p>\n<p style=\"text-align: justify;\">As you can see the following properties <strong>numOfLegs<\/strong>, <strong>eats<\/strong>, <strong>breed<\/strong> are defined in both objects.<\/p>\n<p style=\"text-align: justify;\">Apart from that, in each object, I can define its own properties\/methods. So in this case you can see that the property <strong>age <\/strong>is defined only for the <strong>indo_chinese_tiger.<\/strong><\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"What_if_I_want_to_share_new_properties\"><\/span>What if I want to share new properties?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">In order to add new properties that will be shared across all the created objects, I can use the prototype property and add them there.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"XWzWzwx\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/XWzWzwx\"><br \/>\nprototype construction and shared properties<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">In the above example, you can see that the property <strong>age<\/strong> is added to the prototype and is shared across the <strong>south_china_tiger<\/strong> and <strong>indo_chinese_tiger<\/strong>\u00a0objects.<\/p>\n<p style=\"text-align: justify;\">As you can see in the above example, the <strong>Animal&#8217;s<\/strong> prototype property can be accessed using <strong>&lt;function-name&gt;.prototype<\/strong>.<\/p>\n<p style=\"text-align: justify;\">On the other hand, an object (instance) does not expose its prototype property. Instead, you can access it using the <strong>&lt;object-name&gt;.__proto__ <\/strong>property or with the method <strong>Object.getPrototypeOf()<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Additionally, you can see that each prototype object has the following properties by default.<\/p>\n<pre style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-226 size-medium\" src=\"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-300x280.png\" alt=\"javascript_prototypes_structure\" width=\"300\" height=\"280\" srcset=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-300x280.png 300w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-500x466.png 500w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-400x373.png 400w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-250x233.png 250w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-200x187.png 200w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-100x93.png 100w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-76x71.png 76w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure-50x47.png 50w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototypes_structure.png 506w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/pre>\n<p style=\"text-align: justify;\">Furthermore, as MDN <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Object_prototypes\">mentions<\/a> the standard way to access an object\u2019s prototype, since ECMAScript 5 and is available since IE 9, is the <strong>Object.getPrototypeOf()<\/strong> method.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Replace_Javascript_prototypes\"><\/span>Replace Javascript prototypes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Let\u2019s see an example of replacing a prototype object.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"gOXOvpe\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/gOXOvpe\"><br \/>\nReplacing Prototype Object<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">In the code above, I first create two objects from the same constructor function and prototype. Next, I am replacing the prototype object with a new object.<\/p>\n<p style=\"text-align: justify;\">As I already mentioned, each object&#8217;s prototype is linked to the function&#8217;s prototype object.<\/p>\n<p style=\"text-align: justify;\">So what is going to happen if you replace the function&#8217;s prototype object, is that only the new objects are going to be linked to the changed prototype object because the new prototype object will reference a brand new address in memory.<\/p>\n<p style=\"text-align: justify;\">On the other hand, the objects that were created before the prototype replacement will still link to the previous prototype of function which is the previous memory address.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Update_Javascript_prototypes\"><\/span>Update Javascript prototypes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Let\u2019s try this time to update a prototype instead of a replacement.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"xxPxYvp\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/xxPxYvp\"><br \/>\nUpdating prototype properties<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">As you can see in the code above, if you update the prototype properties then older and new objects will share the same updated property.<\/p>\n<p style=\"text-align: justify;\">This happens because the prototype object is a single object stored that references a very specific address in memory and is linked to every object created with the same constructor function.<\/p>\n<p style=\"text-align: justify; border: yellow 5px solid; padding: 5px; background-color: #ffffcc;\"><strong>Note:<\/strong> It is not advisable to\u00a0modify the prototypes of standard JavaScript objects. You should modify only your own prototypes.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Javascript_Prototypes_Chaining\"><\/span>Javascript Prototypes Chaining<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">As it is already mentioned, when a new object is created then it inherits all the properties and methods from its prototype. The prototype itself is an object, so it inherits all the properties and methods from its own prototype.<\/p>\n<p style=\"text-align: justify;\">So when a property of an object is accessed the Javascript engine, will search in the properties of the object to find it.<\/p>\n<p style=\"text-align: justify;\">If the property does not exist, then it goes up in the hierarchy and checks the prototype object of the Object function, because all the objects are derived from the Object function in JavaScript.<\/p>\n<p style=\"text-align: justify;\">The same process will take place for each prototype object until the property is found or the object will be equal to null which means the end of the prototype chain.<\/p>\n<p style=\"text-align: justify;\">You can see how the Javascript engine walks through the prototype chain in the following example<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"vYWYRME\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/vYWYRME\"><br \/>\nPrototype chain<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">The above code will print in the logs the following<\/p>\n<p style=\"background-color: #fbfaf8; padding: 5px; font-family: 'Ubuntu Mono'; text-align: justify;\">Animal.prototype {}<br \/>\nObject.prototype {}<br \/>\nnull<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-285 size-medium\" src=\"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-300x113.png\" alt=\"javascript_prototypes_chain\" width=\"300\" height=\"113\" srcset=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-300x113.png 300w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-500x188.png 500w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-400x151.png 400w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-250x94.png 250w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-200x75.png 200w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-100x38.png 100w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-76x29.png 76w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain-50x19.png 50w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_chain.png 502w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: justify;\">As you can see in the code above, I first define a function constructor named <strong>Animal<\/strong> and then an object named <strong>south_china_tiger<\/strong> from it.<\/p>\n<p style=\"text-align: justify;\">In order to walk through the prototype chain, I am using a do-while loop. The loop will continue to execute until the prototype object will equal to null.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Shadowing_Javascript_prototypes\"><\/span>Shadowing Javascript prototypes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Let\u2019s see what will happen if you define a property in an object that is predefined in the object\u2019s prototype.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"jOaOxEY\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/jOaOxEY\"><br \/>\nShadowing properties<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">Since I already explained the concept of the prototype chain I can use it to explain what is happening in the above code.<\/p>\n<p style=\"text-align: justify;\">When the Javascript engine accesses the property <strong>eats<\/strong> of the object <strong>south_china_tiger<\/strong> it will first look in the object <strong>south_china_tiger<\/strong>.<\/p>\n<p style=\"text-align: justify;\">It will find that it is defined there and will stop walking the prototype chain immediately.<\/p>\n<p style=\"text-align: justify;\">The Javascript engine would access the <strong>eats<\/strong>\u00a0property in the prototype only if it wasn\u2019t defined as a property in the <strong>south_china_tiger<\/strong>\u00a0object.<\/p>\n<p style=\"text-align: justify;\">This technique is called <strong>shadowing<\/strong>\u00a0the property.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Inheritance\"><\/span>Inheritance<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Usually, you can use the prototype objects to find properties and methods of an object and\/or to implement inheritance in JavaScript.<\/p>\n<p style=\"text-align: justify;\">In this section, you can see how you can implement prototypical inheritance in Javascript.<\/p>\n<p style=\"text-align: justify;\">There are various ways so let&#8217;s see them by example.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Object_literal_method\"><\/span>Object literal method<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">The first method is using <strong>object literal<\/strong>.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"QWOWxYw\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/QWOWxYw\"><br \/>\nInheritance &#8211; Object literal <\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">In the above code, I am using the method <strong>Object.setPrototypeOf<\/strong> to set the prototype of <strong>my_dog<\/strong> object to the <strong>dog&#8217;s<\/strong> object.<\/p>\n<p style=\"text-align: justify;\">As you can see, the object <strong>my_dogs<\/strong> inherits all the properties and methods from the <strong>dogs<\/strong> object while in parallel is preserving its own properties and methods.<\/p>\n<p style=\"text-align: justify;\">In the logs, you can also see that the constructor of the <strong>my_dogs<\/strong>\u00a0object is the Object constructor.<\/p>\n<p style=\"text-align: justify;\">As an alternative to the <strong>Object.setPrototypeOf<\/strong> method, I could use the following line of code to set the prototype of the <strong>my_dogs<\/strong> object<\/p>\n<p style=\"background-color: #fbfaf8; padding: 5px; font-family: 'Ubuntu Mono'; text-align: justify;\">my_dogs.<strong>__proto__<\/strong> = dogs;<\/p>\n<p style=\"text-align: justify;\">I would not encourage this approach though as I mentioned earlier.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Objectcreate_method\"><\/span>Object.create method<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">As an alternative I can use the <strong>Object.create<\/strong> method too.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"YzEzvmJ\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/YzEzvmJ\"><br \/>\nInheritance &#8211; Object.create<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">In the above, code you can see again, that the <strong>my_dogs<\/strong> object inherits all the properties and methods of the <strong>dogs<\/strong> object.<\/p>\n<p style=\"text-align: justify;\">If you open the console logs you can see that the prototype of the <strong>my_dogs<\/strong> object is still the Object constructor.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-264 size-medium\" src=\"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create-300x221.png\" alt=\"javascript_prototypes_structure\" width=\"300\" height=\"221\" srcset=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create-300x221.png 300w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create-400x294.png 400w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create-250x184.png 250w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create-200x147.png 200w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create-100x74.png 100w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create-76x56.png 76w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create-50x37.png 50w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/prototype_object_create.png 424w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Constructor_method\"><\/span>Constructor method<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Another method to implement the prototypal inheritance in Javascript is the constructor method.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"podoVvL\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/podoVvL\"><br \/>\nInheritance &#8211; constructor method<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">In the code above, I create an <strong>Animal<\/strong> constructor function with properties <strong>num_of_legs<\/strong>, <strong>eats<\/strong>, <strong>breed<\/strong>, <strong>sound<\/strong>. Next, I add the <strong>getDetails<\/strong>\u00a0function to its prototype.<\/p>\n<p style=\"text-align: justify;\">Now I want to create an object with the name <strong>Dog<\/strong> that will inherit all of the properties and methods of <strong>Animal<\/strong>.<\/p>\n<p style=\"text-align: justify;\">In order to do that, I will use the <strong>Dog<\/strong> constructor function that will pass all of its arguments to the Animal constructor function with the help of <strong>Animal.call<\/strong> method.<\/p>\n<p style=\"text-align: justify;\">As you can see in the logs, the constructor of the <strong>Dog<\/strong> object is the <strong>Animal<\/strong> object.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-265 size-medium\" src=\"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-300x162.png\" alt=\"javascript_prototypes_structure_constructor_method_logs\" width=\"300\" height=\"162\" srcset=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-300x162.png 300w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-500x269.png 500w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-400x216.png 400w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-250x135.png 250w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-200x108.png 200w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-100x54.png 100w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-76x41.png 76w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs-50x27.png 50w, https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/constructor_method_logs.png 514w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: justify;\">Finally, the <strong>Dog<\/strong>\u00a0object will inherit the <strong>getDetails<\/strong> method of its prototype despite the fact that I did not define it in its own properties and methods.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"ES6_class_method\"><\/span>ES6 class method<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Javascript Classes are introduced in <a href=\"https:\/\/www.w3schools.com\/js\/js_es6.asp\" target=\"_blank\" rel=\"noopener\">ECMAScript 2015<\/a> version (ES6) and are templates for Javascript Objects.<\/p>\n<p style=\"text-align: justify;\">You can consider Javascript Classes as just syntactical sugar on top of prototypical inheritance that derives new classes from other classes.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0px; padding: 1em; text-align: justify;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"dyZyjyj\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/dyZyjyj\"><br \/>\nInheritance &#8211; ES6 class<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">As you can see in the code above, I have two classes where the class <strong>My_Dogs<\/strong>\u00a0extends the class <strong>Dogs<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Each class has a constructor function. The class <strong>My_Dogs<\/strong> calls the constructor function of the <strong>Dogs<\/strong>\u00a0class and passes all the required arguments to the <strong>Dogs<\/strong>\u00a0constructor.<\/p>\n<p style=\"text-align: justify;\">Furthermore, in the class <strong>My_Dogs<\/strong> I defined the <strong>getDetails<\/strong> method.<\/p>\n<p style=\"text-align: justify;\">The object\u00a0<strong>my_dogs<\/strong> will inherit all the properties\/methods of the <strong>Dogs<\/strong> class plus its own.<\/p>\n<p style=\"text-align: justify;\">Finally, you can notice in the logs that the prototype of <strong>My_Dogs<\/strong> class is the <strong>Dogs<\/strong> class.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Let\u2019s summarize what you have learned so far<\/p>\n<ul style=\"text-align: justify;\">\n<li style=\"text-align: justify;\">For every Javascript object, there is a hidden built-in prototype property<\/li>\n<li style=\"text-align: justify;\">Each object inherits all the properties and methods of its prototype<\/li>\n<li style=\"text-align: justify;\">You can modify the prototype object of an object to share properties and methods between objects<\/li>\n<li style=\"text-align: justify;\">The Javascript engine walks through the Javascript prototypes chain in order to access a property or method for an object until the prototype equals the null object<\/li>\n<li style=\"text-align: justify;\">you can use the shadowing technique to override a property or method of a prototype<\/li>\n<li style=\"text-align: justify;\">you can implement inheritance with Javascript prototypes in various ways using object literals, the Object.create method, the constructor method, and the ES6 class method<\/li>\n<\/ul>\n<p>Happy coding!<\/p>\n<p style=\"text-align: justify;\"><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The javascript prototypes are one of the most important concepts of Javascript since it is the mechanism by which Javascript objects inherit features from one another. Additionally, inheritance is a common concept in the most modern programming languages, and many times people, even more, experienced programmers, are having difficult times understanding and using it in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11],"tags":[17],"post_folder":[],"class_list":["post-190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-languages","tag-javascript","post-list-post__standard"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Why Javascript Prototypes are More Painful than Stepping on a Lego<\/title>\n<meta name=\"description\" content=\"codebitshub.com The javascript prototypes are the mechanism by which Javascript objects inherit features from one another.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codebitshub.com\/javascript-prototypes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Javascript Prototypes are More Painful than Stepping on a Lego\" \/>\n<meta property=\"og:description\" content=\"codebitshub.com The javascript prototypes are the mechanism by which Javascript objects inherit features from one another.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codebitshub.com\/javascript-prototypes\/\" \/>\n<meta property=\"og:site_name\" content=\"codebitshub.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-26T18:29:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-17T16:07:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1125\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myapos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myapos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/\"},\"author\":{\"name\":\"myapos\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\"},\"headline\":\"Why Javascript Prototypes are More Painful than Stepping on a Lego\",\"datePublished\":\"2022-01-26T18:29:51+00:00\",\"dateModified\":\"2023-09-17T16:07:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/\"},\"wordCount\":1871,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"keywords\":[\"javascript\"],\"articleSection\":[\"Programming Languages\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/\",\"name\":\"Why Javascript Prototypes are More Painful than Stepping on a Lego\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"datePublished\":\"2022-01-26T18:29:51+00:00\",\"dateModified\":\"2023-09-17T16:07:37+00:00\",\"description\":\"codebitshub.com The javascript prototypes are the mechanism by which Javascript objects inherit features from one another.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-prototypes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codebitshub.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Javascript Prototypes are More Painful than Stepping on a Lego\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"name\":\"codebitshub.com\",\"description\":\"A blog about programming and coding\",\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codebitshub.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\",\"name\":\"codebitshub.com\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\",\"name\":\"myapos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"caption\":\"myapos\"},\"url\":\"https:\\\/\\\/codebitshub.com\\\/author\\\/myapos\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why Javascript Prototypes are More Painful than Stepping on a Lego","description":"codebitshub.com The javascript prototypes are the mechanism by which Javascript objects inherit features from one another.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codebitshub.com\/javascript-prototypes\/","og_locale":"en_US","og_type":"article","og_title":"Why Javascript Prototypes are More Painful than Stepping on a Lego","og_description":"codebitshub.com The javascript prototypes are the mechanism by which Javascript objects inherit features from one another.","og_url":"https:\/\/codebitshub.com\/javascript-prototypes\/","og_site_name":"codebitshub.com","article_published_time":"2022-01-26T18:29:51+00:00","article_modified_time":"2023-09-17T16:07:37+00:00","og_image":[{"width":1920,"height":1125,"url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","type":"image\/jpeg"}],"author":"myapos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myapos","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codebitshub.com\/javascript-prototypes\/#article","isPartOf":{"@id":"https:\/\/codebitshub.com\/javascript-prototypes\/"},"author":{"name":"myapos","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61"},"headline":"Why Javascript Prototypes are More Painful than Stepping on a Lego","datePublished":"2022-01-26T18:29:51+00:00","dateModified":"2023-09-17T16:07:37+00:00","mainEntityOfPage":{"@id":"https:\/\/codebitshub.com\/javascript-prototypes\/"},"wordCount":1871,"commentCount":0,"publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"image":{"@id":"https:\/\/codebitshub.com\/javascript-prototypes\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","keywords":["javascript"],"articleSection":["Programming Languages"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codebitshub.com\/javascript-prototypes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codebitshub.com\/javascript-prototypes\/","url":"https:\/\/codebitshub.com\/javascript-prototypes\/","name":"Why Javascript Prototypes are More Painful than Stepping on a Lego","isPartOf":{"@id":"https:\/\/codebitshub.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codebitshub.com\/javascript-prototypes\/#primaryimage"},"image":{"@id":"https:\/\/codebitshub.com\/javascript-prototypes\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","datePublished":"2022-01-26T18:29:51+00:00","dateModified":"2023-09-17T16:07:37+00:00","description":"codebitshub.com The javascript prototypes are the mechanism by which Javascript objects inherit features from one another.","breadcrumb":{"@id":"https:\/\/codebitshub.com\/javascript-prototypes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codebitshub.com\/javascript-prototypes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/javascript-prototypes\/#primaryimage","url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},{"@type":"BreadcrumbList","@id":"https:\/\/codebitshub.com\/javascript-prototypes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codebitshub.com\/"},{"@type":"ListItem","position":2,"name":"Why Javascript Prototypes are More Painful than Stepping on a Lego"}]},{"@type":"WebSite","@id":"https:\/\/codebitshub.com\/#website","url":"https:\/\/codebitshub.com\/","name":"codebitshub.com","description":"A blog about programming and coding","publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codebitshub.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codebitshub.com\/#organization","name":"codebitshub.com","url":"https:\/\/codebitshub.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/","url":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},"image":{"@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61","name":"myapos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","caption":"myapos"},"url":"https:\/\/codebitshub.com\/author\/myapos\/"}]}},"_links":{"self":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":5,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":883,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/190\/revisions\/883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media\/24"}],"wp:attachment":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/tags?post=190"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/post_folder?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}