YUI Library Home

Site Search (YDN & YUIBlog):

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

# YAHOO Global Object: Creating Class Hierarchies with `YAHOO.lang.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.

    var chicken = new YAHOO.example.Chicken();

## 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:

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>

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`. var Ye = YAHOO.example; Ye.Bird = function (name) { this.name = name; }; Ye.Bird.prototype.flighted = true; // Default for all Birds Ye.Bird.prototype.isFlighted = function () { return this.flighted }; Ye.Bird.prototype.getName = function () { return this.name }; Ye.Chicken = function (name) { // Chain the constructors this.constructor.superclass.constructor.call(this, name); }; // Chickens are Birds YAHOO.lang.extend(Ye.Chicken, Ye.Bird); // Define the Chicken prototype methods/members Ye.Chicken.prototype.flighted = false; // Override default for all Chickens

## `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.

YAHOO.util.Event.on('demo_btn','click', function () { // Create a test Chicken var chicken = new Ye.Chicken('Little'); var results = YAHOO.util.Dom.get('demo'); // Is the chicken an instanceof Object? results.innerHTML = chicken instanceof Object ? "<p>chicken IS an instance of Object.</p>" : "<p>chicken IS NOT an instance of Object.</p>"; // Is the chicken an instanceof YAHOO.example.Bird? results.innerHTML += chicken instanceof Ye.Bird ? "<p>chicken IS an instance of YAHOO.example.Bird.</p>" : "<p>chicken IS NOT an instance of YAHOO.example.Bird.</p>"; // Is the chicken an instanceof YAHOO.example.Chicken? results.innerHTML += chicken instanceof Ye.Chicken ? "<p>chicken IS an instance of YAHOO.example.Chicken.</p>" : "<p>chicken IS NOT an instance of YAHOO.example.Chicken.</p>"; // instances inherit methods and members from their superclass and ancestors results.innerHTML += chicken.isFlighted() ? "<p>chicken CAN fly.</p>" : "<p>chicken CAN NOT fly.</p>"; results.innerHTML += "<p>chicken's name is " + chicken.getName() + ".</p>"; });

## 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:

- Type-Checking Your Data
- User Agent Detection
- Creating Class Hierarchies with `YAHOO.lang.extend`
- Creating a Composition-Based Class Structure Using `YAHOO.lang.augmentProto`
- Add Behavior to Objects or Static Classes with `YAHOO.lang.augmentObject`
- Combining Simple Data Sets with `YAHOO.lang.merge`

### More YAHOO Global Object Resources:

- User's Guide (external)
- API Documentation

Copyright © 2009 Yahoo! Inc. All rights reserved.

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