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。