Ext.extend() 體現(xiàn)了程序員非凡的制造輪子的能力。它基于 javascript 古老的對(duì)象模型，最大程度地模擬出現(xiàn)代面向?qū)ο笳Z言的類型繼承的語意。但是在程序界有太多的“與XXX很像”，但是實(shí)際上又有很多差別。要想最徹底、最精確地理解 Ext.extend()，最直接（往往也是最有效）的方法就是去讀它的源代碼。為了達(dá)到更好的可讀性，我更改了部分變量名稱，加上了詳細(xì)的注釋。

1 /** 2 * <p>Extends one class to create a subclass and optionally overrides members with the passed literal. This method 3 * also adds the function "override()" to the subclass that can be used to override members of the class.</p> 4 * For example, to create a subclass of Ext GridPanel: 5 * <pre><code> 6 MyGridPanel = Ext.extend(Ext.grid.GridPanel, { 7 constructor: function(config) { 8 9 // Create configuration for this Grid. 10 var store = new Ext.data.Store({...}); 11 var colModel = new Ext.grid.ColumnModel({...}); 12 13 // Create a new config object containing our computed properties 14 // *plus* whatever was in the config parameter. 15 config = Ext.apply({ 16 store: store, 17 colModel: colModel 18 }, config); 19 20 MyGridPanel.superclass.constructor.call(this, config); 21 22 // Your postprocessing here 23 }, 24 25 yourMethod: function() { 26 // etc. 27 } 28 }); 29 </code></pre> 30 * 31 * <p>This function also supports a 3-argument call in which the subclass's constructor is 32 * passed as an argument. In this form, the parameters are as follows:</p> 33 * <div class="mdetail-params"><ul> 34 * <li><code>subclass</code> : Function <div class="sub-desc">The subclass constructor.</div></li> 35 * <li><code>superclass</code> : Function <div class="sub-desc">The constructor of class being extended</div></li> 36 * <li><code>overrides</code> : Object <div class="sub-desc">A literal with members which are copied into the subclass's 37 * prototype, and are therefore shared among all instances of the new class.</div></li> 38 * </ul></div> 39 * 40 * @param {Function} superclass The constructor of class being extended. 41 * @param {Object} overrides <p>A literal with members which are copied into the subclass's 42 * prototype, and are therefore shared between all instances of the new class.</p> 43 * <p>This may contain a special member named <tt><b>constructor</b></tt>. This is used 44 * to define the constructor of the new class, and is returned. If this property is 45 * <i>not</i> specified, a constructor is generated and returned which just calls the 46 * superclass's constructor passing on its parameters.</p> 47 * <p><b>It is essential that you call the superclass constructor in any provided constructor. See example code.</b></p> 48 * @return {Function} The subclass constructor from the <code>overrides</code> parameter, or a generated one if not provided. 49 */ 50 Ext.extend = function(){ 51 // inline overrides 52 var io = function(o){ 53 for(var m in o){ 54 this[m] = o[m]; 55 } 56 }; 57 var oc = Object.prototype.constructor; // 如果一個(gè)對(duì)象的 constructor == oc，說明它是使用類似 { age:22 } 這種語法創(chuàng)建的字面量對(duì)象， 58 // 而且沒有對(duì)constructor屬性賦值 59 60 return function(subClass, superClass, overrides){ 61 if(typeof superClass == 'object'){ 62 // 如果 superClass 是對(duì)象而不是構(gòu)造函數(shù)，就說明是使用的是 63 // var Cat = Ext.extend(Animal, { 64 // say : function() { 65 // document.writeln("I'm a cat name " + this.name); 66 // } 67 // }); 68 // 這種方式調(diào)用的。也就是說返回值是subClass, subClass 參數(shù)其實(shí)是 superClass，superClass參數(shù)其實(shí)是overrides，overrides參數(shù)應(yīng)該被忽略 69 overrides = superClass; // 忽略 overrides 參數(shù) 70 superClass = subClass; // subClass 參數(shù)其實(shí)是 superClass 71 // subClass 參數(shù)將作為將來的返回值。 72 // 如果 overrides 對(duì)象沒有自定義構(gòu)造函數(shù)，為其定義一個(gè)，并且里面調(diào)用父類構(gòu)造函數(shù)； 73 // 如果 overrides 對(duì)象含有自定義構(gòu)造函數(shù)，把overrides的構(gòu)造函數(shù)賦給子類 74 subClass = overrides.constructor != oc ? overrides.constructor : function(){ 75 superClass.apply(this, arguments); // 調(diào)用父類構(gòu)造函數(shù)（前提是子類構(gòu)造函數(shù)的參數(shù)可以比父類少，但是順序要一致） 76 }; 77 } 78 79 // 原型式繼承。之所以創(chuàng)建一個(gè)臨時(shí)構(gòu)造函數(shù)F，而不是令 subClass.prototype = new SuperClass， 80 // 是為了更改子類的prototype的時(shí)候不會(huì)影響到父類的prototype 81 var F = function(){}, 82 subPrototype, // 子類構(gòu)造函數(shù)的 Prototype 83 superPrototype = superClass.prototype; // 父類構(gòu)造函數(shù)的 Prototype 84 85 F.prototype = superPrototype; 86 subPrototype = subClass.prototype = new F(); 87 subPrototype.constructor=subClass; 88 // 只所以沒寫成 subClass.superclass=superClass，是為了在overrides對(duì)象的constructor方法里 89 // 可以使用諸如 “MyGridPanel.superclass.constructor.call(this, config)”這種（讀起來比較 90 // 自然的）寫法調(diào)用父類構(gòu)造函數(shù)。 91 subClass.superclass=superPrototype; 92 // 如果 superclass.prototype 是字面量對(duì)象，確保 superclass.prototype。constructor 指向 superClass 93 if(superPrototype.constructor == oc){ 94 superPrototype.constructor=superClass; 95 } 96 // 為子類增加一個(gè)override()方法。調(diào)用　subClass.override(o) 等價(jià)于調(diào)用 Ext.override(subClass, o) 97 subClass.override = function(o){ 98 Ext.override(subClass, o); 99 }; 100 // 增加一個(gè)名為 superclass() 的實(shí)例方法，這樣在overrides對(duì)象的constructor方法里 101 // 就可以使用諸如 “this.superclass().constructor.call(this, config)”來調(diào)用父類 102 // 構(gòu)造函數(shù)，而且沒有依賴子類構(gòu)造函數(shù)的名稱。 103 subPrototype.superclass = subPrototype.supr = (function(){ 104 return superPrototype; 105 }); 106 // 為子類增加一個(gè)實(shí)例方法: override() 107 subPrototype.override = io; 108 // 將 overrides 對(duì)象里的方法復(fù)寫到 subClass.prototype 中 109 Ext.override(subClass, overrides); 110 // 為子類增加一個(gè)extend()方法。調(diào)用　subClass.extend(o); 等價(jià)于調(diào)用 Ext.extend(subClass, o); 111 subClass.extend = function(o){return Ext.extend(subClass, o);}; 112 return subClass; 113 }; 114 }();

下面這張對(duì)象圖則是執(zhí)行了 var SubClass = Ext.extend(SuperClass, { someprop : 'some' }) 之后的效果。

總結(jié)

以上是生活随笔為你收集整理的[javascript]图解+注释版 Ext.extend()的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。