CreateJSにちょっとずつ慣れてくるとAS3ライクに継承をやりたくなってきました。そこで少々はまった事があったのでメモしておきます。
EaselJSの継承に関してはダウンロードしたファイルにチュートリアルがあるのでそれを参考にしています。
下記に成功例と失敗例を載せています。
どちらもContainerクラスを継承したCustomShapeクラスのインスタンスをstageに配置しようとしています。
成功例
まず上手く継承出来た場合がこちらです。
赤と緑の四角が表示されています。
コートはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
function init() { var canvas, stage; var shape1, shape2; canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); shape1 = new CustomShape("red"); stage.addChild(shape1); shape2 = new CustomShape("green"); stage.addChild(shape2); shape2.x = 150; stage.update(); } /**************** * CustomShape *****************/ (function(window){ function CustomShape(color) { this.color = color; this.initialize(); } var p = CustomShape.prototype = new createjs.Container(); p.Container_init = p.initialize; p.initialize = function() { this.Container_init(); var myShape = new createjs.Shape(this.getGraphics()); this.addChild(myShape); }; p.getGraphics = function() { console.log(this);//CustomShape var g = new createjs.Graphics(); g.beginFill(this.color); g.drawRect(0, 0, 100, 100); g.endFill(); return g; }; window.CustomShape = CustomShape; }(window)); |
失敗例
駄目です。何も表示されません。
コートはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
function init() { var canvas, stage; var shape1, shape2; canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); shape1 = new CustomShape("red"); stage.addChild(shape1); shape2 = new CustomShape("green"); stage.addChild(shape2); shape2.x = 150; stage.update(); } /**************** * CustomShape *****************/ (function(window){ function CustomShape(color) { this.color = color; this.initialize(); } var p = CustomShape.prototype = new createjs.Container(); p.Container_init = p.initialize; p.initialize = function() { this.Container_init(); var myShape = new createjs.Shape(p.getGraphics()); this.addChild(myShape); }; p.getGraphics = function() { console.log(this);//Container var g = new createjs.Graphics(); g.beginFill(this.color); g.drawRect(0, 0, 100, 100); g.endFill(); return g; }; window.CustomShape = CustomShape; }(window)); |
両者の違いは37行目だけで、同じクラス内で定義した関数をthis経由で呼び出すか、prototype経由で呼び出すかの違いです。
成功例 : var myShape = new createjs.Shape(this.getGraphics());
失敗例 : var myShape = new createjs.Shape(p.getGraphics());
コンソールで確かめたところ、この違いで呼び出し先の関数内のthisが異なるようです。
this経由で呼び出した場合はそのクラスのインスタンス
prototype経由で呼び出した場合は親クラスのインスタンス
こうなる理由はよく分かりませんが注意が必要です。
