Magento 2’s Base Javascript Class

Magento 2’s core javascript library ships with a basic implementation of a class based object system, and the uiComponent feature uses these classes and objects extensively. The base class is the Magento_Ui/js/lib/core/class module/object/function, and you create a new instance of the class using javascript build-in new keyword.

requirejs([
    'Magento_Ui/js/lib/core/class',
], function (Class) {
    'use strict';
    var o = new Class;
    console.log(o);
});    

You can create a child class using the base class’s extend function. You pass extend a list of key/function pairs to define methods. Magento’s objects have a constructor-like method named initialize is called when you instantiate an object. You can call a parent class’s method with this._super(). The _super method is only callable from inside a method – its not exposed publicly.

Here’s an example program that defines two new classes named A and B. A extends the base class, B extends A. After defining these classes, the program instantiates an object from the class B, and then calls that object’s hello method.

requirejs([
    'Magento_Ui/js/lib/core/class',
], function (Class) {
    'use strict';

    var A = Class.extend({
        initialize: function () {
            this._super();
            console.log("Called A's initialize/constructor");
            this.foo = "foo";
            this.bar = "bar";

        },

        hello: function(){
            console.log("Hello");    
        }
    });

    var B = A.extend({
        initialize: function () {
            this._super();
            console.log("Called B's initialize/constructor");
            this.bar = "BIG BAR";
            this.baz = "baz";
        },

        hello: function(){
            this._super();
            console.log("Hello Again");    
        }
    });

    var object = new B;
    object.hello();
    console.log(object);
});

Magento aliases Magento_Ui/js/lib/core/class to the shorter uiClass.

vendor/magento/module-ui/view/base/requirejs-config.js
15:            uiClass:        'Magento_Ui/js/lib/core/class',

so this is equally valid.

requirejs([
    'uiClass',
], function (Class) {
    'use strict';
    o = new Class;
});

Finally, Magento often uses a pattern when one RequireJS module will extend an object from another RequireJS module which extends an object from another RequireJS, etc. back to the Magento_Ui/js/lib/core/class object. You can see this in the source of the lib/core/collection (aliased uiComponent) and lib/core/element/element (aliased uiElement) RequireJS modules.

The implementation of the base class is beyond the scope of a quickie – but the method extending is done by UnderscoreJS, and the _super implementation comes from the Magento mage/utils/wrapper RequireJS wrapper module at

lib/web/mage/utils/wrapper.js