{"id":24,"date":"2008-04-11T11:51:20","date_gmt":"2008-04-11T10:51:20","guid":{"rendered":"http:\/\/www.hinnerup.net\/2008\/04\/11\/javascript_classes\/"},"modified":"2009-09-30T21:54:41","modified_gmt":"2009-09-30T20:54:41","slug":"javascript_classes","status":"publish","type":"post","link":"https:\/\/www.hinnerup.net\/en\/permanent\/2008\/04\/11\/javascript_classes\/","title":{"rendered":"Klasser og klassenedarvning i JavaScript"},"content":{"rendered":"<p><img src='http:\/\/www.hinnerup.net\/wp-content\/uploads\/2008\/04\/class_dog_animal1.jpg' alt='Klassediagram' style='float:right;margin-left:2em;margin-bottom:1em;margin-top:0.5em' \/>Jeg havde i dag behov for at l\u00e6re fra mig med hensyn til <a href=\"http:\/\/www.prototypejs.org\/api\/class\">prototype&#8217;s JavaScript klasse implementation<\/a>. Der er nogle udem\u00e6rkede eksempler at finde men de var ikke optimalt nemme at forklare alle begreberne udfra &#8211; man skulle have lidt baggrundsviden med sig i hvert fald.<\/p>\n<p>Det endte med at en mindre omskrivning af <a href=\"http:\/\/www.prototypejs.org\/api\/class\/addMethods\">f\u00f8rste eksempel p\u00e5 prototype hjemmesiden<\/a> var alt der skulle til for at kunne formidle hvordan JavaScript klasser kan benyttes.<\/p>\n<p>Her er det omskrevne eksempel, der blandt andet har flere instanser med og en lidt klarere constructor\/super constructor illustration:<\/p>\n<pre>\r\n\/\/ Animal base class\r\nvar Animal = Class.create({\r\n  initialize: function(type, name, sound) { \/\/ constructor\r\n    this.type = type;\r\n    this.name = name;\r\n    this.sound = sound;\r\n  },\r\n  speak: function() {\r\n    alert(\"The \" + this.type + \" named \" + \r\n      this.name + \" says \" + this.sound);\r\n  }\r\n});\r\n\r\n\/\/ Extended class (inherits from Animal)\r\nvar Dog = Class.create(Animal, {\r\n  initialize: function($super, name) { \/\/ constructor\r\n    $super(\"Dog\", name, \"Woof Woof!\"); \/\/ call super class constructor\r\n  },\r\n  sit: function() { \/\/ extended function\r\n    alert(\"The \" + this.type + \" named \" + this.name + \" is now sitting.\");\r\n  }\r\n});\r\n\r\nvar duck = new Animal(\"Duck\", \"Daffy\", \"Quack!\");\r\nvar dog1 = new Dog(\"Pluto\");\r\nvar dog2 = new Dog(\"King\");\r\nduck.speak();\r\n<i style=\"color:#777;\">\/\/ --> alerts \"The Duck named Daffy says Quack!\"<\/i>\r\ndog1.speak();\r\n<i style=\"color:#777;\">\/\/ --> alerts \"The Dog named Pluto says Woof Woof!\"<\/i>\r\ndog2.sit();\r\n<i style=\"color:#777;\">\/\/ --> alerts \"The Dog named King is now sitting.\"<\/i>\r\ndog2.speak();\r\n<i style=\"color:#777;\">\/\/ --> alerts \"The Dog named King says Woof Woof!\"<\/i><\/pre>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Jeg havde i dag behov for at l\u00e6re fra mig med hensyn til prototype&#8217;s JavaScript klasse implementation. Der er nogle udem\u00e6rkede eksempler at finde men de var ikke optimalt nemme at forklare alle begreberne udfra &#8211; man skulle have lidt baggrundsviden med sig i hvert fald. Det endte med at en mindre omskrivning af f\u00f8rste [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,4],"tags":[119,41],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","tag-javascript","tag-prototype"],"_links":{"self":[{"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":1,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":564,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/posts\/24\/revisions\/564"}],"wp:attachment":[{"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}