enchant.jsのクラスの処理で困ったこと

2018年9月29日

enchant.jsのクラスを使っていて「あれ？なんで？」となったことを書いておきます。クラスを利用するようになるとたぶん必ずつまずくポイントだと思います(^^;)

thisがダブるとき

クラスを使うと色々な変数をクラスオブジェクトのプロパティとして追加して使うことになるわけですが、たまにイベントリスナを使いたいときに困ったりすることがあります。

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        //略
        this.aaa = function(){
            //略
        };
        var player = new Sprite(32, 32);
        //略
        player.addEventListener('touchstart', function(){
            this.aaa();
            //略
        });
    }
});

と書いたときにplayer.addEventListner内でthis.aaa()メソッドを呼び出した場合、thisはplayerオブジェクトという風に判断されてうまく動いてくれません。こっちはMainGameSceneを指すthisのつもりなのに言うことを聞いてくれません。

一体どうすりゃいいのよ？としばらく悩んで放置していたんですが解決方法は実は簡単でした(´Д｀)

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        //略
        var main = this;
        //略
        player.addEventListener('touchstart', function(){
            main.aaa();
            //略
        });
    }    
});

変数を作ってやってそれにこのクラスオブジェクトのアドレスを渡してやれば処理できるってわけです。

簡単なことだけど気づかなかった(;´Д｀)

※別の方法でアロー関数式を使うやり方もありますが説明が難しいのでググってください(^^;)

クラス内の変数のスコープ

クラス内で宣言した変数は当然ローカル変数になります。それは分かるんだけど同じクラス内でも別のメソッドになるとローカル変数は使えない。

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        //略
        var player = new Sprite(32,32);
        //略
    },
    onenterframe: function(){
        //略
        player.x++;//エラーになる
        //略
    }
});

クラスのthis.○○みたいにプロパティにしてしまえば問題ないんだけどシーンのようなたくさん変数を扱う場合すべてをプロパティにするのは入力の字数も多くなるし読みにくくなるしやりたくない。

しかし、実際これはシーンのようなたくさん変数を扱うクラスでない限り問題にならないようで、しかもシーンだと基本的にonenterframeくらいしか使わないのでonenterframeを独立したメソッドとして書かず、

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        //略
        var player = new Sprite(32,32);
        //略
        this.addEventListener('onenterframe', function(){
            player.x++;
            //略
        });
    }
});

イベントとして処理することで解決しました。

本当は分けて書きたかったんだけど仕方ないね(´・ω・｀)