Create Class Hierarchies with extend
Instantiate YUI
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.
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.
function showInheritance() {
var chicken = new Chicken('Little'),
results = Y.one('#demo');
results.setContent('Running: ' + (new Date()));
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
YUI().use('node', function(Y) {
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.setContent('Running: ' + (new Date()));
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');
});