{"id":5383,"date":"2019-07-15T15:25:39","date_gmt":"2019-07-15T09:55:39","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=5383"},"modified":"2023-01-20T18:55:29","modified_gmt":"2023-01-20T13:25:29","slug":"how-prototype-works-in-javascript","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/","title":{"rendered":"How Prototype Works in JavaScript?"},"content":{"rendered":"


\nBy default, every function has a property called prototype this property by default is empty and you can add properties and\u00a0<\/span><\/span>methods\u00a0<\/span><\/span>to it and when you create\u00a0<\/span><\/span>an\u00a0<\/span><\/span>object from this function. The object inherits its properties and methods. It has been often confusing to the beginners \u201cHow Prototype Works in\u00a0<\/span><\/span>Javascript<\/span><\/span>\u201d and with this<\/span><\/span>,<\/span><\/span>\u00a0you will also get the idea of what is the difference between prototype and __proto__. Also,\u00a0<\/span><\/span>Javascript<\/span><\/span>\u00a0does not have class implementation as other languages like\u00a0<\/span><\/span>J<\/span><\/span>ava or c#, whereas it is considered a prototype language and just like in Java you create\u00a0<\/span><\/span>a\u00a0<\/span><\/span>class and then create\u00a0<\/span><\/span>an\u00a0<\/span><\/span>object from it, in\u00a0<\/span><\/span>javascript<\/span><\/span>\u00a0you would create constructor directly and using this constructor you could create\u00a0<\/span><\/span>an\u00a0<\/span><\/span>object from it.<\/span><\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Here x is a function and x1 is the object created from the function x.<\/p>\n

Any function created in\u00a0javascript\u00a0either a constructor function or generic function. These two objects are always created a function object and prototype object, the function object holds a property prototype property & with\u00a0the function\u00a0name and dot prototype we can access the prototype object properties.<\/p>\n

A prototype is the property of function which points to the prototype object. Prototype object can be accessed using\u00a0Funtion_Name.prototype.<\/p>\n

When the object is created using\u00a0the\u00a0new keyword of the function\/constructor, The JS engine creates a new object of that function block which holds a property named __proto__ which points to its function’s prototype object.<\/p>\n

\"\"<\/p>\n

If another object of that function using\u00a0a\u00a0new keyword again another object is created which holds a __proto__ property which again points to\u00a0the\u00a0function’s prototype object.<\/p>\n

the same goes for every object which is created for the function using\u00a0the\u00a0new keyword.<\/p>\n

It can be checked\u00a0by:-<\/p>\n

\"\"<\/p>\n

lg.__proto__ === Mobile.prototype\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/true<\/strong><\/p>\n

So,\u00a0any property which is defined inside the constructor\/function is\u00a0accessible\u00a0by the object of that function which was created using\u00a0the\u00a0new keyword. so when we try to access a property like\u00a0lg.a\u00a0it is firstly\u00a0searched\u00a0in the object of\u00a0lg and if not present it is then\u00a0searched\u00a0in the prototype block of the\u00a0constructor\u00a0function. and when it is not found even there than it gives undefined.<\/p>\n

A property can also\u00a0be\u00a0defined inside the prototype block using<\/p>\n

functionName.prototytpe.propertyName\u00a0= ‘Value’;<\/strong><\/p>\n

if a property with\u00a0the\u00a0same name is defined inside both the object as well as function prototype than it is\u00a0accessed\u00a0from the object block. So, the first Priority is of\u00a0the\u00a0object and then function prototype.<\/p>\n

function\u00a0Fun(){<\/strong><\/em><\/p>\n

this.a\u00a0= 20;<\/strong><\/em><\/p>\n

}<\/strong><\/em><\/p>\n

Fun.prototype.a\u00a0= 10;<\/strong><\/em><\/p>\n

let\u00a0chk\u00a0= new\u00a0Fun();<\/strong><\/em><\/p>\n

console.log(“The output is:- ” +\u00a0chk.a);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/The output is 20<\/strong><\/em><\/p>\n

Also, the function object holds the function in it and whereas the object of that function also holds the function in its constructor. the same can be also\u00a0verified\u00a0by<\/p>\n

console.log(Mobile ===\u00a0lg.__proto__.constructor);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/true.<\/strong><\/em><\/p>\n

the same hold true for the\u00a0prototype\u00a0of the function as its constructor also hold the function in its constructor this can also be\u00a0verified\u00a0by<\/p>\n

console.log(Mobile ===\u00a0Mobile.prototype.constructor) ;\u00a0\u00a0 \/\/true<\/strong><\/em><\/p>\n

so, basically,\u00a0the function can be\u00a0accessed\u00a0using\u00a0different\u00a0ways.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

By default, every function has a property called prototype this property by default is empty and you can add properties and\u00a0methods\u00a0to it and when you create\u00a0an\u00a0object from this function. The object inherits its properties and methods. It has been often confusing to the beginners \u201cHow Prototype Works in\u00a0Javascript\u201d and with this,\u00a0you will also get the […]<\/p>\n","protected":false},"author":1,"featured_media":5434,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[108,360,258],"tags":[363,346,361,352,362,353],"class_list":["post-5383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css-js","category-javascript","category-web-technology","tag-javascripe-prototype-works","tag-javascript","tag-javascript-prototype","tag-prototype","tag-prototype-javascript","tag-__proto__"],"yoast_head":"\nHow Prototype Works in JavaScript? - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Prototype Works in JavaScript? - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"By default, every function has a property called prototype this property by default is empty and you can add properties and\u00a0methods\u00a0to it and when you create\u00a0an\u00a0object from this function. The object inherits its properties and methods. It has been often confusing to the beginners \u201cHow Prototype Works in\u00a0Javascript\u201d and with this,\u00a0you will also get the […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-15T09:55:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:25:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/07\/js-blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1141\" \/>\n\t<meta property=\"og:image:height\" content=\"634\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"How Prototype Works in JavaScript?\",\"datePublished\":\"2019-07-15T09:55:39+00:00\",\"dateModified\":\"2023-01-20T13:25:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/\"},\"wordCount\":539,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/js-blog.png\",\"keywords\":[\"JavaScripe Prototype Works\",\"JavaScript\",\"JavaScript Prototype\",\"prototype\",\"Prototype JavaScript\",\"__proto__\"],\"articleSection\":[\"HTML5 \\\/ CSS \\\/ JS\",\"JavaScript\",\"Web Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/\",\"name\":\"How Prototype Works in JavaScript? - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/js-blog.png\",\"datePublished\":\"2019-07-15T09:55:39+00:00\",\"dateModified\":\"2023-01-20T13:25:29+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/js-blog.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/js-blog.png\",\"width\":1141,\"height\":634,\"caption\":\"How prototype works in java script\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/how-prototype-works-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Prototype Works in JavaScript?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Prototype Works in JavaScript? - InnovationM - Blog","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:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How Prototype Works in JavaScript? - InnovationM - Blog","og_description":"By default, every function has a property called prototype this property by default is empty and you can add properties and\u00a0methods\u00a0to it and when you create\u00a0an\u00a0object from this function. The object inherits its properties and methods. It has been often confusing to the beginners \u201cHow Prototype Works in\u00a0Javascript\u201d and with this,\u00a0you will also get the […]","og_url":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/","og_site_name":"InnovationM - Blog","article_published_time":"2019-07-15T09:55:39+00:00","article_modified_time":"2023-01-20T13:25:29+00:00","og_image":[{"width":1141,"height":634,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/07\/js-blog.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"How Prototype Works in JavaScript?","datePublished":"2019-07-15T09:55:39+00:00","dateModified":"2023-01-20T13:25:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/"},"wordCount":539,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/07\/js-blog.png","keywords":["JavaScripe Prototype Works","JavaScript","JavaScript Prototype","prototype","Prototype JavaScript","__proto__"],"articleSection":["HTML5 \/ CSS \/ JS","JavaScript","Web Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/","url":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/","name":"How Prototype Works in JavaScript? - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/07\/js-blog.png","datePublished":"2019-07-15T09:55:39+00:00","dateModified":"2023-01-20T13:25:29+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/07\/js-blog.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/07\/js-blog.png","width":1141,"height":634,"caption":"How prototype works in java script"},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/how-prototype-works-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How Prototype Works in JavaScript?"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=5383"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/5434"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=5383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=5383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=5383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}