Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 117658 of Creating the Hierarchy

  • Revision slug: JavaScript/Guide/Obsolete_Pages/The_Employee_Example/Creating_the_Hierarchy
  • Revision title: Creating the Hierarchy
  • Revision id: 117658
  • Created:
  • Creator: BenoitL
  • Is current revision? No
  • Comment adding fr:

Revision Content

Creating the Hierarchy

There are several ways to define appropriate constructor functions to implement the Employee hierarchy. How you choose to define them depends largely on what you want to be able to do in your application.

This section shows how to use very simple (and comparatively inflexible) definitions to demonstrate how to get the inheritance to work. In these definitions, you cannot specify any property values when you create an object. The newly-created object simply gets the default values, which you can change at a later time. Figure 8.2 illustrates the hierarchy with these simple definitions.

In a real application, you would probably define constructors that allow you to provide property values at object creation time (see More Flexible Constructors for information). For now, these simple definitions demonstrate how the inheritance occurs.

Image:hier02.gif
Figure 8.2: The Employee object definitions

The following Java and JavaScript Employee definitions are similar. The only differences are that you need to specify the type for each property in Java but not in JavaScript, and you need to create an explicit constructor method for the Java class.

</tr>
JavaScript Java
function Employee () {
this.name = "";
this.dept = "general";
}
public class Employee {
   public String name;
   public String dept;
   public Employee () {
      this.name = "";
      this.dept = "general";
   }
}

The Manager and WorkerBee definitions show the difference in how to specify the next object higher in the inheritance chain. In JavaScript, you add a prototypical instance as the value of the prototype property of the constructor function. You can do so at any time after you define the constructor. In Java, you specify the superclass within the class definition. You cannot change the superclass outside the class definition.

</tr>
JavaScript Java
function Manager () {
this.reports = [];
}
Manager.prototype = new Employee;

function WorkerBee () {
this.projects = [];
}
WorkerBee.prototype = new Employee;
public class Manager extends Employee {
   public Employee[] reports;
   public Manager () {
      this.reports = new Employee[0];
   }
}

public class WorkerBee extends Employee {
   public String[] projects;
   public WorkerBee () {
      this.projects = new String[0];
   }
}

The Engineer and SalesPerson definitions create objects that descend from WorkerBee and hence from Employee. An object of these types has properties of all the objects above it in the chain. In addition, these definitions override the inherited value of the dept property with new values specific to these objects.

JavaScript Java
function SalesPerson () {
   this.dept = "sales";
   this.quota = 100;
}
SalesPerson.prototype = new WorkerBee;

function Engineer () {
   this.dept = "engineering";
   this.machine = "";
}
Engineer.prototype = new WorkerBee;
public class SalesPerson extends WorkerBee {
   public double quota;
   public SalesPerson () {
      this.dept = "sales";
      this.quota = 100.0;
   }
}

public class Engineer extends WorkerBee {
   public String machine;
   public Engineer () {
      this.dept = "engineering";
      this.machine = "";
   }
}

Using these definitions, you can create instances of these objects that get the default values for their properties. Figure 8.3 illustrates using these JavaScript definitions to create new objects and shows the property values for the new objects.

Note: The term instance has a specific technical meaning in class-based languages. In these languages, an instance is an individual member of a class and is fundamentally different from a class. In JavaScript, "instance" does not have this technical meaning because JavaScript does not have this difference between classes and instances. However, in talking about JavaScript, "instance" can be used informally to mean an object created using a particular constructor function. So, in this example, you could informally say that jane is an instance of Engineer. Similarly, although the terms parent, child, ancestor, and descendant do not have formal meanings in JavaScript; you can use them informally to refer to objects higher or lower in the prototype chain.

Image:hier03.gif
Figure 8.3: Creating objects with simple definitions

{{template.PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties")}}

{{ wiki.languages( { "fr": "fr/Guide_JavaScript_1.5/L\'exemple_de_l\'employ\u00e9/Cr\u00e9ation_de_la_hi\u00e9rarchie", "ja": "ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_przyk\u0142adem/Tworzenie_hierarchii" } ) }}

Revision Source

<div class="noinclude"></div>
<h3 name="Creating_the_Hierarchy"> Creating the Hierarchy </h3>
<p>There are several ways to define appropriate constructor functions to implement the Employee hierarchy. How you choose to define them depends largely on what you want to be able to do in your application.
</p><p>This section shows how to use very simple (and comparatively inflexible) definitions to demonstrate how to get the inheritance to work. In these definitions, you cannot specify any property values when you create an object. The newly-created object simply gets the default values, which you can change at a later time. Figure 8.2 illustrates the hierarchy with these simple definitions.
</p><p>In a real application, you would probably define constructors that allow you to provide property values at object creation time (see <a href="en/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">More Flexible Constructors</a> for information). For now, these simple definitions demonstrate how the inheritance occurs.
</p><p><img alt="Image:hier02.gif" src="File:en/Media_Gallery/Hier02.gif"><br>
<small><b>Figure 8.2: The Employee object definitions</b></small> 
</p><p>The following Java and JavaScript <code>Employee</code> definitions are similar. The only differences are that you need to specify the type for each property in Java but not in JavaScript, and you need to create an explicit constructor method for the Java class.
</p>

&lt;/tr&gt;
<table class="fullwidth-table">
<tbody><tr>
<th>JavaScript</th>
<th>Java</th>
</tr>
<tr><td>
<pre>
function Employee () {
this.name = "";
this.dept = "general";
}
</pre>
</td>
<td>
<pre>
public class Employee {
   public String name;
   public String dept;
   public Employee () {
      this.name = "";
      this.dept = "general";
   }
}
</pre>
</td></tr></tbody></table>
<p>The <code>Manager</code> and <code>WorkerBee</code> definitions show the difference in how to specify the next object higher in the inheritance chain. In JavaScript, you add a prototypical instance as the value of the prototype  property of the constructor function. You can do so at any time after you define the constructor. In Java, you specify the superclass within the class definition. You cannot change the superclass outside the class definition.
</p>

&lt;/tr&gt;
<table class="fullwidth-table">
<tbody><tr>
<th>JavaScript</th>
<th>Java</th>
</tr>
<tr><td>
<pre>
function Manager () {
this.reports = [];
}
Manager.prototype = new Employee;

function WorkerBee () {
this.projects = [];
}
WorkerBee.prototype = new Employee;
</pre>
</td>
<td>
<pre>
public class Manager extends Employee {
   public Employee[] reports;
   public Manager () {
      this.reports = new Employee[0];
   }
}

public class WorkerBee extends Employee {
   public String[] projects;
   public WorkerBee () {
      this.projects = new String[0];
   }
}
</pre>
</td></tr></tbody></table>
<p>The <code>Engineer</code>  and <code>SalesPerson</code>  definitions create objects that descend from <code>WorkerBee</code> and hence from <code>Employee</code>. An object of these types has properties of all the objects above it in the chain. In addition, these definitions override the inherited value of the <code>dept</code> property with new values specific to these objects.
</p>
<table class="fullwidth-table">
<tbody><tr>
<th>JavaScript</th>
<th>Java</th>
</tr>
<tr>
<td>
<pre>
function SalesPerson () {
   this.dept = "sales";
   this.quota = 100;
}
SalesPerson.prototype = new WorkerBee;

function Engineer () {
   this.dept = "engineering";
   this.machine = "";
}
Engineer.prototype = new WorkerBee;
</pre>
</td>
<td>
<pre>
public class SalesPerson extends WorkerBee {
   public double quota;
   public SalesPerson () {
      this.dept = "sales";
      this.quota = 100.0;
   }
}

public class Engineer extends WorkerBee {
   public String machine;
   public Engineer () {
      this.dept = "engineering";
      this.machine = "";
   }
}
</pre>
</td>
</tr>
</tbody></table>
<p>Using these definitions, you can create instances of these objects that get the default values for their properties. Figure 8.3  illustrates using these JavaScript definitions to create new objects and shows the property values for the new objects.
</p><p><b>Note:</b> The term <i>instance</i> has a specific technical meaning in class-based languages. In these languages, an instance is an individual member of a class and is fundamentally different from a class. In JavaScript, "instance" does not have this technical meaning because JavaScript does not have this difference between classes and instances. However, in talking about JavaScript, "instance" can be used informally to mean an object created using a particular constructor function. So, in this example, you could informally say that <code>jane</code> is an instance of <code>Engineer</code>. Similarly, although the terms <i>parent, child, ancestor</i>, and <i>descendant</i> do not have formal meanings in JavaScript; you can use them informally to refer to objects higher or lower in the prototype chain.
</p><p><img alt="Image:hier03.gif" src="File:en/Media_Gallery/Hier03.gif"><br>
<small><b>Figure 8.3: Creating objects with simple definitions</b></small>
</p>
<div class="noinclude">
<p>{{template.PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties")}}
</p>
</div>
{{ wiki.languages( { "fr": "fr/Guide_JavaScript_1.5/L\'exemple_de_l\'employ\u00e9/Cr\u00e9ation_de_la_hi\u00e9rarchie", "ja": "ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_przyk\u0142adem/Tworzenie_hierarchii" } ) }}
Revert to this revision