Sencha Touch 2.4 callParent() 用法

---

callParent() 用法

方法介绍

用来调用父类的同名方法，并传参，这在从一个框架类派生且要重写诸如onRender这样的方法时会经常看到。

传参方式

1.arguments

Ext.define('App.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    onRender: function (parentNode, index) {
        this.callParent(arguments);//调用父类的同名方法onRender(),并传参过去
} });

2.直接传参

onRender: function (parentNode, index) {
    this.callParent([ parentNode, index ]);
}

这看上去没有区别，不过，在使用Sencha Cmd 5新的优化对callParent进行优化的时候，性能的改进会变得很明显。在启用了优化的时候，这两个方法会被优化为以下代码：

onRender: function (parentNode, index) {
    Ext.panel.Panel.prototype.onRender.apply(this, arguments);
}
 
onRender: function (parentNode, index) {
    Ext.panel.Panel.prototype.onRender.call(this, parentNode, index);
}

在第二种情况下，优化会使用Javascript函数的call方法来替代apply方法。要避免使用arguments。这两种方式毫无疑问都是高性能的方式。事实证明要尽量避免创建数组直接量。显然，在启用了优化后的代码中性能是最至关重要的地方，因而值得使用显示数组来代替arguments。

//父类
Ext.define('VehicleApp.vehicle.Vehicle', {
                                unit: "mph", 
                                drive: function(speed) {
                                    console.log(this.$className + ": Vrrroom: " + speed + " " + this.unit);
                                }
});

//子类
Ext.define('VehicleApp.vehicle.Motor', {
    extend: 'VehicleApp.vehicle.Vehicle',
    
    config: {
        nrOfWheels: 2 //<1>
    },

    constructor: function (config) {
        this.initConfig(config); //<2> 
    },

    drive: function(speed) { //<3>
        
        if(this.getNrOfWheels() < 3) { //<4>
            console.log(this.$className + 
                ": Vrrroom, vrrroom on " + this.getNrOfWheels() +
                     " wheels.");
        } else {
            this.callParent( [60]); //调用父类的同名方法drive()，并传参过去，是个数组，里面放了一个60
        }
    }
});

转自：http://extjs.org.cn/node/721

@落雨
ae6623.cn