[Javascript] Graphic + annotated Ext. extend ()

Ext. extend () demonstrates the extraordinary ability of programmers to make wheels. Based on the old object model of javascript, it simulates the semantics of the type inheritance of modern object-oriented language to the maximum extent. However, there are too many "similar to XXX" in the program field, but there are actually many differences. To fully and accurately understand Ext. extend (), the most direct (and often most effective) method is to read its source code. For better readability, I changed some variable names and added detailed annotations.

1/*** <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 po Stprocessing 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. </d Iv> </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 c Onstructor 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 in 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> n Ot </I> specified, a constructor is generated and returned which just cballs 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; // If the constructor of an object is = oc, it indicates that it is a literal object created using a syntax similar to {age: 22, 58 // and no value is assigned to the constructor attribute 59 60 return function (subClass, superClass, overrides) {61 if (typeof superClass = 'object ') {62 // If superClass is an object rather than a constructor, it means 63 // var C is used. At = Ext. extend (Animal, {64 // say: function () {65 // document. writeln ("I'm a cat name" + this. name); 66 //} 67 //}); 68 // this method is called. That is to say, the return value is subClass, The subClass parameter is actually superClass, The superClass parameter is actually overrides, And the overrides parameter should be ignored 69 overrides = superClass; // The overrides parameter 70 superClass = subClass; // The subClass parameter is actually a superClass 71 // The subClass parameter will be used as a future return value. 72 // If the overrides object does not have a custom constructor, define one for it and call the parent constructor. 73 // If the overrides object contains a custom constructor, assign the constructor of overrides to subClass 74 subClass = overrides. constructor! = Oc? Overrides. constructor: function () {75 superClass. apply (this, arguments); // call the parent class Constructor (the premise is that the sub-class constructor has fewer parameters than the parent class, but the order must be consistent) 76 }; 77} 78 79 // original type inheritance. Instead of making subClass. prototype = new SuperClass, 80 // It is used to change the prototype of the subclass and will not affect prototype 81 var F = function () {}, 82 subPrototype, // Prototype 83 superPrototype = superClass of the subclass constructor. prototype; // Prototype 84 85 F of the parent class constructor. prototype = superPrototype; 86 subPrototype = subClass. prototype = new F (); 87 subPrototype. constructor = subClass; 88 // It is not written as subClass only. superclass = superClass, In order to over 89 in the constructor method of the rides object // you can use "MyGridPanel. superclass. constructor. call (this, config) "is written to call the parent class Constructor (90 in read. 91 subClass. superclass = superPrototype; 92 // If superclass. prototype is a literal object, ensure that superclass. prototype. Constructor points to superClass 93 if (superPrototype. constructor = oc) {94 superPrototype. constructor = superClass; 95} 96 // adds an override () method to the subclass. Call subClass. override (o) is equivalent to calling Ext. override (subClass, o) 97 subClass. override = function (o) {98 Ext. override (subClass, o); 99}; 100 // Add an instance method named superclass, in this way, 101 // In the constructor method of the overrides object can be used, such as "this. superclass (). constructor. call (this, config) "to call the parent class 102 // constructor, and it does not depend on the name of the subclass constructor. 103 subPrototype. superclass = subPrototype. supr = (function () {104 return superPrototype; 105}); 106 // Add an instance method for the subclass: override () 107 subPrototype. override = io; 108 // rewrite the methods in the overrides object to subClass. in prototype, 109 Ext. override (subClass, overrides); 110 // Add an extend () method to the subClass. Call subClass. extend (o); equivalent to calling Ext. extend (subClass, o); 111 subClass. extend = function (o) {return Ext. extend (subClass, o) ;}; 112 return subClass; 113 }; 114 }();

The following figure shows the effect after var SubClass = Ext. extend (SuperClass, {someprop: 'some'}) is executed.