学步园

本文最早发表于2008-06-07

首入眼帘，代码：

/**<br /> * Utility to set up the prototype, constructor and superclass properties to<br /> * support an inheritance strategy that can chain constructors and methods.<br /> * Static members will not be inherited.<br /> *<br /> * @method extend<br /> * @static<br /> * @param {Function} subc the object to modify<br /> * @param {Function} superc the object to inherit<br /> * @param {Object} overrides additional properties/methods to add to the<br /> * subclass prototype. These will override the<br /> * matching items obtained from the superclass<br /> * if present.<br /> */<br /> extend: function(subc, superc, overrides) {<br /> if (!superc||!subc) {<br /> throw new Error("extend failed, please check that " +<br /> "all dependencies are included.");<br /> }<br /> var F = function() {};<br /> F.prototype=superc.prototype;<br /> subc.prototype=new F();<br /> subc.prototype.constructor=subc;<br /> subc.superclass=superc.prototype;<br /> if (superc.prototype.constructor == Object.prototype.constructor) {<br /> superc.prototype.constructor=superc;<br /> }</p> <p> if (overrides) {<br /> for (var i in overrides) {<br /> if (L.hasOwnProperty(overrides, i)) {<br /> subc.prototype[i]=overrides[i];<br /> }<br /> }<br /> L._IEEnumFix(subc.prototype, overrides);<br /> }<br /> }

然后是YUI的儿子，ExtJS：

<br /> /**<br /> * 继承，并由传递的值决定是否覆盖原对象的属性<br /> * 返回的对象中也增加了override()函数，用于覆盖实例的成员<br /> * @param {Object} subclass 子类，用于继承（该类继承了父类所有属性，并最终返回该对象）<br /> * @param {Object} superclass 父类，被继承<br /> * @param {Object} overrides （该参数可选） 一个对象，将它本身携带的属性对子类进行覆盖<br /> * @method extend<br /> */<br /> extend : function(){<br /> // inline overrides<br /> var io = function(o){<br /> for(var m in o){<br /> this[m] = o[m];<br /> }<br /> };<br /> return function(sb, sp, overrides){<br /> if(typeof sp == 'object'){<br /> overrides = sp;<br /> sp = sb;<br /> sb = function(){sp.apply(this, arguments);};<br /> }<br /> var F = function(){}, sbp, spp = sp.prototype;<br /> F.prototype = spp;<br /> sbp = sb.prototype = new F();<br /> sbp.constructor=sb;<br /> sb.superclass=spp;<br /> if(spp.constructor == Object.prototype.constructor){<br /> spp.constructor=sp;<br /> }<br /> sb.override = function(o){<br /> Ext.override(sb, o);<br /> };<br /> sbp.override = io;<br /> Ext.override(sb, overrides);<br /> return sb;<br /> };<br /> }()

注：上一个是v2.0的；ExtJS v2.1改进了一点，见：

/**<br /> * Extends one class with another class and optionally overrides members with the passed literal. This class<br /> * also adds the function "override()" to the class that can be used to override<br /> * members on an instance.<br /> * * <p><br /> * This function also supports a 2-argument call in which the subclass's constructor is<br /> * not passed as an argument. In this form, the parameters are as follows:</p><p><br /> * <div class="mdetail-params"><ul><br /> * <li><code>superclass</code><br /> * <div class="sub-desc">The class being extended</div></li><br /> * <li><code>overrides</code><br /> * <div class="sub-desc">A literal with members which are copied into the subclass's<br /> * prototype, and are therefore shared among all instances of the new class.<p><br /> * This may contain a special member named <tt><b>constructor</b></tt>. This is used<br /> * to define the constructor of the new class, and is returned. If this property is<br /> * <i>not</i> specified, a constructor is generated and returned which just calls the<br /> * superclass's constructor passing on its parameters.</p></div></li><br /> * </ul></div></p><p><br /> * For example, to create a subclass of the Ext GridPanel:<br /> * <pre><code><br /> MyGridPanel = Ext.extend(Ext.grid.GridPanel, {<br /> constructor: function(config) {<br /> // Your preprocessing here<br /> MyGridPanel.superclass.constructor.apply(this, arguments);<br /> // Your postprocessing here<br /> },<br /> yourMethod: function() {<br /> // etc.<br /> }<br /> });<br /> </code></pre><br /> * </p><br /> * @param {Function} subclass The class inheriting the functionality<br /> * @param {Function} superclass The class being extended<br /> * @param {Object} overrides (optional) A literal with members which are copied into the subclass's<br /> * prototype, and are therefore shared between all instances of the new class.<br /> * @return {Function} The subclass constructor.<br /> * @method extend<br /> */<br /> extend : function(){<br /> // inline overrides<br /> var io = function(o){<br /> for(var m in o){<br /> this[m] = o[m];<br /> }<br /> };<br /> var oc = Object.prototype.constructor;</p> <p> return function(sb, sp, overrides){<br /> if(typeof sp == 'object'){<br /> overrides = sp;<br /> sp = sb;<br /> sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};<br /> }<br /> var F = function(){}, sbp, spp = sp.prototype;<br /> F.prototype = spp;<br /> sbp = sb.prototype = new F();<br /> sbp.constructor=sb;<br /> sb.superclass=spp;<br /> if(spp.constructor == oc){<br /> spp.constructor=sp;<br /> }<br /> sb.override = function(o){<br /> Ext.override(sb, o);<br /> };<br /> sbp.override = io;<br /> Ext.override(sb, overrides);<br /> sb.extend = function(o){Ext.extend(sb, o);};<br /> return sb;<br /> };<br /> }(),

其实啊，EXT好、YUI也好，它们那一套的继承都源自这个前辈Kevin Lindsey
：
要搞清楚这套继承来龙去脉，这Article就千万不能错过了：
http://kevlindev.com/tutorials/javascript/inheritance/index.htm

问世时间是：Saturday, April 13th, 2002 。

最后，看到一位仁兄的推荐
，来自John
Resig的方案
好像“集百家之所长”，见：

// Inspired by base2 and Prototype<br /> (function(){<br /> var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? //b_super/b/ : /.*/;<br /> // The base Class implementation (does nothing)<br /> this.Class = function(){};</p> <p> // Create a new Class that inherits from this class<br /> Class.extend = function(prop) {<br /> var _super = this.prototype;</p> <p> // Instantiate a base class (but only create the instance,<br /> // don't run the init constructor)<br /> initializing = true;<br /> var prototype = new this();<br /> initializing = false;</p> <p> // Copy the properties over onto the new prototype<br /> for (var name in prop) {<br /> // Check if we're overwriting an existing function<br /> prototype[name] = typeof prop[name] == "function" &&<br /> typeof _super[name] == "function" && fnTest.test(prop[name]) ?<br /> (function(name, fn){<br /> return function() {<br /> var tmp = this._super;</p> <p> // Add a new ._super() method that is the same method<br /> // but on the super-class<br /> this._super = _super[name];</p> <p> // The method only need to be bound temporarily, so we<br /> // remove it when we're done executing<br /> var ret = fn.apply(this, arguments);<br /> this._super = tmp;</p> <p> return ret;<br /> };<br /> })(name, prop[name]) :<br /> prop[name];<br /> }</p> <p> // The dummy class constructor<br /> function Class() {<br /> // All construction is actually done in the init method<br /> if ( !initializing && this.init )<br /> this.init.apply(this, arguments);<br /> }</p> <p> // Populate our constructed prototype object<br /> Class.prototype = prototype;</p> <p> // Enforce the constructor to be what we expect<br /> Class.constructor = Class;<br /> // And make this class extendable<br /> Class.extend = arguments.callee;</p> <p> return Class;<br /> };<br /> })();

还有其他基于类的继承方案，如Lazy Inheritance
、Dean Edwards的Base2，不是说不好，而是很好，好到太复杂了（Lazy
Inheritance的简介像论文似的—题外话），——个人认为过于复杂有点违背JS短小精悍的意思，什么东西过了谱就不行的啦 嘿嘿 所以第一眼就枪毙了。

总结一下..嗯 还没太多的心得，还是台湾
的一位朋友说得好：

無奈

　　感覺上又回到原始時代，或者說，回到比原始時代更久遠的上古時代，連建構基本的物件架構就有許多的不便，這樣複雜的結構實在有礙思考。想必在Scripting領域的OO或甚至Design
Patten又會發展成另一個Knowledge
Domain吧！過去在其他物件導向語言使用的Patten，硬是要套到這上面來不見得是一件明智的作法，畢竟Script的特性就是如此，與其他語言有一定程度的差別，但也正因為如此，不是Scripting是有缺陷的語言，而是在這個領域的設計及規劃方法，全世界都欠缺足夠的經驗，因此就不像使用
Java或C#那般，可以歡歡喜喜的導入前人歸納的各種設計模式。

注：本文的重点是类继承，如果采用JS原生的“原型”继承 则简单很多——请君勿鄙之，因为存在就是合理。Just take a look 原型继承 by Douglas
Crockford
，比标准方案Prototype = new XX(); Make Sense很多，仅是五六行代码。