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

查看实时示例here

<强>更新

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

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

所以你不会失去元素的上下文。示例是here

Answer 2

我不确定使用$ .extend是否可以使用此处。

以下是我通常如何扩展jQuery UI小部件：

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

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

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

2 个答案: