# EaselJS Inheritance

Synopsis: Creating custom classes that extend display objects.
Topics: inheritance, extend, promote
Target: EaselJS v0.8.0

This tutorial is part of the EaselJS GitHub repository.
Check out the repository for more tutorials and a handful of helpful samples.

## Inheritance

Creating new class definitions that extend existing display objects provides encapsulated, easily reusable visual elements, and it's easy to do. This tutorial shows one method of extending a class, but there are many other options - use the one that's most comfortable for you, but apply the lessons you learn here.

We'll create a `Button` class, that extends `Container`.

(function() { function Button(label) { this.Container_constructor(); this.label = label; } var p = createjs.extend(Button, createjs.Container); p.draw = function(ctx, ignoreCache) { this.Container_draw(ctx, ignoreCache); // add custom logic here. } window.Button = createjs.promote(Button, "Container"); }());

Lines 1 & 15 create an anonymous function scope to work in and avoid polluting the global scope.

### The constructor

Line 3 defines the constructor function which will be called when we create new Button instances. Line 4 calls Container's constructor, via a method alias that was set up by `promote` (more on that shortly). Calling the super class's constructor is very important to ensure new instances are set up correctly. Line 5 just sets the value of an instance property based on a parameter passed to the constructor.

### Using createjs.extend()

Line 7 makes Button extend, or inherit from, the Container class. This adds Container to it's prototype chain, making all of its methods available in Button.

The `extend` method passes back the new prototype, which we assign to a new variable `p` for easy access.

### Adding methods

Lines 9-12 set up a new draw method on Button's prototype, which overrides an existing draw method on Container. Just like with the constructor, it can call its super class's version of the method using a special method that was added by `promote`.

### Using createjs.promote()

Line 14 calls `promote`, which identifies all of the methods in Container that were overridden in Button (including the constructor) and promotes them into Button with a new name in the format `prefix_methodName`. We specified "Container" as the prefix which results in promoted methods that look like `Container_draw`. This gives you an easy and highly performant way to call super class methods in the instance scope.

The `promote` method returns the class, which is then assigned into the global/window scope to make it available for our application.

## Finishing up

Now the class can be instantiated, and added to the display list like any other display object.

var myButton = new Button("label"); stage.addChild(myButton);

Check out demo.html and Button.js to see an example of this in action. Click the buttons.