# EaselJS: Inheritance

Synopsis: Creating custom classes that extend display objects.
Topics: inheritance
Target: EaselJS v0.5.0

## 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() { var Button = function(label) { this.initialize(label); } Button.prototype = new createjs.Container(); Button.prototype.Container_initialize = p.initialize; Button.prototype.initialize = function(label) { this.Container_initialize(); // add custom setup logic here. } window.Button = Button; }());

Lines 1 & 15 are creating and calling an anonymous wrapper function (to keep from polluting the global scope). On line 3 I am defining a new constructor function, then setting its prototype to a new `Container` instance on line 6. This makes my new class inherit all of the properties and methods from `Container`.

## The initialize method

In the constructor on line 4, we call the `initialize` method, and pass through the constructor parameters. The `initialize` method handles all of the set up work for new instances, and it is vital that it gets called.

For this class, we are overriding `Container`'s `initialize` method so that we can do some custom set up, however, we still need to make sure that the super class's `initialize` method gets called. This is VERY important, especially for classes that inherit from `Container`.

To do this, we are saving off the existing `initialize` method (line 8), redefining it (line 9), and making sure that we call it first in the new method (line 10).

## Finishing up

Finally, on line 14, we assign our class back into the global (window) scope, to make it available for our application. 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 this in action.