{"id":8219,"date":"2024-03-14T07:44:52","date_gmt":"2024-03-14T07:44:52","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/"},"modified":"2025-08-03T02:03:36","modified_gmt":"2025-08-03T02:03:36","slug":"how-to-use-prototype-in-javascript","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/","title":{"rendered":"How to Use JavaScript Prototype"},"content":{"rendered":"<p>In JavaScript, every function has a prototype property that can be used to add properties and methods to the function&#8217;s instance objects. Specifically, properties and methods can be added to the function&#8217;s instance objects by assigning values to the function&#8217;s prototype property.<\/p>\n<p>For example, we can define a constructor and add methods to it in the following way:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">Person<\/span>(<span class=\"hljs-params\">name, age<\/span>) {\r\n  <span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-property\">name<\/span> = name;\r\n  <span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-property\">age<\/span> = age;\r\n}\r\n\r\n<span class=\"hljs-comment\">\/\/ \u4e3aPerson\u6784\u9020\u51fd\u6570\u7684\u5b9e\u4f8b\u5bf9\u8c61\u6dfb\u52a0\u4e00\u4e2agreet\u65b9\u6cd5<\/span>\r\n<span class=\"hljs-title class_\">Person<\/span>.<span class=\"hljs-property\"><span class=\"hljs-keyword\">prototype<\/span><\/span>.<span class=\"hljs-property\">greet<\/span> = <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">\"Hello, my name is \"<\/span> + <span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-property\">name<\/span>);\r\n};\r\n\r\n<span class=\"hljs-comment\">\/\/ \u521b\u5efaPerson\u6784\u9020\u51fd\u6570\u7684\u5b9e\u4f8b<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> person1 = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">Person<\/span>(<span class=\"hljs-string\">\"Alice\"<\/span>, <span class=\"hljs-number\">25<\/span>);\r\n<span class=\"hljs-keyword\">var<\/span> person2 = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">Person<\/span>(<span class=\"hljs-string\">\"Bob\"<\/span>, <span class=\"hljs-number\">30<\/span>);\r\n\r\n<span class=\"hljs-comment\">\/\/ \u8c03\u7528\u5b9e\u4f8b\u5bf9\u8c61\u7684greet\u65b9\u6cd5<\/span>\r\nperson1.<span class=\"hljs-title function_\">greet<\/span>(); <span class=\"hljs-comment\">\/\/\u8f93\u51fa\uff1aHello, my name is Alice<\/span>\r\nperson2.<span class=\"hljs-title function_\">greet<\/span>(); <span class=\"hljs-comment\">\/\/\u8f93\u51fa\uff1aHello, my name is Bob<\/span>\r\n<\/code><\/pre>\n<p>In the example above, we defined a constructor function called Person and added a greet method to its instance objects by assigning a value to its prototype property. By creating instances of the Person constructor function and calling the greet method on those instances, we can see that each instance object can access this method.<\/p>\n<p>It is important to note that properties and methods added through the prototype are shared, meaning all instances created from the constructor will share these properties and methods.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In JavaScript, every function has a prototype property that can be used to add properties and methods to the function&#8217;s instance objects. Specifically, properties and methods can be added to the function&#8217;s instance objects by assigning values to the function&#8217;s prototype property. For example, we can define a constructor and add methods to it in [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[10925,10929,10927,10928,10926],"class_list":["post-8219","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-javascript-prototype","tag-js-inheritance","tag-js-objects","tag-oop-javascript","tag-prototype-property"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use JavaScript Prototype - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how JavaScript prototype works to add methods\/properties to objects. Practical guide with clear examples.\" \/>\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.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use JavaScript Prototype\" \/>\n<meta property=\"og:description\" content=\"Learn how JavaScript prototype works to add methods\/properties to objects. Practical guide with clear examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T07:44:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-03T02:03:36+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin Taylor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin Taylor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/\"},\"author\":{\"name\":\"Benjamin Taylor\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\"},\"headline\":\"How to Use JavaScript Prototype\",\"datePublished\":\"2024-03-14T07:44:52+00:00\",\"dateModified\":\"2025-08-03T02:03:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/\"},\"wordCount\":149,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"JavaScript prototype\",\"JS inheritance\",\"JS objects\",\"OOP JavaScript\",\"prototype property\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/\",\"name\":\"How to Use JavaScript Prototype - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T07:44:52+00:00\",\"dateModified\":\"2025-08-03T02:03:36+00:00\",\"description\":\"Learn how JavaScript prototype works to add methods\/properties to objects. Practical guide with clear examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use JavaScript Prototype\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\",\"name\":\"Benjamin Taylor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"caption\":\"Benjamin Taylor\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use JavaScript Prototype - Blog - Silicon Cloud","description":"Learn how JavaScript prototype works to add methods\/properties to objects. Practical guide with clear examples.","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.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Use JavaScript Prototype","og_description":"Learn how JavaScript prototype works to add methods\/properties to objects. Practical guide with clear examples.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T07:44:52+00:00","article_modified_time":"2025-08-03T02:03:36+00:00","author":"Benjamin Taylor","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Benjamin Taylor","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/"},"author":{"name":"Benjamin Taylor","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9"},"headline":"How to Use JavaScript Prototype","datePublished":"2024-03-14T07:44:52+00:00","dateModified":"2025-08-03T02:03:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/"},"wordCount":149,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["JavaScript prototype","JS inheritance","JS objects","OOP JavaScript","prototype property"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/","name":"How to Use JavaScript Prototype - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T07:44:52+00:00","dateModified":"2025-08-03T02:03:36+00:00","description":"Learn how JavaScript prototype works to add methods\/properties to objects. Practical guide with clear examples.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-prototype-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use JavaScript Prototype"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9","name":"Benjamin Taylor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","caption":"Benjamin Taylor"},"url":"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=8219"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8219\/revisions"}],"predecessor-version":[{"id":153020,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8219\/revisions\/153020"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=8219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=8219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=8219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}