Блог

Я пытаюсь настроить родительский класс, который расширяет подкласс, но всякий раз, когда я пытаюсь ссылаться на 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
  

Когда вы расширяете $.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
  

Смотрите живой пример здесь

Обновить

Я понял, что ты говоришь. Вам нужно вызвать базовый метод следующим образом

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

Таким образом, вы не потеряете контекст своего элемента. Пример здесь

Я не уверен, что использование $.extend — это правильный путь.

Вот как я обычно расширяю виджеты пользовательского интерфейса jQuery:

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

Я вижу, что вы используете _init, поэтому, должно быть, используете более старую версию пользовательского интерфейса jQuery.