YUI Library Examples: YAHOO Global Object: Creating Class Hierarchies with `YAHOO.lang.extend`

YAHOO.lang is packaged with the YAHOO Global Object

YAHOO.lang comes bundled with the YAHOO Global Object. To add the YAHOO Global Object, include the following in your markup:


1	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js"></script>
	view plain \| print \| ?

If you are using any other YUI component on your page, you should already have YAHOO.lang available.

Creating a class hierarchy

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


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

`instanceof` many classes

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

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


1	YAHOO.util.Event.on('demo_btn','click', function () {
2	var chicken = new Chicken('Little'),
3	results = YAHOO.util.Dom.get('demo');
4
5	results.innerHTML = ((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.innerHTML += ((chicken instanceof Bird) ?
10	"<p>chicken IS an instance of YAHOO.example.Bird.</p>" :
11	"<p>chicken IS NOT an instance of Bird.</p>");
12
13	results.innerHTML += ((chicken instanceof Chicken) ?
14	"<p>chicken IS an instance of YAHOO.example.Chicken.</p>" :
15	"<p>chicken IS NOT an instance of Chicken.</p>");
16
17	// Chicken instances inherit Bird methods and members
18	results.innerHTML += ((chicken.isFlighted()) ?
19	"<p>chicken CAN fly.</p>" :
20	"<p>chicken CAN NOT fly.</p>");
21
22	results.innerHTML += "<p>chicken's name is " + chicken.getName() + ".</p>";
23	});
	view plain \| print \| ?

Other architecture strategies

Take a look at YAHOO.lang.augmentProto and YAHOO.lang.augmentObject for different strategies of managing your code structure.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YAHOO Global Object Examples:

More YAHOO Global Object Resources:

User's Guide (external)
API Documentation

YUI Library Examples: YAHOO Global Object: Creating Class Hierarchies with YAHOO.lang.extend

YAHOO Global Object: Creating Class Hierarchies with YAHOO.lang.extend