`

prototype实现继承

    博客分类：
  • AJAX
prototypeJavaScriptXHTMLHTMLXML 
阅读更多
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.   
分享到：
| TOMCAT路径问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript不使用prototype和new实现继承机制

    本文所描述的方法是一种不使用prototype和new关键字来实现继承的替代方案。 首先，我们看到代码中定义了几个方法来帮助实现继承机制。这些方法包括clone、each、extend和create，它们都被添加到了JavaScript的...

    JavaScript的prototype

    ### prototype实现继承 JavaScript通过`prototype`实现了基于原型的继承。一个对象可以通过将另一个对象设置为其`__proto__`来继承其属性和方法。然而，ES6引入了`class`语法，但其本质仍然是基于`prototype`的继承...

    prototype-1.6.0.2.js.rar

    1. **Object.extend**：用于扩展对象的属性和方法，这是Prototype实现继承的基础。 2. **Function.prototype.bind**：让函数拥有指定的上下文（this值），解决了JavaScript中this动态绑定的问题。 3. **Element**和*...

    js遍历属性 以及 js prototype 和继承

    JavaScript使用原型链实现继承，这意味着一个对象可以从另一个对象继承属性和方法。主要有两种继承方式： 1. 构造函数继承（经典继承）：通过`new`关键字创建一个父类（超类）的新实例，然后将其作为子类的`...

    javascript中类和继承（代码示例+prototype.js）

    函数的`prototype`属性则用于实现继承。例如： ```javascript function Person(name) { this.name = name; } Person.prototype.sayName = function() { console.log(this.name); } ``` 这里的`Person`函数就是...

    构造函数定义对象+prototype继承的实现.html

    构造函数定义对象+prototype继承的实现，含CSS样式

    Prototype实现的鼠标拖拽demo

    在这个"Prototype实现的鼠标拖拽demo"中，我们将探讨如何使用Prototype库来创建一个具有拖放功能的交互式用户界面。 首先，Prototype的`Draggable`类是实现拖放行为的基础。`Draggable`允许任何DOM元素变得可拖动，...

    JavaScript实现继承的几种方式

    JavaScript的原型（prototype）机制是实现继承的基础。每个函数都有一个prototype属性，这个属性指向一个对象，这个对象的属性和方法可以被实例共享。通过将一个对象设置为另一个对象的原型，我们可以实现继承。 ``...

    JavaScript使用prototype属性实现继承操作示例

    主要介绍了JavaScript使用prototype属性实现继承操作,结合实例形式详细分析了JavaScript使用prototype属性实现继承的相关原理、实现方法与操作注意事项,需要的朋友可以参考下

    详解JavaScript中基于原型prototype的继承特性_.docx

    JavaScript中的原型（prototype）机制是实现继承的一种核心方式。由于JavaScript是一种基于原型的面向对象语言，它不支持传统的类（class）概念，因此其继承机制显得与众不同。在JavaScript中，对象可以直接从另一个...

    javascript的prototype继承

    JavaScript的原型继承是其面向对象编程的一大特性，它基于原型链机制实现，允许一个对象可以从另一个对象继承属性和方法。这种继承方式不同于类继承，而是通过将子类的原型对象设置为父类的一个实例来实现。 在...

    prototype学习笔记

    在JavaScript中，我们还可以通过`Object.create()`方法来创建一个新对象，使其`__proto__`指向指定的对象，从而实现继承。这为不使用构造函数实现继承提供了一种方式。 标签中的"源码"可能意味着笔记深入探讨了`...

    Javascript中 关于prototype属性实现继承的原理图

    那么，具体到prototype属性如何实现继承，我们来详细解释一下几个关键概念和步骤： 1. prototype属性： 在JavaScript中，函数对象都有一个特殊的属性叫做prototype，这个属性指向了一个原型对象。当创建一个函数时...

    前端开发面试自我的介绍.doc

    candidate 应该知道如何使用 new 关键字创建一个 Function，如何使用 prototype 实现继承，如何使用闭包来解决变量作用域的问题。 三、get 和 post 请求的区别 面试官问到了 get 和 post 请求的区别。 candidate ...

    prototype实现超酷进度条.zip

    在本案例中，“prototype实现超酷进度条”是一个利用JavaScript的prototype特性来创建的动态效果，它允许开发者构建出各种形式的进度条，能够实时显示百分比并动态更新其状态。这种效果常常用于网页加载、数据处理...

    javascript基于prototype实现类似OOP继承的方法

    在JavaScript中，面向对象编程（OOP）的概念与传统意义上的类继承有所...因此，在实际开发中，可能还需要考虑其他继承模式，如ES6的类（Class）语法，或者使用`Object.create()`、`Object.assign()`等方法来实现继承。

    JS伪继承prototype实现方法示例

    JS伪继承通过prototype实现主要有两种形式：属性继承和原型继承。 属性继承是最直接的继承方式，它通过调用父构造函数来复制父对象的属性和方法到子对象中。在属性继承中，每次创建子对象时，父构造函数都会被调用...

    【JavaScript的9种继承实现方式归纳】js实现继承的几种方式.pdf

    JavaScript 的灵活性使得其实现继承的方式非常多样化。本文将介绍 JavaScript 中的 9 种继承实现方式，帮助读者更好地理解 JavaScript 的继承机制。 1. 原型链继承 原型链继承是 JavaScript 中实现继承的默认方式。...

Magicbox
Global site tag (gtag.js) - Google Analytics