论坛首页 → 入门技术论坛 →

prototype实现继承

浏览 1525 次
锁定老帖子 主题：prototype实现继承
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • dikar
  • 等级: 初级会员
  • 性别:
  • 文章: 40
  • 积分: 50
  • 来自: 杭州
   发表时间：2007-11-26  
xml 代码
  1. 假设有类VEHICLE，另有2个类SPORTSCAR和CEMENTTRUCK继承于VEHICLE，   
  2. 其中VEHICLE有2个属性WHEELCOUNT，CURWEIGHTINPOUNDS，   
  3. 2个方法refuel(),mainTasks(),   
  4. SPORTSCAR和CEMENTTRUCK继承了VEHICLE的方法，SPORTSCAR只继承了SPORTSCAR属性，他有自己的CURWEIGHTINPOUNDS属性值，而CEMENTTRUCK也特有自己的WHEELCOUNT，CURWEIGHTINPOUNDS属性值。类的定义如下   
  5. inheritanceViaPrototype.js   
  6.   
  7. /* Constructor function for the Vehicle object */   
  8. function Vehicle() { }   
  9.   
  10. /* Standard properties of a Vehicle */   
  11. Vehicle.prototype.wheelCount = 4;   
  12. Vehicle.prototype.curbWeightInPounds = 4000;   
  13.   
  14. /* Function for refueling a Vehicle */   
  15. Vehicle.prototype.refuel = function() {   
  16.     return "Refueling Vehicle with regular 87 octane gasoline";   
  17. }   
  18.   
  19. /* Function for performing the main tasks of a Vehicle */   
  20. Vehicle.prototype.mainTasks = function() {   
  21.     return "Driving to work, school, and the grocery store";   
  22. }   
  23.   
  24.   
  25. /* Constructor function for the SportsCar object */   
  26. function SportsCar() { }   
  27.   
  28. /* SportsCar extends Vehicle */   
  29. SportsCar.prototype = new Vehicle();   
  30.   
  31. /* SportsCar is lighter than Vehicle */   
  32. SportsCar.prototype.curbWeightInPounds = 3000;   
  33.   
  34. /* SportsCar requires premium fuel */   
  35. SportsCar.prototype.refuel = function() {   
  36.     return "Refueling SportsCar with premium 94 octane gasoline";   
  37. }   
  38.   
  39. /* Function for performing the main tasks of a SportsCar */   
  40. SportsCar.prototype.mainTasks = function() {   
  41.     return "Spirited driving, looking good, driving to the beach";   
  42. }   
  43.   
  44.   
  45. /* Constructor function for the CementTruck object */   
  46. function CementTruck() { }   
  47.   
  48. /* CementTruck extends Vehicle */   
  49. CementTruck.prototype = new Vehicle();   
  50.   
  51. /* CementTruck has 10 wheels and weighs 12,000 pounds*/   
  52. CementTruck.prototype.wheelCount = 10;   
  53. CementTruck.prototype.curbWeightInPounds = 12000;   
  54.   
  55. /* CementTruck refuels with diesel fuel */   
  56. CementTruck.prototype.refuel = function() {   
  57.     return "Refueling CementTruck with diesel fuel";   
  58. }   
  59.   
  60. /* Function for performing the main tasks of a SportsCar */   
  61. CementTruck.prototype.mainTasks = function() {   
  62.     return "Arrive at construction site, extend boom, deliver cement";   
  63. }   
  64. 对这三个类的使用如下代码，   
  65.   
  66. inheritanceViaPrototype.html   
  67.   
  68. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  69.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  70. <html xmlns="http://www.w3.org/1999/xhtml">  
  71. <head>  
  72. <title>JavaScript Inheritance via Prototype</title>  
  73.   
  74. <script type="text/javascript" src="inheritanceViaPrototype.js"></script>  
  75.   
  76. <script type="text/javaScript">  
  77.   
  78. function describe(vehicle) {   
  79.     var description = "";   
  80.     descriptiondescription = description + "Number of wheels: " + vehicle.wheelCount;   
  81.     descriptiondescription = description + "\n\nCurb Weight: " + vehicle.curbWeightInPounds;   
  82.     descriptiondescription = description + "\n\nRefueling Method: " + vehicle.refuel();   
  83.     descriptiondescription = description + "\n\nMain Tasks: " + vehicle.mainTasks();   
  84.     alert(description);   
  85. }   
  86.   
  87. function createVehicle() {   
  88.     var vehicle = new Vehicle();   
  89.     describe(vehicle);   
  90. }   
  91.   
  92. function createSportsCar() {   
  93.     var sportsCar = new SportsCar();   
  94.     describe(sportsCar);   
  95. }   
  96.   
  97. function createCementTruck() {   
  98.     var cementTruck = new CementTruck();   
  99.     describe(cementTruck);   
  100. }   
  101. </script>  
  102. </head>  
  103.   
  104. <body>  
  105.   <h1>Examples of JavaScript Inheritance via the Prototype Method</h1>  
  106.     
  107.   <br/><br/>  
  108.   <button onclick="createVehicle();">Create an instance of Vehicle</button>  
  109.     
  110.   <br/><br/>  
  111.   <button onclick="createSportsCar();">Create an instance of SportsCar</button>  
  112.     
  113.   <br/><br/>  
  114.   <button onclick="createCementTruck();">Create an instance of CementTruck</button>  
  115.   
  116. </body>  
  117. </html>  
  118.   
返回顶楼
         
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics