extjs - this.callParent（arguments）;はなぜですか。ExtJSのコンストラクターの最初に呼び出されますか？

Question

最近変更した多くのプログラムでは、常に現在のオブジェクトの親引数を呼び出すことに気づきました。私はこれが必要であることを知っていますが、これが一般的な慣行である理由についてしっかりとした理解がありません。ジュニアレベルの開発者のための知恵...私はこれを知っている必要があります。

Answer 1

これは、ExtJS がコンストラクターでのクラス継承をサポートするために使用するメカニズムです。this.callParent(arguments)コンストラクターを呼び出すと、拡張されている直接の親クラスのコンストラクターが呼び出されます。

Answer 2

この質問のバージョンがわかりません。しかし、私のコードに関する限り、Ext JS 5 では、callParent()- 現在のメソッドの「親」メソッドを呼び出します。これは、派生またはオーバーライドによって以前にオーバーライドされたメソッドです。

このコードを試してください。

MyApp.test::LifecycleExample.js

Ext.define('MyApp.test.LifecycleExample', {
    extend: 'MyApp.test.TrialComponent',

    initComponent: function() {
        var me = this;

        me.width = 200;
        me.height = 100;
        me.html = {
            tag: 'div',
            html: 'X',
            style: {
                'float': 'right',
                'padding': '10px',
                'background-color': '#e00',
                'color': '#fff',
                'font-weight': 'bold'
            }
        };
        console.log("init is called before callParent()");

        me.myOwnProperty = [1, 2, 3, 4];

        me.callParent();

        console.log('1. initComponent');
    },

    beforeRender: function() {
        console.log('2. beforeRender');

        this.callParent(arguments);
    },

    onRender: function() {
        console.log('3. onRender');

        this.callParent(arguments);

        this.el.setStyle('background-color', '#ff0');
    },

    afterRender: function() {
        console.log('4. afterRender');

        this.callParent(arguments);

        this.el.down('div').on('click', this.myCallback, this);
    },

    beforeDestroy: function() {
        console.log('5. beforeDestroy');

        this.callParent(arguments);
    },

    onDestroy: function() {
        console.log('6. onDestroy');

        delete this.myOwnProperty;
        this.el.un('click', this.myCallback);

        this.callParent(arguments);
    },

    myCallback: function() {
        var me = this;
        Ext.Msg.confirm('Confirmation', 'Are you sure you want to close this panel?', function(btn) {
            if (btn === 'yes') {
                me.destroy();
            }
        });
    }
});

MyApp.test::TrialComponent.js (Ext.Component)

Ext.define('MyApp.test.TrialComponent', {
    extend: 'Ext.Component',

    constructor: function() {
        console.log('parent const');
        this.initComponent();
    },

    constructor: function(config) {
        console.log('parent const config' + config);
        this.initComponent();
    }
});

ブラウザのコンソールの出力は次のとおりです。

parent const config[object Object]
init is called before callParent()
1. initComponent

---

callParent( args ) 現在のメソッドの「親」メソッドを呼び出します。これは、派生またはオーバーライドによって以前にオーバーライドされたメソッドです。

参照は ext js api docs です。

http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Base-method-callParent

Answer 3

doco によると (javaCoder に感謝) http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Base-static-method-callParent :

Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

そしてarguments、次のとおりです。

Parameters
args : Array/Arguments
The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

argumentsこれは、このメソッドの引数オブ​​ジェクトを表すことを示唆していますが。ただし、開発者ツールを見ると、呼び出し先などの他の情報も含む別のオブジェクトにカプセル化されたオブジェクトです。