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?
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.
(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.
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.
(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();
a. within jQuery.sap.newObject, a dummy object will be created:
b. here the argument oPrototype is the prototype of sap.ca.scfld.md.ComponentBase:
Once prototype chain is built, the function call jQuery.sap.setObject is called to expose cus.crm.opportunity.Component as a global JavaScript object:
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.
(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:
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.
from returned metadata, we can find all the metadata information defined in the application and passed from extend call:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关推荐
jquery.validate.extend.js
Jquery实现$.fn.extend和$.extend函数_.docx
原生js实现jquery $.extend方法 通过遍历对象属性来实现
implementation 'com.guo.android_extend:android-extend:1.0.6'失败,用这个替代就好了 implementation 'com.guo.android_extend:android-extend:1.0.6'失败,用这个替代就好了
implementation 'com.guo.android_extend:android-extend:1.0.6'失败,用这个替代就好了
前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数。 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的节点对象扩展方法,是基于$的原型扩展的方法...
jquery $.fn.extend 引用事件
com.guo.android_extend jar包,直接复制到libs文件夹下使用
虹软ArcSoft 人脸识别AndroidDemo中有一个Lib通过公网始终无法下载,替换进去就好了。 依赖替换为 implementation files('libs/android-extend-1.0.5.aar')。 依赖库com.guo.android_extend
一个基于Knex.js的Node.js ORM框架,支持PostgreSQL,MySQL和SQLite3 简单来说,Bookself是一个优秀的代码库,它易于阅读、理解、可扩展。它不强制你使用任何特定的校验scheme,而是提供灵活有效的关系或嵌套关系...
jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({ add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加...
Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of ...
各种控件组件展示。 支持API10+ 水平滑动listView。 异步加载图片。 双指缩放,拖动。 项目链接:https://github.com/gqjjqg/android-widget-extend
NULL 博文链接:https://bijian1013.iteye.com/blog/2255035
Extend your applications using the Xamarin.Forms Labs library In Detail Xamarin is an IDE used for the development of native iOS, Android, and Windows, and cross-platform mobile applications in C#. ...
jQuery:jQuery.extend函数详解
jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。