Home > Developer > JavaScript
What I tried today is how to use the inheritance mechanism more like other languages, multi-level inheritance, and more aspects to call the structure of the parent class.
What I want to achieve:
Copy codeThe Code is as follows:
Function (){
Alert ('A ');
}
Function B (){
This. $ supClass ();
Alert ('B ');
}
Extend (B, );
Function C (){
This. $ supClass ();
Alert ('C ');
}
Extend (C, B );
Var c = new C ();
Alert (c instanceof A); // true
Alert (c instanceof B); // true
Alert (c instanceof C); // true
Instance:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> js inheritance </ title> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
My extend is written as follows:
Copy codeThe Code is as follows:
Function extend (subClass, supClass ){
Var fun = function (){},
Prototype = subClass. prototype;
Fun. prototype = supClass. prototype;
SubClass. prototype = new fun ();
For (var I in prototype ){
SubClass. prototype [I] = prototype [I];
}
SubClass. $ supClass = supClass;
SubClass. prototype. $ supClass = function (){
Var supClass = arguments. callee. caller. $ supClass;
If (typeof supClass = 'function '){
SupClass. apply (this, arguments );
This. $ supClass = supClass;
}
};
SubClass. prototype. constructor = subClass;
Return subClass;
}
You may ask why you do not write the following:
Copy codeThe Code is as follows:
Function extend (subClass, supClass ){
Var fun = function (){},
Prototype = subClass. prototype;
Fun. prototype = supClass. prototype;
SubClass. prototype = new fun ();
For (var I in prototype ){
SubClass. prototype [I] = prototype [I];
}
SubClass. prototype. $ supClass = function (){
SupClass. apply (this, arguments );
};
SubClass. prototype. constructor = subClass;
Return subClass;
}
In this way, it seems that there is no problem, only the first-level inheritance will run well, but if the multi-level inheritance, it will cause an endless loop, because:
Copy codeThe Code is as follows:
SubClass. prototype. $ supClass = function (){
SupClass. apply (this, arguments );
};
This method will be overwritten all the time, resulting in an endless loop.
My practice is to use the $ supClass attribute of the class to point to the parent class it inherits. In prototype, there is also a $ supClass method, this $ supClass must be executed in the class constructor for the first time, prototype. $ supClass will pass arguments during execution. callee. caller. $ supClass to get $ supClass of the class, and then execute it in this through apply. In this way, $ subClass can obtain and execute the class parent class constructor based on different conditions.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
