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

请参阅此处

更新的 实时示例

我明白你在说什么。您需要像这样调用基本方法

$.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。