JS 4 新特性：混合属性（mixins）

Ext JS4的新特征1：混合属性（mixins）

       组合是Extjs4的新特性，可用于实现多继承的情况。该属性会以同步方式加载类文件，并实例化该类（译者推理其内部使用Ext.create方法）。直接上实例吧！

基本用法：

/*JS4新特性：混合属性(mixins)使用情况是用于同级类引用，很明显这是JS4的一种新的特性，完全不同于extend继承，A类、B类、C类为同一等级。C类可以任意调用它的mixins属性定义中的类函数。*/

Ext.onReady(function() {  
            
            Ext.define('MyClass.A', {
            
                    showA: function(){
                            console.log("输出A");
                    }
                });
            
            Ext.define('MyClass.B', {
            
                    showB: function(){
                            console.log("输出B");
                    }
             });
        
            Ext.define('MyClass.C', {
                    
                    mixins:{
                        classA : 'MyClass.A',
                        classB : 'MyClass.B',
                    },
                    
                    showC: function(){
                            console.log("输出C");
                    }
    
            });    
            
            var classc = Ext.create('MyClass.C');
            classc.showA();        //在控制台输出A
            classc.showB();        //在控制台输出B
            classc.showC();        //在控制台输出C
                
});

 结论一：定义了mixins类，C类很简单的就可以去调用A类、B类的中的任意函数了。

 

二、A类、B类、C类中具有相同的方法show()时，

/*JS4新特性：混合属性(mixins)使用情况2:第2种情况：C类也有show(),C类的mixins中的A类、B类也都拥有相同的方法show()时，自己最先

　　　　 C类没有show(),c.show()就会去它的父类CC.show().
            如果C类自己没有show(),父类也没有，就会去找mixins中的A类、B类的顺序寻找，
            这也是很好理解的。其执行顺序为：当前类->父类->mixins类。
*/

上代码了：

Ext.onReady(function() {  
            
            Ext.define('MyClass.A', {
            
                    show: function(){
                            console.log("输出A");
                    }
                });
            
            Ext.define('MyClass.B', {
            
                    show: function(){
                            console.log("输出B");
                    }
             });
            
            Ext.define('MyClass.CC', {
            
                    show: function(){
                            console.log("输出C爸");
                    }
             });
        
            Ext.define('MyClass.C', {
                    
                    extend: 'MyClass.CC',
                    
                    mixins:{
                        classA : 'MyClass.A',
                        classB : 'MyClass.B',
                    },
                    
                    show: function(){
                            console.log("输出C");
                    }
    
            });    
            
            var classc = Ext.create('MyClass.C');
            classc.show();        //在控制台输出C
            
                
});

结论二：方法的调用遵循最近优先原则，优先级顺序从自己到别人——首先是当前自己类、自己的父类、最后去找别人mixins类。

三、在当前类中引用mixins类中的方法

Ext.onReady(function() {  
            
            Ext.define('MyClass.A', {
            
                    show: function(){
                            console.log("输出A");
                    }
                });            
            
            Ext.define('MyClass.C', {
            
                    mixins:{
                        classA : 'MyClass.A'                        
                    },
                    
                    alert: function(){
                                this.mixins.classA.show();
                    }
    
            });    
            
            var classc = Ext.create('MyClass.C');
            classc.alert();        //在控制台输出A
            classc.show();        //这就是调用mixins的好处，简单一句话胜似多出转折。
            /*classc本身是没有show()函数的，就是没有加了mixins，所以它有了。*/
                
});

结论三：classc本身是没有show()函数的，就是因为加了mixins，所以它就非常简单了拥有了A类中的函数show()