Ext_Extend详解.docVIP

Ext.extend用法以及代码解读 概述 Ext.extend是Ext的继承机制，这个函数的代码相当难懂。要明白这个函数的代码，首先要知道这个函数如何使用。 使用方式 使用示例 假设有个function名为SuperClass，要实现一个子类，名为MyClass。下面的两种方式都可以实现这个功能。 MyClass = Ext.extend(SuperClass, { /* */ }); Ext.extend(MyClass, SuperClass, { /* */}); ? 下面来个具体示例： var a = function(id){ this.id = id; } a.prototype = { tostring : function(){ return this.id; } }; b = function(id){ b.superclass.constructor.call(this, id); } Ext.extend(b, a, { tostring : function(){ return String.format(b:{0}, this.id); } }); //测试一下 var obj1 = new a(obj1); alert(obj1.tostring()); var obj2 = new b(obj2); alert(obj2.tostring()); 或者下面的代码，可以得到同样的效果： var a = function(id){ this.id = id; } a.prototype = { tostring : function(){ return this.id; } }; ? b = Ext.extend(a, { tostring : function(){ return String.format(b:{0}, this.id); } }); //测试一下 var obj1 = new a(obj1); alert(obj1.tostring()); var obj2 = new b(obj2); alert(obj2.tostring()); ? 一个错误例子 下面看个示例： BaseClass = function() { this.f1 = function() { alert(f1 in base); } ? this.f2 = function() { alert(f2 in base); } } ? ChildClass = function() { ChildClass.superclass.constructor.call(this); } ? Ext.extend(ChildClass, BaseClass, { f1: function() { alert(f1 in child); }, ? f3: function() { alert(f3 in child); } }); ? var b = new ChildClass(); b.f1(); b.f2(); b.f3(); ?.可以去执行一下，可以发现f1的执行结果仍然是f1 in base。并没有真正的达到override的效果。 ? Ext.extend puts the properties specified in the 3rd argument into the subclasss prototype ? 也就是说：第三个参数里面的函数被放置在了子类的prototype中。 而在ChildClass.superclass.constructor.call(this);这句上，BaseClass的f1成了ChildClass的变量，而不是ChildClass.prototype。通过对JavaScript的原型继承的了解，可以知道，实例变量的优先级是高于prototype的，所以上面的这个代码是达不到override的功能的。 ? 修改的方式如下： BaseClass = function() { }; ? BaseClass.prototype = { f1: function() { alert(f1 in base); } }; ? 代码解读 JavaScript中的继承实现 先了解一下最简单的继承是如何实现的： function Extend(subFn, superFn){