{"id":525,"date":"2014-10-06T13:59:49","date_gmt":"2014-10-06T21:59:49","guid":{"rendered":"http:\/\/www.tech.dimprash.com\/?p=525"},"modified":"2017-02-02T15:01:03","modified_gmt":"2017-02-02T23:01:03","slug":"javascript-prototype-pattern","status":"publish","type":"post","link":"http:\/\/www.tech.dimprash.com\/?p=525","title":{"rendered":"Javascript Prototype Pattern"},"content":{"rendered":"

http:\/\/javascriptissexy.com\/javascript-prototype-in-plain-detailed-language\/<\/a><\/p>\n

http:\/\/sporto.github.io\/blog\/2013\/02\/22\/a-plain-english-guide-to-javascript-prototypes\/<\/a><\/p>\n

1. First, there is a prototype property that every JavaScript function has (it is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance.Note that this prototype property is not enumerable: it is not accessible in a for\/in loop. The prototype property is used primarily for inheritance: you add methods and properties on a function\u2019s prototype property to make those methods and properties available to instances of that function.<\/p>\n

2. The second concept with prototype in JavaScript is the prototype attribute. Think of the prototype attribute as a characteristic of the object; this characteristic tells us the object\u2019s \u201cparent\u201d. In simple terms: An object\u2019s prototype attribute points to the object\u2019s \u201cparent\u201d\u2014the object it inherited its properties from. The prototype attribute is normally referred to as the prototype object<\/p>\n

Prototype is important in JavaScript because JavaScript does not have classical inheritance based on Classes (as most object oriented languages do), and therefore all inheritance in JavaScript is made possible through the prototype property. JavaScript has a prototype-based inheritance mechanism.<\/p>\n

\r\nfunction Plant () {\r\nthis.country = \"Mexico\";\r\nthis.isOrganic = true;\r\n}\r\n\r\n\/\/ Add the showNameAndColor method to the Plant prototype property\r\nPlant.prototype.showNameAndColor =  function () {\r\nconsole.log(\"I am a \" + this.name + \" and my color is \" + this.color);\r\n}\r\n\r\n\/\/ Add the amIOrganic method to the Plant prototype property\r\nPlant.prototype.amIOrganic = function () {\r\nif (this.isOrganic)\r\nconsole.log(\"I am organic, Baby!\");\r\n}\r\n\r\nfunction Fruit (fruitName, fruitColor) {\r\nthis.name = fruitName;\r\nthis.color = fruitColor;\r\n}\r\n\r\n\/\/ Set the Fruit's prototype to Plant's constructor, thus inheriting all of Plant.prototype methods and properties.\r\nFruit.prototype = new Plant ();\r\n\r\n\/\/ Creates a new object, aBanana, with the Fruit constructor\r\nvar aBanana = new Fruit (\"Banana\", \"Yellow\");\r\n\r\n\/\/ Here, aBanana uses the name property from the aBanana object prototype, which is Fruit.prototype:\r\nconsole.log(aBanana.name); \/\/ Banana\r\n\r\n\/\/ Uses the showNameAndColor method from the Fruit object prototype, which is Plant.prototype. The aBanana object inherits all the properties and methods from both the Plant and Fruit functions.\r\nconsole.log(aBanana.showNameAndColor()); \/\/ I am a Banana and my color is yellow.\r\n<\/pre>\n
Prototype is also important for accessing properties and methods of objects. The prototype attribute (or prototype object) of any object is the \u201cparent\u201d object where the inherited properties were originally defined. if you want to access a property of an object, the search for the property begins directly on the object. If the JS runtime can\u2019t find the property there, it then looks for the property on the object\u2019s prototype\u2014the object it inherited its properties from.This in essence is the prototype chain<\/p>\n
\r\nvar myFriends = {name: \"Pete\"};\r\n\r\n\/\/ To find the name property below, the search will begin directly on the myFriends object and will immediately find the name property because we defined the property name on the myFriend object. This could be thought of as a prototype chain with one link.\r\nconsole.log(myFriends.name);\r\n\r\n\/\/ In this example, the search for the toString () method will also begin on the myFriends\u2019 object, but because we never created a toString method on the myFriends object, the compiler will then search for it on the myFriends prototype (the object which it inherited its properties from).\r\n\r\n\/\/ And since all objects created with the object literal inherits from Object.prototype, the toString method will be found on Object.prototype\u2014see important note below for all properties inherited from Object.prototype. \r\n\r\nmyFriends.toString ();\r\n<\/pre>\n
When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.
\nhttps:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Inheritance_and_the_prototype_chain<\/a><\/p>\n
\r\nvar o = {a: 1};\r\n\r\n\/\/ The newly created object o has Object.prototype as its [[Prototype]]\r\n\/\/ o has no own property named 'hasOwnProperty'\r\n\/\/ hasOwnProperty is an own property of Object.prototype. \r\n\/\/ So o inherits hasOwnProperty from Object.prototype\r\n\/\/ Object.prototype has null as its prototype.\r\n\/\/ o ---> Object.prototype ---> null\r\n\r\nvar a = [\"yo\", \"whadup\", \"?\"];\r\n\r\n\/\/ Arrays inherit from Array.prototype \r\n\/\/ (which has methods like indexOf, forEach, etc.)\r\n\/\/ The prototype chain looks like:\r\n\/\/ a ---> Array.prototype ---> Object.prototype ---> null\r\n\r\nfunction f() {\r\n  return 2;\r\n}\r\n\r\n\/\/ Functions inherit from Function.prototype \r\n\/\/ (which has methods like call, bind, etc.)\r\n\/\/ f ---> Function.prototype ---> Object.prototype ---> null\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
http:\/\/javascriptissexy.com\/javascript-prototype-in-plain-detailed-language\/ http:\/\/sporto.github.io\/blog\/2013\/02\/22\/a-plain-english-guide-to-javascript-prototypes\/ 1. First, there is a prototype property that every JavaScript function has (it is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance.Note that this prototype property is not enumerable: it is not accessible in a for\/in loop. The prototype property is used … Continue reading Javascript Prototype Pattern<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-525","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=525"}],"version-history":[{"count":5,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/525\/revisions"}],"predecessor-version":[{"id":646,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=\/wp\/v2\/posts\/525\/revisions\/646"}],"wp:attachment":[{"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=525"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tech.dimprash.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}