{"id":2860,"date":"2013-09-03T14:47:31","date_gmt":"2013-09-03T14:47:31","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=2860"},"modified":"2014-06-18T20:57:34","modified_gmt":"2014-06-18T20:57:34","slug":"javascript-prototypal-object-oriented-inheritance","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/javascript-prototypal-object-oriented-inheritance\/","title":{"rendered":"JavaScript Prototyping Techniques"},"content":{"rendered":"<h2>Prototyping via <a href=\"http:\/\/pivotallabs.com\/javascript-constructors-prototypes-and-the-new-keyword\/\" target=\"_blank\">Constructor Functions<\/a><\/h2>\n<pre>\/* Old way - awkward - exists for people used to classes *\/\r\n\/\/ Create constructor function\r\nfunction Greeter(name){\r\n    this.name = name || 'JohnDoe';\r\n}\r\n\/\/ Attach to that constructor function's prototype property\r\nGreeter.prototype.hello = function hello(){\r\n    return 'Old Way = Hello, my name is ' + this.name;\r\n}\r\n\/\/ Instantiate new object with the 'new' keyword\r\nvar old = new Greeter('Old Way');\r\nconsole.log(old.hello(Greeter.name));\r\n<\/pre>\n<h2>Prototyping via JavaScript Object.create()<\/h2>\n<pre>\/\/ Create your prototype\r\nvar proto = {\r\n    hello: function hello(){\r\n        return 'New #1 = Hello, my name is ' + this.name;\r\n    }\r\n};\r\n\/\/ Pass that prototype into Object.create\r\nvar extension = Object.create(proto);\r\n\/\/ Set whatever you want on that object because JavaScript has dynamic object extension\r\nextension.name = 'New Extension Way';\r\nconsole.log(extension.hello(extension.name));\r\n<\/pre>\n<h2>Prototyping via Cloning\/Concatenation<\/h2>\n<pre>\/\/ Create object literal\r\nvar proto2 = {\r\n    hello: function hello() {\r\n        return 'New #2 = Hello, my name is ' + this.name;\r\n    },\r\n    name: 'default'\r\n};\r\n\/\/ Add new properties by cloning\/extending object literal\r\n\/\/ Also, properties can be overwritten (defaults &amp; overrides)\r\n\/\/\u00a0_.extend(destination, *sources)\r\nvar mixin_style = _.extend({}, proto2, {name: 'New Mixin Way'});\r\nconsole.log(mixin_style.hello(mixin_style.name));\r\nconsole.log(proto2.name + ' vs. ' + mixin_style.name);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Prototyping via Constructor Functions \/* Old way &#8211; awkward &#8211; exists for people used to classes *\/ \/\/ Create constructor function function Greeter(name){ this.name = name || &#8216;JohnDoe&#8217;; } \/\/ Attach to that constructor function&#8217;s prototype property Greeter.prototype.hello = function hello(){ return &#8216;Old Way = Hello, my name is &#8216; + this.name; } \/\/ Instantiate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[9],"class_list":["post-2860","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-javascript"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=2860"}],"version-history":[{"count":6,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2860\/revisions"}],"predecessor-version":[{"id":3110,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2860\/revisions\/3110"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=2860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=2860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=2860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}