Extjs 3 Explanation and practice: Use the super keyword in Ext. Extend ()

 

Since a language is simplified, whether idea or intuitive syntax, it is a trend to streamline it, trends often do not shift People's Will into their own habits, the habits of qualitative thinking, even the function keyword also has some friends think it is too long, there is a need to reduce. Of course, this is just a joke.

 

Like lisp, full day and colon are disasters. Anyone who has inherited ext knows that each time a parent class member is called, ext. subclass. superclass. methodname. Call/apply (this) is used ). The advantage of a long string is also obvious. At least this full naming method is not missing, so I am afraid I don't know it. Beginner friends tend to favor things out of the box.-The same is true for me, but after a long time, there are two shortcomings:

• After reconstruction, the name is changed, and the class name and method name are changed;
• Not as modern languages

The last reason is that I felt a little too far-fetched. When I make up for it, I think it's just my personal experience (stone and tomato are free, so I don't want to go cross-village hunting ). If you change super, you can run it like this. Always give yourself some reasons or "criminal motives.

 

To put it bluntly, this technology is actually developed based on the principle that javascript can reflect everything and everything is an object. In addition, the corresponding solution already exists on the Internet. I have modified it several times. The purpose of Ext. Extend () is to enable the inheritance relationship between the two. Sb is a subclass of the SP, so that SB has the SP function. How can we achieve the super keyword function similar to Java without using lengthy statements? I modified the extend () drop code to show the following ugliness:

(Because of the key code, you are not afraid to idle comments. Every sentence should be commented out as much as possible)

/** <Br/> * Create an inheritance relationship between the two: Sb is a subclass of SP, AND Sb has the SP function <br/> function base () {</P> <p >}< br/> base. prototype = {<br/> FOO: function (d) {<br/> response. write (d) <br/>}< br/> * <br/> Function Sub () {<br/> This. _ super (); <br/>}< br/> sub = object. extend (base, {FOO: function () {<br/> response. write (33) <br/> This. _ super (99); <br/>}}) <br/> New Sub (). foo (); <br/> * @ Param Sb subclass <br/> * @ Param SP parent class <br/> * @ Param overr New ides member <br/> */<br/> object. extend = (function () {<br/> var OC = object. prototype. constructor, testsuperreg = // B _super/B/<br/>/** <br/> * @ private <br/> * @ Param {function} subclass, it is processed by the extend above. <Br/> * @ Param {object} overrides override member (method, attribute) <br/> * @ Param {function} superclass parent class. However, you can also use origclass. superclass access, because origclass. superclass === superclass // true <br/> */<br/>, override = function (subclass, overrides, superclass) {<br/>/** <br/> * built-in function, which is a factory for the subclass function to "shell. <Br/> * If an overloaded method exists after the subclass is inherited, the method is rewritten to the function returned by return. This process is now called "Shelling ". <Br/> * This method returns a value of the function type. <Br/> * @ Param {string} name <br/> * @ Param {function} FN subclass method, that is, the rewrite method <br/> * @ return {function} is a newly generated function after "Shelling". In another way, <br/> * return new function (ARG, arg_1 ,..., functionbody); <br/> */<br/> function superfnfactory (name, FN) {<br/> return function () {<br/> // This is actually a simple switching algorithm <br/> var temp = This. _ super; <br/> // Add a new. _ super () method that is the same method <br/> // but on the super-Cl Ass <br/> This. _ super = superclass. prototype [name]; // parent class prototype <br/> // The method only need to be bound temporarily, so we <br/> // remove it when we're done executing <br/> // remove after execution <br/> var ret = fn. apply (this, arguments); <br/> This. _ super = temp; <br/> return ret; // ensure that the returned value after FN execution is passed <br/> }; <br/>}</P> <p> var <br/> P = subclass. prototype // P is a subclass of the object type <br/> and newmemberobj // newmember is a new member to be added to the subclass <Br/>, membernamestr // newmember name, that is, the key <br/>, ismethodbol // determines whether it is a function type, then you can check whether this_super words exist. <br/> hassuperbol // contains the super words. Type: Boolean ). <Br/>, isoverwritedfn; // checks whether the subclass and parent classes have the same name. Type: Boolean ). </P> <p> If (! Overrides) return; </P> <p> for (membernamestr in overrides) {<br/> newmemberobj = overrides [membernamestr] <br/> // determines whether the keyValue is of the funcion type. Non-method members are ignored. The concept of overloading and rewriting only exists in methods (functions. <Br/>, ismethodbol = (<br/> typeof (newmemberobj) = "function" <br/> & <br/> typeof (P [membernamestr]) = "function" <br/>) <br/> // If hassuper is true, this method (content of newmemberobj value) contains a keyword "_ super. <Br/> // It indicates that newmemberobj is an overloaded and overwritten method and needs to be further processed by superfnfactory. <Br/>, hassuperbol = testsuperreg. test (newmemberobj) <br/>, isoverwritedfn = ismethodbol & hassuperbol; </P> <p> // assign a new member to the subclass and implement "inheritance ", if no overload exists, assign a value to the subclass. <Br/> P [membernamestr] = isoverwritedfn <br/>? Superfnfactory (membernamestr, newmemberobj) <br/>: newmemberobj; <br/>}</P> <p> // Patch: IE 6 cannot be used .. in .. find the constructor member. <Br/> // constructor, tostring, and valueof are hidden members in IE. <br/> If (overrides. constructor) {<br/> P. constructor = superfnfactory ('constructor ', overrides. constructor); <br/> // Add a constructor to a _ super member <br/> P. _ super = superclass. prototype. constructor; <br/>}</P> <p> return function (subclass, superclass, overrides) {<br/> If (overrides = true) {<br/> subclass. prototype = superclass; <br/> return subclass; <BR/>}</P> <p> // Review: The Role of the equal sign in JS <br/> // creates a reference in general and does not add a new value, therefore, the address-based <br/> // when the type changes, you have to create a new region to save the new type, at this time, the new region and the old <br/> var isonlytwoarguments = typeof superclass = 'object'; </P> <p> If (isonlytwoarguments) {<br/> overrides = superclass; <br/> superclass = subclass; <br/>}</P> <p> // Well, till now, the parent class is "SP", and the new member is "overrides ". </P> <p> // isnosubclassconstructor indicates that the constructor is not provided when a new subclass is created. <Br/> // No constructor is available. In this case, we need to find a way to configure one. <Br/> // It is actually very simple. You don't need to think about it, that is, use the constructor of the parent class. <Br/> // It is worth mentioning that, although the writing method is different, the principle of determining whether there is no subclass constructor is the same as that of isonlytwoarguments... <Br/> // for the clarity of the description, here we use one more reference variable <br/> // but it must be considered in one case, instead of directly using the constructor of the parent class, it is a new constructor that is overwritten. It appears in overrides. <br/> var isnoconstructor = isonlytwoarguments; <br/> If (isonlytwoarguments) {<br/> subclass = overrides. constructor! = OC <br/>? Overrides. constructor <br/> // Note: you cannot directly use sb = Sp !!! Because the equal sign here is based on the address, it will affect the SP parent class! Use SP functions in disguise using the following methods <br/>: function (A, B, C, D) {<br/> This. _ super (A, B, C, D); <br/>}; <br/>}< br/> function FN () {}< br/> fn. prototype = superclass. prototype; <br/> subclass. prototype = new FN (); <br/> // sb. superclass = sp. prototype; // For compatible with earlier versions <br/> // affects the constructor of the original parent class, causing the constructor to be lost. Therefore, you must modify the constructor, add SP as the constructor of the parent class <br/> If (superclass. prototype. constructor = OC) {<br/> superclass. prototype. constructor = superclass; <br/>} <Br/> // copy all members! <Br/> override (subclass, overrides, superclass); <br/> return subclass; <br/>}< br/> })();

Attention is given to prototype. JS users. Because prototype. js has a method that is also object. Extend (), it will conflict with this method.

It is recommended that you do not need to use it urgently. It is best to understand the code above before proceeding. After all, I have written a lot of comments, right ~ Haha

There is a small tip: I wrote a function () in the "outermost layer" of extend. In the beginning, override () is actually the final code, pay attention to the sequence during the first read. The override is the last call.

 

Javascript

Is not similar to Java

Super

Keyword access to the parent class member method. Here we will introduce a simulation method, refer to jquery

The author's "Shelling" Scheme (http://ejohn.org/blog/simple-javascript-inheritance)

, Combined with Ext. Extend

. The source code with the test is as follows (js asp, so there is response. Write, if you change alert () on the webpage)

 

Function base () {</P> <p >}< br/> base. prototype = {<br/> FOO: function (d) {<br/> response. write (d) <br/>}< br/> * <br/> Function Sub () {<br/> This. _ super (); <br/>}< br/> sub = object. extend (base, {FOO: function () {<br/> response. write (33) <br/> This. _ super (99); <br/>}}) <br/> New Sub (). foo ();

The above information is passed in ASP iis5 of IE 6/ff3.0/serverside.

In this way, no matter how long the structure is, as long as this. _ super () has a dot, you can call the members of the parent class ......

The principle in this article is that I have collected information from several aspects, and I have been playing a role in my private activity project. I am sure there is a bug, but it is not a trigger in Huludao. I will spend some time talking about it, now I want to give readers some peace of mind: I have heard that this modified version is useless and will certainly be able to run!

 

As for the information, we have to compare the information inherited from the Javascript "class" in the old blog.
If you are interested ,,

 

In addition, some users' opinions on scripting are retained:

Chennai

In a sense, it is back to the original time, or back to the ancient time that is longer than the original time, there is a lot of inconvenience in creating the basic object architecture, in this way, the final structure of the linear regression is actually thinking. Presumably in
The oo or even design patten of the scripting vertex domain will develop into another knodge DGE.
Domain! The Patten used by other objects in the past is a wise practice to stick to it. It is true that script features are the same, other languages include:
This is why scripting is not a flawed statement, but a design and planning method in this region, the world lacks sufficient experience, so it is not as easy to use
Like java or C #, you can enjoy the various design modes of the predecessors.

 

The complete EDK library can be obtained from Google SVN
Service check out!

Also: We recommend a comparison Array Chart.
To compare the specific situation of the class in each database in a detailed manner. 2009/11/21 supplement

 

Inspired by spry, its inheritance is very concise, mainly because it uses call (this), which indeed makes me feel a little comfortable. I have to write out an example:

Function base () {<br/> This. id = 888; <br/> This. say = function (v) {<br/> alert (V); <br/>}< br/> function base2 () {<br/> var sup = extend (this, base, arguments); <br/> This. say = function () {<br/> Sup. say (this. ID); <br/>}< br/> function Foo () {<br/> var sup = extend (this, base, arguments ); <br/> This. say = function () {<br/> alert (99); <br/> Sup. say (this. ID); <br/>}< br/> function extend (O, base, argS) {<br/> base. apply (O, argS); <br/> VaR methods ={}; <br/> for (var I in O) {<br/> If (typeof o [I] = 'function') {<br/> methods [I] = O [I]; <br/>}< br/> return methods; <br/>}< br/> A = new Foo (); <br/>. say ();

Sorry, I can only say that I am seeing each other ...... Javascript inheritance
Edit: 2009-12-10

 

The content disclosed here is extjs 3 details and practices
For more information, see extjs 3 details and practices.
A comprehensive introduction to this book.

 

Michael Bolin's research on inheritance patterns in Javascript is a good summary.
(Edit: 2009-11-25 ):

"I never knew how sloppy My Javascript
Was until I started using the closure compiler.
Good grief! "