Prototype & Extend in SAPUI5 (Component.js)

Question

I was trying to implement Component.js in my SAPUI5 application but unable to understand .extend & .prototype.init.apply method in below piece of code.

sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
    "use strict";
    return UIComponent.extend(""** , {**
        init: function () {
            UIComponent.prototype.init.apply(this, arguments);
            // console.log(UIComponent.extend);
            UIComponent.prototype.init.apply(this, arguments);
        }
    });
});

Can someone please explain?

PS I am beginner to OO Javascript.

Answer 1

What they're doing here is very Java-ish. With extend they're creating a subclass of UIComponent .

In this subclass the init method is overridden. When you override a method of the parent object, it's a good practice to call the parents original method from the method that overrides it. By doing so, you're avoiding unexpected situations such as variables that have not been defined at the parent etc. Calling the parent's original method is exactly what the init.apply statement is doing. It's doesn't make sense to me to do this twice though.

Answer 2

To give you some hints:

1. extend comes from from sap.ui.base.Object which delegates to sap.ui.base.ManagedObject.createClass() . Thanks to @schnoedel to point it out.

2. prototype.init.apply and arguments object.