"ExtJS 3 details and practice" reading supplementary Materials: Ext.extend () using the Super keyword

Since a language has been streamlined, whether idea or intuitive grammar, are to streamline the words, then this is invisible is a trend, the trend is often not for people to transfer to their habits, the habit of thinking qualitative, even the key word function is too long, there is a need for reduction. Of course it's just a joke.

Like Lisp, the sky Dot, colon is disaster. People who have used the Ext inheritance are aware that ext.subclass.superclass.methodname.call/apply (this) is the time to invoke the parent class member. A whole string of long, the benefit is also obvious, at least this kind of complete naming a son did not leak, for fear I do not know. Beginner's friends tend to 1510 of things especially favor,-I am so hehe, but with a long time, can have these two points insufficient: after the reconstruction, the name follows changes, the change class name, the change method name, a son's tired; a bunch of, not like the modern language

The last reason I also feel a little far-fetched, when the dine it is purely personal sense of view (stone, tomato exemption, and declined to cross the village hunt). Anyway, I changed super can run to say so, always give yourself some reason or "motive" bar.

Good gossip less said, in fact, this technology relies on JS what can be reflected, what are objects under the principle of development, and the network has a corresponding solution, I just folk songs to decorate. I have also modified several times, the purpose of ext.extend () is to make the inheritance between two: SB is a subclass of SP, let SB have SP function. How do you do this without using lengthy statements to do Java-like super keyword functionality? I modify the Extend () drop code shortcoming as follows:

(Because of the key code, so the comment is not easy to idle, as far as possible every sentence is commented)

/** * Let two between the inheritance relationship: SB is a subclass of SP, let SB have the SP functional function base () {} Base.prototype = {foo:function (d) {Response.Write (d)}} * Func tion Sub () {This._super ();} sub = Object.extend (base, {foo:function () {Response.Write () This._super ()}}) new sub () . foo (); * @param SB Child class * @param SP Parent class * @param overrides new member/Object.extend = (function () {var oc = Object.prototype.constructor, Testsuperreg =//b_super/b//** * @private * @param {Function} subclass subclass, which is processed from above extend. * @param {Object} Overrides overridden member (method, property) * @param {Function} superclass parent class. But you can also access from Origclass.superclass, because origclass.superclass = = = Superclass//true/, override = function (subclass, Overrides, superclass) {/** * built-in function, which is a "shell" factory for subclass functions. * When a subclass is inherited, if there is an overloaded method, the method overwrites the function returned by the following return. This process we have here temporarily called "Shell". * This method returns the value of the function type. * @param {String} name method @param {Function} fn subclass method, that is, the overridden method * @return The newly generated function {function} "packers", in other words, * can be return new Function (arg,arg_1,..., functionbody); */function Superfnfactory (name, FN) {return function () {// In fact this is a simple switching algorithm var temp = This._super; Add a new. _super () method, the same method//But on the super-class this._super = Superclass.prototype[name]; The parent prototype//The method is need to is bound temporarily, so we/remove it when we do executing//remove VAR ret after completion Fn.apply (this, arguments); This._super = temp; return ret; Ensure that the return value after FN execution is passed}; The var p = subclass.prototype//P is a subclass, the type is object, Newmemberobj//Newmember is a new member to be added to the subclass, MEMBERNAMESTR//Newmember name, that is, K EY, Ismethodbol//first type judgment, whether it is the type of function, can then detect whether there are this_super words, hassuperbol//have the words containing super. The type is a Boolean value (Boolean). , ISOVERWRITEDFN; A method that detects whether a subclass or parent class has the same name. The type is a Boolean value (Boolean). if (!overrides) return; For (Membernamestr in overrides) {newmemberobj = Overrides[membernamestr]//To determine whether the KeyValue value is a funcion type. The member that is not a method is ignored. The concept of overloading, overriding exists only in methods (functions). , Ismethodbol = (typeof (newmemberobj) = = "function" && typeof (P[membernamestr]) = = "function")//Hassuper is true when table This method (the content of the Newmemberobj value) is a keyword that contains a "_super". That means Newmemberobj is an overloaded, rewritten method that needs to pass through the SUPERFNFActory further processing. , Hassuperbol = Testsuperreg.test (newmemberobj), ISOVERWRITEDFN = Ismethodbol && hassuperbol; Assign a new member to a subclass and implement "inheritance" from it, and assign it directly to a subclass if there is no overload. P[MEMBERNAMESTR] = ISOVERWRITEDFN? Superfnfactory (Membernamestr, newmemberobj): newmemberobj; //Patch:ie 6 cannot be used for ... In.. Find out constructor members. Constructor, toString, valueof in IE these are hidden members if (overrides.constructor) {p.constructor = Superfnfactory (' constructor '), Overrides.constructor); Complement constructor to _super member P._super = superClass.prototype.constructor; } return function (subclass, superclass, overrides) {if (Overrides = = True) {Subclass.prototype = superclass; return SUBC Lass //Brush up: The equal sign in the role of JS//General build reference, will not be a new value, so that is by address//When the type changes, have to create a new area to save the type of change, at this time the new area of course with the old var isonlytwoarguments = typeof S Uperclass = = ' object '; if (isonlytwoarguments) {overrides = superclass; superclass = subclass;}//OK, so far, the parent class has been identified, the "SP"; the new member is "overrides". Isnosubclassconstructor says that when a new subclass is created, the subclass is not provided with a constructor. No constructors, so we need to find a way to set up a. is actually very simple, do not think, is to use the constructor of the parent class。 It is worth mentioning that although the writing is different, but to judge whether there is no subclass constructor and isonlytwoarguments principle is the same ...//for the description of the clear, here use one more reference variable//but also for a situation, is not directly using the parent class constructor, Instead, the new constructor is rewritten, appearing in Overrides, var isnoconstructor = isonlytwoarguments; if (isonlytwoarguments) {subclass = Overrides.constructor!= oc overrides.constructor//NOTE: cannot directly SB = SP ... Because the equals sign is here by address, it affects the SP parent class. Use an SP function in disguise using the following methods: function (A, B, C, D) {This._super (A, B, C, d);}; The function Fn () {} fn.prototype = Superclass.prototype; Subclass.prototype = new Fn (); Sb.superclass = Sp.prototype; For-compatible legacy//The constructor that affects the original parent class, causing the constructor to be lost, must be fixed, and the constructor if (superClass.prototype.constructor = = oc) of the SP as the parent class should be mended. SuperClass.prototype.constructor = superclass; //Copy all members. Override (subclass, overrides, superclass); return subclass; } })();

Prototype.js Users please note that. Because Prototype.js has a method that is also Object.extend (), it conflicts with this method.

Users are advised not to use first, it is best to understand the above code after the idea to do, after all, also wrote a lot of comments is it ~ hehe

There is a small hint, I here extend "outermost" wrote a function () (), in the beginning of override () is actually the last code, the first time to pay attention to the order, override for the last call.

JavaScript does not have the Java Super keyword to access the parent class member method, here for you to introduce a simulation method, reference to the jquery author's "Shell" scheme (http://ejohn.org/blog/ simple-javascript-inheritance/), combined into the Ext.extend method. Attached to the test source code as follows (JS ASP, so there are Response.Write, if the page Change alert () can)

function base () {} Base.prototype = {foo:function (d) {Response.Write (d)}} * Function sub () {This._super ();} sub = OBJ Ect.extend (base, {foo:function () {Response.Write () This._super (),}}) New sub (). Foo ();

Above in the IE 6/ff3.0/serverside ASP IIS5 through.

In this way, no matter how long the structure, as long as This._super () appears a point number can call the parent class members ...

The principle is that I am based on the information collected from several sources, has been in my chat project to play a role oh bug certainly has, is not the gourd in charge, this I to spend some time to say, now give you the reader to send a little rest assured sugar: listen to me, with this modified version of nothing, must be able to run.

As for where the information, but also from my old blog "JavaScript" class "Inheritance of horizontal comparison", interested friends can all the way,

In addition, the article retains a user's opinion of scripting:

Nai
It goes back to the primitive times, or to the ancient times, which are much longer than the original time, there are so many inconveniences in the construction of the basic structure of the object that the complex structure is thinking. Presumably Oo or even design patten in scripting will develop another knowledge domain bar. In the past, the Patten used in other objects to speak to language, it's a good idea to just put it on. It's a wise thing to do, after all, the character of the script is so different from other languages, but also because of this, not scripting is a flawed language, But in this area of design and planning methods, the world lacks enough experience, so it is not like the use of Java or C #, you can enjoy the design of the predecessor to the various models.

The complete EDK library is available from Google SVN Service check out.

Another: Recommend a comparison array diagram, you can carefully and horizontally compare class in each library of the specific situation. 2009/11/21 Supplements

Inspired by spry, it is very simple to inherit, mainly using call (this), which really makes me feel a little bit in the cottage, and quickly write an improved version:

function Base () {this.id = 888; This.say = function (v) {alert (v);}} function Base2 () {var sup = Extend (this, base, Argum Ents); This.say = function () {Sup.say (this.id);}} function foo () {var sup = Extend (this, base, arguments); This.say = function () {alert (); Sup.say (this.id);}} function Extend (O, base, args) {base.apply (o, args); var methods = {}; for (var i in O) {if (typeof o[i] = = ' function ') {methods[i] = O[i]; } return methods; A = new Foo (); A.say ();

Ashamed of the most, can only say that their own encounter ... "Javascript inheritance" edit:2009-12-10

The content disclosed herein is "ExtJS 3 detailed and practice" supplementary content, complete information please refer to "ExtJS 3 detailed and practice" a comprehensive introduction of the book.

Michael Bolin studied inheritance Patterns in JavaScript, which is a good summary (edit:2009-11-25):

"I never knew how sloppy me JavaScript was until I started using the Closure Compiler.
Good grief! "