Creating objects


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



Copy this code and paste it in your HTML
  1. // --------------------------------------------------
  2. // Creating an object with methods
  3.  
  4. function mycircle(x,y,r) {
  5. this.xcoord = x;
  6. this.ycoord = y;
  7. this.radius = r;
  8. this.retArea = getTheArea;
  9. //This next line uses an alternative syntax
  10. this.retCirc = function () { return ( Math.PI * this.radius * 2 ); };
  11. this.mvBy = mvCclBy;
  12. }
  13. function getTheArea() {
  14. return ( Math.PI * this.radius * this.radius );
  15. }
  16. function mvCclBy(xDis,yDis) {
  17. this.xcoord += xDis;
  18. this.ycoord += yDis;
  19. }
  20.  
  21. /*
  22. create a mycircle called testcircle where testcircle.xcoord is 3
  23. and testcircle.ycoord is 4 and testcircle.radius is 5
  24. */
  25. var testcircle = new mycircle(3,4,5);
  26. /*
  27. use the mvBy method to displace the centre of testcircle.
  28. move it by 2 in the x direction and 3 in the y direction
  29. */
  30. testcircle.mvBy(2,3);
  31. //testcircle.xcoord is now 5 and testcircle.ycoord is now 7
  32.  
  33. window.alert( 'The area of the circle is ' + testcircle.retArea() );
  34. window.alert( 'The circumference is ' + testcircle.retCirc() );
  35.  
  36.  
  37. // --------------------------------------------------
  38. // Advanced object techniques
  39.  
  40. testcircle.texture = 'smooth';
  41. mycircle.prototype.texture = 'smooth';
  42. // all of the mycircles that we have created will now inherit the new property:
  43.  
  44. alert(testcircle.texture);
  45. //alerts 'smooth'
  46.  
  47. mycircle.prototype.setArea = function (oArea) {
  48. this.radius = Math.sqrt( oArea / Math.PI );
  49. };
  50. mycircle.setArea(5);
  51.  
  52.  
  53. function mycircle(x,y,r) {
  54. this.xcoord = x;
  55. this.ycoord = y;
  56. this.radius = r;
  57. }
  58. mycircle.prototype.retArea = function () {
  59. return ( Math.PI * this.radius * this.radius );
  60. };
  61. mycircle.prototype.retCirc = function () {
  62. return ( Math.PI * this.radius * 2 );
  63. };
  64. mycircle.prototype.mvBy = function (xDis,yDis) {
  65. this.xcoord += xDis;
  66. this.ycoord += yDis;
  67. };
  68.  
  69.  
  70. // --------------------------------------------------
  71. // Sub-classes and class inheritance
  72.  
  73. /*
  74. This effectively makes mysphere a sub-class of mycircle, and making the mysphere class constructor inherit from the mycircle class constructor is as simple as this:
  75. */
  76. function mysphere(x,y,z,r) { ... constructor code ... }
  77. mysphere.prototype = new mycircle();
  78.  
  79. ------------
  80.  
  81. function mycircle(x,y,r) {
  82. if( arguments.length ) { this.getready(x,y,r); }
  83. }
  84. mycircle.prototype.getready = function (a,b,c) {
  85. this.xcoord = a;
  86. this.ycoord = b;
  87. this.radius = c;
  88. };
  89. mycircle.prototype.retArea = function () {
  90. return ( Math.PI * this.radius * this.radius );
  91. };
  92. mycircle.prototype.retCirc = function () {
  93. return ( Math.PI * this.radius * 2 );
  94. };
  95. mycircle.prototype.mvBy = function (xDis,yDis) {
  96. this.xcoord += xDis; this.ycoord += yDis;
  97. };
  98.  
  99. -------
  100.  
  101. function mysphere(x,y,z,r) {
  102. if( arguments.length ) { this.getready(x,y,z,r); }
  103. }
  104. //inherit from the mycircle prototype
  105. mysphere.prototype = new mycircle();
  106. //put the correct constructor reference back (not essential)
  107. mysphere.prototype.constructor = mysphere;
  108.  
  109. mysphere.prototype.getready = function (a,b,c,d) {
  110. //reference the getready method from the parent class
  111. this.tempReady = mycircle.prototype.getready;
  112. //and run it as if it were part of this object
  113. this.tempReady(a,b,d);
  114. //now that all required properties have been inherited
  115. //from the parent class, define extra ones from this class
  116. this.zcoord = c;
  117. }
  118. mysphere.prototype.mvBy = function (xDis,yDis,zDis) {
  119. //override the existing method
  120. this.xcoord += xDis;
  121. this.ycoord += yDis;
  122. this.zcoord += zDis;
  123. };
  124. mysphere.prototype.retVol = function () {
  125. return ( 4 / 3 ) * Math.PI * Math.pow( this.radius, 3 );
  126. };
  127. mysphere.prototype.retSurf = function () {
  128. return 4 * Math.PI * this.radius * this.radius;
  129. };
  130.  
  131. --------
  132.  
  133. // to use it
  134. var testsphere = new mysphere(3,4,5,6);
  135.  
  136. alert( 'The cross-section area is ' + testsphere.retArea() );
  137. alert( 'The circumference is ' + testsphere.retCirc() );
  138. alert( 'The volume is ' + testsphere.retVol() );
  139. alert( 'The surface area is ' + testsphere.retSurf() );

URL: http://www.howtocreate.co.uk/tutorials/javascript/objects">creating objects

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.