在 ExtJS 中更好的调用父类方法

在 ExtJS 中,继承是一项关键的功能。当我们创建子类时,通常需要重写父类中的某些方法。这时候,我们可以使用 callParent() 方法来调用父类中的同名方法。但是,在某些情况下,这种方式可能会带来一些困惑和不必要的麻烦。

使用 callParent() 的问题

考虑以下代码:

------------------------------- -
    --------- ---------- -
        ------------------------------------
    -
---

------------------------------ -
    ------- --------------------

    --------- ---------- -
        -----------------------------------

        ------------------
    -
---

--- --- - -------------------------------
---------------

在这个例子中,我们定义了一个名为 ParentClass 的类,其中包含一个名为 myMethod() 的方法。然后我们定义了一个名为 ChildClass 的类,它继承了 ParentClass 并重写了 myMethod() 方法。在 ChildClass.myMethod() 中,我们调用了 callParent() 来调用 ParentClass.myMethod()。最后,我们通过创建 ChildClass 的实例并调用其 myMethod() 方法来测试代码。

运行以上代码,输出结果如下:

-------------------
--------------------

结果看起来正确,但如果我们继续对 ParentClass 进行扩展,如下所示:

------------------------------- -
    --------- ---------- -
        ------------------------------------
    --

    -------------- ---------- -
        -----------------------------------------
    -
---

现在再运行上述代码,输出结果仍然是:

-------------------
--------------------

这表明 callParent() 方法调用了父类的同名方法,而不是当前方法的直接上层方法。因此,在多层继承链中使用 callParent() 可能会导致一些问题。

使用 callSuper() 的解决方案

为了避免这种情况,我们可以使用 callSuper() 方法来调用当前方法的直接上层方法,而不是同名方法。修改上述 ChildClass 的代码如下:

------------------------------ -
    ------- --------------------

    --------- ---------- -
        -----------------------------------

        -----------------
    -
---

当我们运行以上代码时,输出结果将变成:

-------------------

这个结果符合我们的预期:myMethod() 方法只调用了它的直接上层方法。

另外需要注意的是,在多层继承链中,如果我们想要调用更高级别的父类方法,可以使用 this.callSuper('methodName') 的形式来指定方法的名称。

结论

在 ExtJS 中,使用 callParent() 方法在调用父类方法时可能会带来一些问题。为了避免这种情况,我们可以使用 callSuper() 方法来调用当前方法的直接上层方法,而不是同名方法。如果需要调用更高级别的父类方法,可以使用 this.callSuper('methodName') 的形式来指定方法的名称。

这篇文章提供了一种更好的方式来调用父类方法,并希望对 ExtJS 开发者有所帮助。下面是完整的示例代码:

------------------------------- -
    --------- ---------- -
        ------------------------------------
    --

    -------------- ---------- -
        -----------------------------------------
    -
---

------------------------------ -
    ------- --------------------

    --------- ---------- -
        -----------------------------------

- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------