编辑“汇合”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[Ajax学习教程#Ajax学习教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>
前面已经了解到，JavaScript中也可以实现私有属性，而且JavaScript也能像C++和Java一样支持基于类的继承方法。为了展示这些是怎样实现的，下面说明如何转换前面使用Vehicle、SportsCar和CementTruck对象的示例，从而使用信息隐藏和继承的新模式。代码清单5-5列出了新的对象定义。 <br>

代码清单5-5　
 classicalInheritance.js<br>
 function Vehicle() {<br>
    var wheelCount = 4;<br>
    var curbWeightInPounds = 4000;<br>
    this.getWheelCount = function() {<br>
        return wheelCount;<br>
    }<br>
    this.setWheelCount = function(count) {<br>
        wheelCount = count;<br>
    }<br>
   this.getCurbWeightInPounds = function() {<br>
        return curbWeightInPounds;<br>
    }<br>
    this.setCurbWeightInPounds = function(weight) {<br>
        curbWeightInPounds = weight;<br>
    }<br>
    this.refuel = function() {<br>
        return "Refueling Vehicle with regular 87 octane gasoline";<br>
    }<br>
    this.mainTasks = function() {<br>
        return "Driving to work, school, and the grocery store";<br>
    }<br>
 }<br>
 function SportsCar() {<br>
    this.refuel = function() {<br>
        return "Refueling SportsCar with premium 94 octane gasoline";<br>
    }<br>
    this.mainTasks = function() {<br>
        return "Spirited driving, looking good, driving to the beach";<br>
    }<br>
 }<br>
 function CementTruck() {<br>
    this.refuel = function() {<br>
        return "Refueling CementTruck with diesel fuel";<br>
    }<br>
    this.mainTasks = function() {<br>
        return "Arrive at construction site, extend boom, deliver cement";<br>
    }<br>
 }<br>

需要注意，SportsCar和CementTruck对象没有定义自己的wheelCount和curbWeightInPounds属性，也没有相关的存取函数，因为这些属性和函数会从Vehicle对象继承。<br>

与前面一样，需要一个简单的HTML页面来测试这些新对象。代码清单5-6列出了测试这些新对象的HTML页面。要特别注意createInheritance函数，看看如何使用这个函数在Vehicle和SportsCar对象之间以及Vehicle和CementTruck对象之间创建继承关系。还要注意describe函数有所修改，以试图直接访问wheelCount和curbWeightInPounds属性。这样做会返回一个undefined值。<br>

代码清单5-6　
 classicalInheritance.html<br>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  <nowiki>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></nowiki><br>
 <nowiki><html xmlns="http://www.w3.org/1999/xhtml"></nowiki><br>
 <head><br>
 <title>Classical Inheritance in JavaScript</title><br>
 <script type="text/javascript" src="classicalInheritance.js"></script><br>
 <script type="text/javaScript"><br>
 function createInheritance(parent, child) {<br>
    var property;<br>
    for(property in parent) {<br>
        if(!child[property]) {<br>
            child[property] = parent[property];<br>
        }<br>
    }<br>
 }<br>
 function describe(vehicle) {<br>
    var description = "";<br>
    description = description + "Number of wheels (via property): "<br>
                                                          + vehicle.wheelCount;<br>
    description = description + "\n\nNumber of wheels (via accessor): "<br>
                                  + vehicle.getWheelCount();<br>
    description = description + "\n\nCurb Weight (via property): "<br>
                                  + vehicle.curbWeightInPounds;<br>
    description = description + "\n\nCurb Weight (via accessor): "<br>
                                 + vehicle.getCurbWeightInPounds();<br>
    description = description + "\n\nRefueling Method: " + vehicle.refuel();<br>
    description = description + "\n\nMain Tasks: " + vehicle.mainTasks();<br>
    alert(description);<br>
 }<br>
 function createVehicle() {<br>
    var vehicle = new Vehicle();<br>
    describe(vehicle);<br>
 }<br>
 function createSportsCar() {<br>
    var sportsCar = new SportsCar();<br>
    createInheritance(new Vehicle(), sportsCar);<br>
    sportsCar.setCurbWeightInPounds(3000);<br>
    describe(sportsCar);<br>
 }<br>
 function createCementTruck() {<br>
    var cementTruck = new CementTruck();<br>
    createInheritance(new Vehicle(), cementTruck);<br>
    cementTruck.setWheelCount(10);<br>
    cementTruck.setCurbWeightInPounds(10000);<br>
    describe(cementTruck);<br>
 }<br>
 </script><br>
 </head><br>
 <body><br>
  <nowiki> <h1>Examples of Classical Inheritance in JavaScript</h1></nowiki><br>
  <nowiki><br/><br/></nowiki><br>
  <nowiki><button onclick="createVehicle();">Create an instance of Vehicle</button></nowiki><br>
  <nowiki><br/><br/></nowiki><br>
  <nowiki><button onclick="createSportsCar();">Create an instance of SportsCar</button></nowiki><br>
  <nowiki><br/><br/></nowiki><br>
  <nowiki><button onclick="createCementTruck();">Create an instance of CementTruck</button></nowiki><br>
 </body><br>
 </html><br>

分别点击页面上的各个按钮会得到图5-17所示的结果。正如所料，试图直接访问私有属性就会返回undefined。<br>
[[Image:image0170.jpg]]


图5-17　创建Vehicle、SportsCar和CementTruck对象，并使用describe函数描述它们的结果。私有属性不能直接访问，见警告框中的undefined值<br>
[[category:Ajax]]