YUI 3.x Home -

YUI Library Examples: The YUI Global Object: Create Class Hierarchies with extend

The YUI Global Object: Create Class Hierarchies with extend

JavaScript supports the notion of class hierarchies. As in other object-oriented languages, you can create generic classes, then create specialized subclasses that add or override functionality of the superclass.

Click the "Show Inheritance" button to do some evaluation of the created object.

View example in new window. 

var chicken = new Chicken();

Using extend

Instantiate YUI

  1. <!-- include yui -->
  2. <script type="text/javascript" src="../../build/yui/yui.js"></script>
  3.  
  4. YUI().use("node", function(Y) {
  5.     // This method is in the 'oop' module.  Since we require 'node'
  6.     // for this example, and 'node' requires 'oop', the 'oop' module
  7.     // will be loaded automatically.
<!-- include yui -->
<script type="text/javascript" src="../../build/yui/yui.js"></script>
 
YUI().use("node", function(Y) {
    // This method is in the 'oop' module.  Since we require 'node'
    // for this example, and 'node' requires 'oop', the 'oop' module
    // will be loaded automatically.

Creating a class hierarchy

In this example, we create a class Bird then create a subclass Chicken.

  1. function Bird(name) {
  2.     this.name = name;
  3. }
  4.  
  5. Bird.prototype.flighted   = true;  // Default for all Birds
  6. Bird.prototype.isFlighted = function () { return this.flighted };
  7. Bird.prototype.getName    = function () { return this.name };
  8.  
  9. function Chicken(name) {
  10.     // Chain the constructors
  11.     Chicken.superclass.constructor.call(this, name);
  12. }
  13. // Chickens are birds
  14. Y.extend(Chicken, Bird);
  15.  
  16. // Define the Chicken prototype methods/members
  17. Chicken.prototype.flighted = false; // Override default for all Chickens
function Bird(name) {
    this.name = name;
}
 
Bird.prototype.flighted   = true;  // Default for all Birds
Bird.prototype.isFlighted = function () { return this.flighted };
Bird.prototype.getName    = function () { return this.name };
 
function Chicken(name) {
    // Chain the constructors
    Chicken.superclass.constructor.call(this, name);
}
// Chickens are birds
Y.extend(Chicken, Bird);
 
// Define the Chicken prototype methods/members
Chicken.prototype.flighted = false; // Override default for all Chickens

instanceof many classes

Unlike classes composed with augmentation, subclasses created with extend are also considered instances of their superclass and all classes higher up the inheritance tree.

We'll create an instance of Chicken and run some instanceof and method tests against it.

  1. function showInheritance() {
  2.     var chicken = new Chicken('Little'),
  3.         results = Y.one('#demo');
  4.  
  5.     results.append(((chicken instanceof Object) ?
  6.         "<p>chicken IS an instance of Object.</p>" :
  7.         "<p>chicken IS NOT an instance of Object.</p>"));
  8.  
  9.     results.append(((chicken instanceof Bird) ?
  10.         "<p>chicken IS an instance of Bird.</p>" :
  11.         "<p>chicken IS NOT an instance of Bird.</p>"));
  12.  
  13.     results.append(((chicken instanceof Chicken) ?
  14.         "<p>chicken IS an instance of Chicken.</p>" :
  15.         "<p>chicken IS NOT an instance of Chicken.</p>"));
  16.  
  17.     // Chicken instances inherit Bird methods and members
  18.     results.append(((chicken.isFlighted()) ?
  19.         "<p>chicken CAN fly.</p>" :
  20.         "<p>chicken CAN NOT fly.</p>"));
  21.  
  22.     results.append("<p>chicken's name is " + chicken.getName() + ".</p>");
  23. }
  24.  
  25. Y.on('click', showInheritance, '#demo_btn');
function showInheritance() {
    var chicken = new Chicken('Little'),
        results = Y.one('#demo');
 
    results.append(((chicken instanceof Object) ?
        "<p>chicken IS an instance of Object.</p>" :
        "<p>chicken IS NOT an instance of Object.</p>"));
 
    results.append(((chicken instanceof Bird) ?
        "<p>chicken IS an instance of Bird.</p>" :
        "<p>chicken IS NOT an instance of Bird.</p>"));
 
    results.append(((chicken instanceof Chicken) ?
        "<p>chicken IS an instance of Chicken.</p>" :
        "<p>chicken IS NOT an instance of Chicken.</p>"));
 
    // Chicken instances inherit Bird methods and members
    results.append(((chicken.isFlighted()) ?
        "<p>chicken CAN fly.</p>" :
        "<p>chicken CAN NOT fly.</p>"));
 
    results.append("<p>chicken's name is " + chicken.getName() + ".</p>");
}
 
Y.on('click', showInheritance, '#demo_btn');

Other architecture strategies

Take a look at augment and mix for different strategies of managing your code structure.

Full Source

  1. YUI().use("node", function(Y) {
  2.     // This method is in the 'oop' module.  Since we require 'node'
  3.     // for this example, and 'node' requires 'oop', the 'oop' module
  4.     // will be loaded automatically.
  5.  
  6.     function Bird(name) {
  7.         this.name = name;
  8.     }
  9.  
  10.     Bird.prototype.flighted   = true;  // Default for all Birds
  11.     Bird.prototype.isFlighted = function () { return this.flighted };
  12.     Bird.prototype.getName    = function () { return this.name };
  13.  
  14.     function Chicken(name) {
  15.         // Chain the constructors
  16.         Chicken.superclass.constructor.call(this, name);
  17.     }
  18.  
  19.     // Chickens are birds
  20.     Y.extend(Chicken, Bird);
  21.  
  22.     // Define the Chicken prototype methods/members
  23.     Chicken.prototype.flighted = false; // Override default for all Chickens
  24.  
  25.     function showInheritance() {
  26.         var chicken = new Chicken('Little'),
  27.             results = Y.one('#demo');
  28.  
  29.         results.append(((chicken instanceof Object) ?
  30.             "<p>chicken IS an instance of Object.</p>" :
  31.             "<p>chicken IS NOT an instance of Object.</p>"));
  32.  
  33.         results.append(((chicken instanceof Bird) ?
  34.             "<p>chicken IS an instance of Y.example.Bird.</p>" :
  35.             "<p>chicken IS NOT an instance of Y.example.Bird.</p>"));
  36.  
  37.         results.append(((chicken instanceof Chicken) ?
  38.             "<p>chicken IS an instance of Y.example.Chicken.</p>" :
  39.             "<p>chicken IS NOT an instance of Y.example.Chicken.</p>"));
  40.  
  41.         // Chicken instances inherit Bird methods and members
  42.         results.append(((chicken.isFlighted()) ?
  43.             "<p>chicken CAN fly.</p>" :
  44.             "<p>chicken CAN NOT fly.</p>"));
  45.  
  46.         results.append("<p>chicken's name is " + chicken.getName() + ".</p>");
  47.     }
  48.  
  49.     Y.on('click', showInheritance, '#demo_btn');
  50. });
YUI().use("node", function(Y) {
    // This method is in the 'oop' module.  Since we require 'node'
    // for this example, and 'node' requires 'oop', the 'oop' module
    // will be loaded automatically.
 
    function Bird(name) {
        this.name = name;
    }
 
    Bird.prototype.flighted   = true;  // Default for all Birds
    Bird.prototype.isFlighted = function () { return this.flighted };
    Bird.prototype.getName    = function () { return this.name };
 
    function Chicken(name) {
        // Chain the constructors
        Chicken.superclass.constructor.call(this, name);
    }
 
    // Chickens are birds
    Y.extend(Chicken, Bird);
 
    // Define the Chicken prototype methods/members
    Chicken.prototype.flighted = false; // Override default for all Chickens
 
    function showInheritance() {
        var chicken = new Chicken('Little'),
            results = Y.one('#demo');
 
        results.append(((chicken instanceof Object) ?
            "<p>chicken IS an instance of Object.</p>" :
            "<p>chicken IS NOT an instance of Object.</p>"));
 
        results.append(((chicken instanceof Bird) ?
            "<p>chicken IS an instance of Y.example.Bird.</p>" :
            "<p>chicken IS NOT an instance of Y.example.Bird.</p>"));
 
        results.append(((chicken instanceof Chicken) ?
            "<p>chicken IS an instance of Y.example.Chicken.</p>" :
            "<p>chicken IS NOT an instance of Y.example.Chicken.</p>"));
 
        // Chicken instances inherit Bird methods and members
        results.append(((chicken.isFlighted()) ?
            "<p>chicken CAN fly.</p>" :
            "<p>chicken CAN NOT fly.</p>"));
 
        results.append("<p>chicken's name is " + chicken.getName() + ".</p>");
    }
 
    Y.on('click', showInheritance, '#demo_btn');
});

More The YUI Global Object Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings