Sencha ExtJSとSencha Touchのmixinsについて

mixinsの理解をちょっと深める

mixinsを使うことで、継承を使わずにクラスを追加してメソッドやプロパティを使うことが出来るようになります。
mixinsは、複数のクラスを追加することも出来るようになっています。
じゃあ、複数クラスをmixinsした場合に、同じメソッドがあったらどうなるんだろうという疑問が。

// mixinのクラス1
Ext.define('CanWalk', {  
     doAction: function() {  
         console.log('walk');  
     }  
});  

// mixinのクラス2
Ext.define('CanTalk', {  
     doAction: function() {  
         console.log('talk');  
     }  
});  

// 複数mixinしたクラス
Ext.define('Human', {
    mixins: {
        canwalk: 'CanWalk',
        cantalk: 'CanTalk'
    }
});

// 複数mixinしたクラスを生成してメソッド呼び出ししてみる
Ext.application({
    name: 'MyApp',
    requires: ['Human'],
    launch: function(){
        var human = Ext.create('Human', {
        });
        human.doAction();
    }
})

こんな感じですね。
CanWalkとCanTalkのクラスは、doActionという同じ名前をメソッドを持っています。
CanWalkとCanTalkをmixinsで追加したクラスを生成して、doActionを呼び出すと、
どちらが呼ばれるのか。エラーや警告が出るのか。。

実際に上記のソースで試してみると、
コンソールログには、walkと出力されます。

じゃあ、mixinsの定義部分を下記のように変更すると、

// 複数mixinしたクラス
Ext.define('Human', {
    mixins: {
        cantalk: 'CanTalk',
        canwalk: 'CanWalk'
        
    }
});

コンソールログには、talkと出力されるようになります。 つまり、エラーや警告は出ずに、mixinsの定義の中で先に記述されたほうが優先されるようになっているみたいです。

今回のサンプルです。 mixinsの中の定義の順序を変えてみて試してみてください。

http://jsfiddle.net/yasutomog/Hensp/2/

複数mixinsする場合には、同じメソッド名がないか気をつけたほうがいいですね。
こういうバグは見つかりにくいので、mixinsするようなクラスには、一定の命名規則をつけるのもいいかも知れないですね。