EaselJS 0.8.0からextend()メソッドが備わり、CreateJSのクラスの継承の仕組みも改められました。本稿はこれまでの継承の仕方で定められたクラスを、この新しい仕組みにどう書替えたらよいか、かいつまんでご説明します。

EaselJS 0.8.0 implements the new extend() method. And class and inheritance model of the CreateJS was revised with the method. This note tells how your custom classes could be ported to the new model.

01 スーパークラスのオブジェクトをプロトタイプオブジェクトに定める
Setting superclass's object to the prototype object

これまでの継承は、コンストラクタのFunction.prototypeプロパティをスーパークラスのオブジェクトで書替えました。このやり方はEaselJS 0.8.0でも引続き使えます。以下のクラス(Circle)は、EaselJS 0.8.0でも正しく動きます(図001)。

Overwriting the Function.prototype property of a constructor with an instance of the super class could be still used to inherit the class. The class below runs collectly with the EaselJS 0.8.0 (Figure 001).

図001■クラスで描かれた青い円

Figure 001•Blue circle drawn with the class

function Circle() {   this.initialize(); } Circle.prototype = new createjs.Shape(); Circle.prototype.initialize = function() {   var myGraphics = this.graphics;   myGraphics.beginFill("blue");   myGraphics.drawCircle(0, 0, 50); };

02 extend()メソッドで継承を書替えてみる
Revising inheritance with the extend() method

前掲コードの継承のステートメントを、extend()メソッドで以下のように書替えてみます。すると、円は描かれず、インスタンスのgraphicsプロパティがundefinedになっています。これは、クラス(Circle)のコンストラクタがスーパークラスのコンストラクタを呼出さないため、スーパークラスのプロパティが初期化されないからです。前掲のクラスの場合、継承するときにスーパークラスのコンストラクタを呼んだので、そのプロパティがつくられていました。

Try to revise the statement of inheritance in the code above with the method. Then, a circle is not shown. And the graphics property of the instance is undefined. Because the constructor of the class (Circle) does not calls the super class's constructor. Therefore, its properties are not initialized. On the other hand, the code above calls the constructor of the super class to inherit it and its properties are already created.

function Circle() {   this.initialize(); } // Circle.prototype = new createjs.Shape(); createjs.extend(Circle, createjs.Shape); Circle.prototype.initialize = function() {   var myGraphics = this.graphics;   myGraphics.beginFill("blue");   myGraphics.drawCircle(0, 0, 50); };

03 extend()メソッドで正しく継承する
Completing inheritance with the extend() method

extend()メソッドで正しく継承するには、クラスのコンストラクタからスーパークラスのコンストラクタを呼出さなければなりません。ただし、新しいCreateJSのクラスからはinitialize()メソッドが除かれています。そのために用いるのが、新たに備わったpromote()メソッドです。スーパークラスのコンストラクタは、以下のコードのように呼出せます。

To completing inheritance with the extend() method, the constructor of the super class should be called. But the initialize() methods of the classes in the new CreateJS are depricated. Then the new promote() method should be used as follows:

function Circle() {   this.Shape_constructor();   this.initialize(); } // Circle.prototype = new createjs.Shape(); createjs.extend(Circle, createjs.Shape); Circle.prototype.initialize = function() {   var myGraphics = this.graphics;   myGraphics.beginFill("blue");   myGraphics.drawCircle(0, 0, 50); }; createjs.promote(Circle, "Shape");

作成者: 野中文雄
作成日: 2015年1月16日