Advanced Search

Proper Classical Inheritence in Javascript

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?php
  2. ?>
  3. <html>
  4. <head>
  5. <style>
  6.  
  7. </style>
  8.  
  9. </head>
  10. <body>
  11.  
  12. <script>
  13. //Contain all in anonymous self executing func to create namespace
  14. //Create object instances and assign to window global object
  15. //Always execute copyPrototype() right after class constructor and before defining prototype functions.
  16. //Ref: http://blogs.sitepoint.com/javascript-inheritance/
  17. (function (win) {
  18.  
  19. var my = {};
  20.  
  21. function rtrim(val) {
  22. 	return val.replace(/\s+$/,"");
  23. }
  24.  
  25.  
  26. //private method
  27. function copyPrototype(descendant, parent) {
  28.  
  29.  
  30. 	var sConstructor = parent.toString();  
  31. 	var aMatch = sConstructor.match( /\s*function (.*)\(/ );
  32. 	//fix ie 6 problem if their is trailing space after func name then trim it
  33. 	aMatch[1] = rtrim(aMatch[1]); 
  34. 	if ( aMatch != null ) { descendant.prototype[aMatch[1]] = parent; }  
  35. 	for (var m in parent.prototype) {  
  36.       descendant.prototype[m] = parent.prototype[m];  
  37.      }  
  38.     //console.log(descendant.prototype);
  39. };
  40.  
  41. function Animal () {
  42.     this.species = "animal";
  43. }
  44.  
  45. Animal.prototype.category = function() {
  46.     alert(this.species);
  47. };
  48.  
  49. Animal.prototype.contest = function() {
  50.     alert('Animal contest');
  51. };
  52.  
  53. function Dog() {
  54.  
  55. 	//Calling parent constructor
  56.     this.Animal();
  57.     this.species += ":dog";
  58.  
  59. }
  60. // Dog "inherits" from Animal
  61. copyPrototype(Dog, Animal);
  62.  
  63. function Poodle() {
  64.     this.Dog();
  65.     this.species += ":poodle";
  66.  
  67. }
  68.  
  69.  
  70. // Poodle "inherits" from Dog
  71. copyPrototype(Poodle, Dog);
  72.  
  73. Poodle.prototype.contest = function() {
  74.     alert('Poodle contest');
  75. };
  76.  
  77. //public instances
  78. my.Dog = new Dog();
  79. my.Poodle = new Poodle();
  80.  
  81. //Create closure. assign to window object to make available to global space
  82. win.$Noah = my;
  83.  
  84. }(window));
  85.  
  86. //****** Single inheritance. 
  87. //displays animal:dog. 
  88. $Noah.Dog.category();
  89.  
  90. //******  multiple inheritance
  91. //displays animal:dog:poodle
  92. $Noah.Poodle.category();
  93.  
  94. //****** Child with multiple parents
  95. //Dog inherits from both Animal and Quadruped classes
  96. //copyPrototype(Dog, Animal);
  97. //copyPrototype(Dog, Quadruped);  
  98.  
  99. //****** method overriding
  100.  
  101. //Executes super class contest()
  102. //Displays 'Animal Contest'
  103. $Noah.Dog.contest();
  104.  
  105. //Executes overriden contest() in Poodle class
  106. //Displays 'Poodle Contest'
  107. $Noah.Poodle.contest();
  108.  
  109.  
  110.  
  111. </script>
  112. </body>
  113. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.