Наследование Javascript - этот элемент не определен в подклассе

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.