Javascript继承 - this.element在子类中是未定义的

Question

我正在尝试建立一个扩展子类的父类，但是当我从超类调用子类时尝试引用this.element时，它是未定义的。 我在这做错了什么？

$.widget("ui.testSuper", $.extend({}, $.ui.testSub.prototype, 
{
    _init: function ()
    {
        $.ui.testSub.prototype._init();
    },
...
}));

$.widget("ui.testSub", $.ui.mouse,
{
    _init: function ()
    {
        this.element.addClass("some-class");
    },
...
});

$('#some-element').testSub({ }); // this works fine

$('#some-element').testSuper({ }); // this.element is undefined

Answer 1

扩展$.ui.testSub它不存在。 您需要做的就是交换这两个代码块：

//Should be first
$.widget("ui.testSub", $.ui.mouse,
{
    _init: function ()
    {
        this.element.addClass("some-class");
    },
...
});

$.widget("ui.testSuper", $.extend({}, $.ui.testSub.prototype, 
{
    _init: function ()
    {
        $.ui.testSub.prototype._init();
    },
...
}));

$('#some-element').testSub({ }); // this works fine

$('#some-element').testSuper({ }); // then it will work fine as well

在这里查看实例

UPDATE

我得到你所说的。 你需要像这样调用基本方法

$.ui.testSub.prototype._init.call(this);

所以你不会失去元素的上下文。 示例在这里

Answer 2

我不确定是否使用$ .extend是这样的方式。

以下是我通常扩展jQuery UI小部件的方法：

$.widget('ui.testSuper', $.ui.testSub {
    _create: function() {
        $.ui.testSub.prototype._create.call(this);
    }
});

我看到你正在使用_init，所以必须使用旧版本的jQuery UI。