How to extend jQuery widget in magento 2

How to extend jQuery widget in magento 2: In this blog we will see how we can extend magento jQuery widget. We can extend jQuery widgets by using mixins.

In java script mixin is a class whose methods are added to, or mixed in, with another class.

In order to extend jQuery widget first we need to declare a mixin in requirejs-config.js file like below.

var config = {
    config: {
        mixins: {
            'Vendor_ParentModule/js/super': {
                'Vendor_ChildModule/js/child': true
            }
        }
    }
};

Now for example parent widget(Vendor_ParentModule/js/super) is like below

define([
    "jquery",
], function ($) {
    "use strict";
    $.widget("mage.customWidget", {
        _create: function() {
            this.foo();
        },
        foo: function() {
            console.log("super class");
        }
    });
    return $.mage.customWidget;
});

Then in child widget(Vendor_ChildModule/js/child) we can override it’s method like below

define([
    'jquery'
], function ($) {
    'use strict';
    var widgetMixin = {
        foo: function() {
            console.log("do your stuff...");

            return this._super(); // parent method will be called by _super()
        }
    };
    return function (parentWidget) {
        $.widget('mage.customWidget', parentWidget, widgetMixin);
        return $.mage.customWidget;
    };
});

In this way we can override all the methods of jQuery widget in Magento 2. If you have any query then comment below.