Correct way to call a JQuery UI widget super function?

Question

In JQuery UI, what is the correct syntax to call a super/base function? In my example below should I be calling the base function using this._super(param1) or this._super('myFunction', param1)?

$.widget( "namespace.Foo", {
    _create: function () {
        // ...
        this._super( "_create" );
    },

    myFunction: function(param1) {
        // ...
    }
});


$.widget( "namespace.Bar", $.namespace.Foo, {
    _create: function () {
        // ...
        this._super( "_create" );
    },

    myFunction: function(param1) {
        // Is this correct?
        this._super('myFunction', param1);
        // or this?
        this._super(param1);

        // ...
    }
});

Answer 1

This is discussed here: https://api.jqueryui.com/jQuery.widget/#method-_super

Invokes the method of the same name from the parent widget, with any specified arguments. Essentially .call().

args Zero to many arguments to pass to the parent widget's method.

_setOption: function( key, value ) {
  if ( key === "title" ) {
    this.element.find( "h3" ).text( value );
  }
  this._super( key, value );
}

So it's already invoking _create in your first example, so you're now sending "_create" as an argument to this._create() and doesn't really do anything.

Digging deeper, we see: https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

_super() and _superApply() invoke methods of the same name in the parent widget. Refer to the following example. Like the previous one, this example also overrides the open() method to log "open". However, this time _super() is run to invoke dialog's open() and open the dialog.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

Your first widget is not mutating, so not sure that you need to call _super(). In your mutation, you do not need to send an argument to _create(). You can for the the other.

$.widget( "namespace.Bar", $.namespace.Foo, {
    _create: function () {
        this._super();
    },
    myFunction: function(param1) {
        this._super(param1);
    }
});