[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 /**
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 callthe
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 indicates that
63 // var Cat = 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 www.2cto.com
69 overrides = superClass; // ignore the overrides Parameter
70 superClass = subClass; // The subClass parameter is actually a superClass
71 // The subClass parameter will be used as the returned value in the future.
72 // If the overrides object does not have a custom constructor, define a constructor for it and call the parent class constructor;
73 // If the overrides object contains a custom constructor, assign the constructor of overrides to the subclass.
74 subClass = overrides. constructor! = Oc? Overrides. constructor: function (){
75 superClass. apply (this, arguments); // call the parent class Constructor (provided that the sub-class constructor has fewer parameters than the parent class, but the sequence must be consistent)
76 };
77}
78
79 // original type inheritance. Instead of making subClass. prototype = new SuperClass,
80 // the prototype of the parent class is not affected when the prototype of the Child class is changed.
81 var F = function (){},
82 subPrototype, // Prototype of the subclass Constructor
83 superPrototype = superClass. prototype; // Prototype of the parent class Constructor
84
85 F. prototype = superPrototype;
86 subPrototype = subClass. prototype = new F ();
87 subPrototype. constructor = subClass;
88 // It is not written as subClass. superclass = superClass. It is used in the constructor method of the overrides object.
89 // you can use (read and compare) such as "MyGridPanel. superclass. constructor. call (this, config )"
90 // natural) method to call the parent class constructor.
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 // Add an override () method to the subclass. Calling 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 (), so that in the constructor method of the overrides object
101 // you can use "this. superclass (). constructor. call (this, config)" to call the parent class.
102 // constructor, which 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 // re-write the methods in the overrides object to subClass. prototype
109 Ext. override (subClass, overrides );
110 // Add an extend () method to the subclass. Call subClass. extend (o); equivalent to call 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.

 
 

Author Jing chunlei