callParent的用途是什么？

Question

我已经通过这个在线教程来理解Sencha的基本概念。现在，我确信我可以期待着用我的知识开始为真正的项目编写代码。

但是我对作者在本教程中使用的this.callParent(arguments)的功能有一个疑问。

我知道这个名字清楚地表明了“--这个的父类”被称为“”。

但我有这样的问题：(与本教程相关)

• 为什么我们要调用父类？
• 这会再次完全运行父类吗？

请帮助我理解与上述教程相关的callParent。

我已经通过了触摸文档，但我无法理解。(对于作者的代码，我的解释似乎完全不同)。

项目下载链接

Answer 1

正如您在问题中提到的，this.callParent(arguments)在超类中调用适当的函数。

这就是在构造函数中调用this.callParent(arguments)，调用正在扩展的超类的构造函数。

在您提到的教程中，这就是作者所做的.

launch: function () {
  //This line simply calls the super class(Ext.app.Controller) launch function  
  this.callParent(arguments);
  var notesStore = Ext.getStore("Notes");
  notesStore.load();
  console.log("launch");
},

 init: function () {
  // This line simply calls the super class(Ext.app.Controller) init function   
  this.callParent(arguments); 
  console.log("init");
 }

但是他为什么要这么做，我不确定，因为在该教程中没有必要调用Ext.app.Controller类init和launch函数。

，让我用例子来解释

1)创建名为Main的超类

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    launch: function () {
       console.log("Main launch");
    },      

    init: function () {
       console.log("Main init");
    },    

    config: {

    } 
});

2)创建扩展SubMain的子类MyApp.controller.Main

Ext.define('MyApp.controller.SubMain', {
    extend: 'MyApp.controller.Main',

    launch: function () {
        this.callParent(arguments);
       console.log("launch");
    },

     init: function () {
        this.callParent(arguments);
       console.log("init");
     },

    config: {
    }
});

现在，当您运行应用程序时，我们放置在超级类和子类中的console.log将在浏览器控制台中打印如下

输出

Main init 
Main init 
SubMain init 
Main launch 
Main launch
SubMain launch 

众所周知，当我们启动应用程序时，每个控制器的init和launch函数将被调用一次。

但是，您可以看到Main init & Main启动函数被调用了两次，为什么？

之所以再次调用init和超类的启动函数，是因为我们将this.callParent(arguments);放在SubMain的init and launch函数中，即再次调用Main(超类)类的init和启动函数。

还有更多，传递给arguments callParent 函数的怎么办？

参数是一个特殊的参数。

现在，让我们以一个例子来测试

Ext.define('Mail.controller.Messages', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            viewer: 'messageviewer',
            messageList: 'messagelist'
        },
        control: {
            messageList: {
                itemtap: 'loadMessage'
            }
        }
    },

    loadMessage: function(item) {
        this.getViewer().load(item);
    }
});

Mail.controller.phone.Messages类扩展了Mail.controller.Messages，这意味着所有的配置和函数都是继承的。

 Ext.define('Mail.controller.phone.Messages', {
    extend: 'Mail.controller.Messages',

    config: {
        refs: {
            main: '#mainPanel'
        }
    },

    loadMessage: function(item) {
        // Without this line loadMessage function of super class will not be invoked
        this.callParent(arguments);
        this.getMain().setActiveItem(1);
    }
});

现在，当用户在messageList中的项上标签时，将调用Mail.controller.phone.Messages类中的loadMessage函数。

另外，我们将this.callParent(arguments);放在loadMessage函数上，因此将首先调用Mail.controller.Messages类loadMessage函数，然后运行this.getMain().setActiveItem(1);行。

如前所述，在将loadMessage函数中的this.callParent(arguments);放在Mail.controller.phone.Messages类中之前，不会调用Mail.controller.Messages中的this.callParent(arguments);函数。

请注意，item参数将只传递给Mail.controller.phone.Messages的loadMessage函数，但是Mail.controller.phone.Messages的loadMessage函数仍然得到item参数，如何？

因为arguments，您在this.callParent类的loadMessage函数中传递了this.callParent函数。