EaselJSの継承ですこしハマった点


130405_msok
CreateJSにちょっとずつ慣れてくるとAS3ライクに継承をやりたくなってきました。そこで少々はまった事があったのでメモしておきます。

EaselJSの継承に関してはダウンロードしたファイルにチュートリアルがあるのでそれを参考にしています。

下記に成功例と失敗例を載せています。
どちらもContainerクラスを継承したCustomShapeクラスのインスタンスをstageに配置しようとしています。

成功例

まず上手く継承出来た場合がこちらです。
赤と緑の四角が表示されています。

コートはこちらです。

失敗例

駄目です。何も表示されません。

コートはこちらです。

両者の違いは37行目だけで、同じクラス内で定義した関数をthis経由で呼び出すか、prototype経由で呼び出すかの違いです。

成功例 : var myShape = new createjs.Shape(this.getGraphics());
失敗例 : var myShape = new createjs.Shape(p.getGraphics());

コンソールで確かめたところ、この違いで呼び出し先の関数内のthisが異なるようです。

this経由で呼び出した場合はそのクラスのインスタンス
prototype経由で呼び出した場合は親クラスのインスタンス

こうなる理由はよく分かりませんが注意が必要です。