在 ExtJS 中,继承是一项关键的功能。当我们创建子类时,通常需要重写父类中的某些方法。这时候,我们可以使用 callParent()
方法来调用父类中的同名方法。但是,在某些情况下,这种方式可能会带来一些困惑和不必要的麻烦。
使用 callParent()
的问题
考虑以下代码:
-- -------------------- ---- ------- ------------------------------- - --------- ---------- - ------------------------------------ - --- ------------------------------ - ------- -------------------- --------- ---------- - ----------------------------------- ------------------ - --- --- --- - ------------------------------- ---------------
在这个例子中,我们定义了一个名为 ParentClass
的类,其中包含一个名为 myMethod()
的方法。然后我们定义了一个名为 ChildClass
的类,它继承了 ParentClass
并重写了 myMethod()
方法。在 ChildClass.myMethod()
中,我们调用了 callParent()
来调用 ParentClass.myMethod()
。最后,我们通过创建 ChildClass
的实例并调用其 myMethod()
方法来测试代码。
运行以上代码,输出结果如下:
ChildClass.myMethod ParentClass.myMethod
结果看起来正确,但如果我们继续对 ParentClass
进行扩展,如下所示:
-- -------------------- ---- ------- ------------------------------- - --------- ---------- - ------------------------------------ -- -------------- ---------- - ----------------------------------------- - ---
现在再运行上述代码,输出结果仍然是:
ChildClass.myMethod ParentClass.myMethod
这表明 callParent()
方法调用了父类的同名方法,而不是当前方法的直接上层方法。因此,在多层继承链中使用 callParent()
可能会导致一些问题。
使用 callSuper()
的解决方案
为了避免这种情况,我们可以使用 callSuper()
方法来调用当前方法的直接上层方法,而不是同名方法。修改上述 ChildClass
的代码如下:
-- -------------------- ---- ------- ------------------------------ - ------- -------------------- --------- ---------- - ----------------------------------- ----------------- - ---
当我们运行以上代码时,输出结果将变成:
ChildClass.myMethod
这个结果符合我们的预期:myMethod()
方法只调用了它的直接上层方法。
另外需要注意的是,在多层继承链中,如果我们想要调用更高级别的父类方法,可以使用 this.callSuper('methodName')
的形式来指定方法的名称。
结论
在 ExtJS 中,使用 callParent()
方法在调用父类方法时可能会带来一些问题。为了避免这种情况,我们可以使用 callSuper()
方法来调用当前方法的直接上层方法,而不是同名方法。如果需要调用更高级别的父类方法,可以使用 this.callSuper('methodName')
的形式来指定方法的名称。
这篇文章提供了一种更好的方式来调用父类方法,并希望对 ExtJS 开发者有所帮助。下面是完整的示例代码:
-- -------------------- ---- ------- ------------------------------- - --------- ---------- - ------------------------------------ -- -------------- ---------- - ----------------------------------------- - --- ------------------------------ - ------- -------------------- --------- ---------- - ----------------------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------