For every Fiori application we have Component.js, and there is a function extend() call. See one example below.
What is the purpose of this function call and what functionality would it achieve?
![clipboard1.png]()
In order to understand the logic of extend, it is necessary to understand prototype concept in JavaScript. Let's have a look at some more simple example.
See this simple html source code:
<html><script>
function Animal(name) {
this.sName = name;
console.log("constructor in Animal");
}
Animal.prototype.speak = function() { console.log("My name is " + this.sName);
};
function Cat(name) { Animal.call(this, name); console.log("constructor in cat");
}
Cat.prototype = new Animal();
var animal = new Animal("Jerry");
animal.speak();
var cat = new Cat('Tom');
cat.speak();
console.log("cat is animal?" + ( cat instanceof Animal ));
console.log("cat is Cat?" + ( cat instanceof Cat ));
console.log(cat.constructor);</script></html>I use prototype inheritance to achieve the class inheritance logic which is commonly used in other language like Java.
cat instanceof Animal and cat instanceof Cat both return true as expected.
There are two flaws of this inheritance solution:
1. every variable created by function constructor has one attribute __proto__, which points to the prototype object of its constructor. This could be verified by the fact that statement "cat.__proto__ === Cat.prototype " returns true.
In this example, you can find there are actually duplicate attribute sName, one in cat itself and the other one in its __prototype__.
![clipboard2.png]()
2. in above code line 17, I try to build the inheritance relationship from Animal to Cat. Here a new instance of Animal is created. Suppose in productive code if we have a complex implementation of Animal, this initialization could consume unnecessary resource and memory to finish.
So another approach is used:
<html><script>
Function.prototype.extend = function(parent) {
function dummy() {};
dummy.prototype = parent.prototype;
this.prototype = new dummy();
this.prototype.constructor = this;
}
function Animal(name) {
this.sName = name;
console.log("constructor in Animal");
}
Animal.prototype.speak = function() { console.log("My name is " + this.sName);
};
function Cat(name) {
Animal.call(this, name);
};
Cat.extend(Animal);
var cat = new Cat("Jerry");
cat.speak();
console.log("cat is Cat?" + (cat instanceof Cat));
console.log("cat is Animal?" + (cat instanceof Animal));
console.log(cat.constructor);</script></html>Both flaws in first approach are avoided:
1. No duplicate attribute "sName" in prototype chain now.
2. The initialization of a new instance of Animal when trying to build prototype chain is avoided. Instead here I use a very light weighted, dummy function as a bridge to connect Animal and Cat. The trick is done among lines 5 ~ 8 below. Once done, every variable created by constructor Cat has its __proto__ points to Animal.
![clipboard3.png]()
Now we have already enough knowledge to understand the extend() call done in Componnet.js in Fiori application.
1. extend call will call Metadata.createClass.
![clipboard4.png]()
2. In Metadata.createClass, the essential idea of line 333 is just exactly the same as the code in my second prototype inheritance approach:
function dummy() {};
dummy.prototype = parent.prototype;
this.prototype = new dummy();
![clipboard5.png]()
a. within jQuery.sap.newObject, a dummy object will be created:
![clipboard6.png]()
b. here the argument oPrototype is the prototype of sap.ca.scfld.md.ComponentBase:
![clipboard7.png]()
Once prototype chain is built, the function call jQuery.sap.setObject is called to expose cus.crm.opportunity.Component as a global JavaScript object:
![clipboard8.png]()
Finally these below are what we have got:
1. we can directly access cus.crm.opportunity.Component in JavaScript code or console thanks to jQuery.sap.setObject call.
![clipboard9.png]()
2. The prototype chain from sap.ca.scfld.md.ComponentBase to cus.crm.opportunity.Component is built, which could be confirmed by the picture below:
![clipboard10.png]()
Now when I enter the context of my application, I can get the instance of this component via this(controller reference).getOwnerComponent().
From the belowing two test statement in console, I can ensure that the prototype chain is built:
1. ownComponent.__proto__.__proto__.constructor === sap.ca.scfld.md.ComponentBase returns true
2. ownComponent.hasOwnProperty("getMetadata") returns false and ownComponent.__proto__.__proto__.hasOwnProperty("getMetadata") returns true.
![clipboard11.png]()
![clipboard12.png]()
from returned metadata, we can find all the metadata information defined in the application and passed from extend call:
![clipboard13.png]()
