First, preface
Recently in the project, the front-end framework used JavaScript object-oriented programming, and encountered many problems, the most typical problem is that the subclass calls the parent class (Super Class) with the same name method, which is called the parent class function base.** in C # sub-class. The following excerpts from the park friends of the magic days of the implementation of JavaScript implementations of several ways to make a memo, but in these ways, can not implement the subclass call the parent class method.
Second, JavaScriptSeveral ways to implement inheritance
Since we want to implement inheritance, we first have to have a base class with the following code:
- Define an animal class
- ???? function Animal (name) {
- ???????? //Properties
- ???????? this. name = name | | ' Animal ';
- ???????? //Instance method
- ???????? this. Sleep = function () {
- ???????????? Console.log (this. Name + ' is sleeping! ‘);
- ????????}
- ????}
- ???? //Prototyping method
- ???? Animal. prototype. Eat = function (food) {
- ???????? Console.log (this. Name + ' eating: ' + food);
- ????};
1. Prototype chain inheritance
Core: prototype An instance of a parent class as a child class
- Definition Animal Cat
- function Cat () {
- }
- Cat. prototype = new Animal ();
- Cat. prototype. name = ' Cat ';
- ?
- Test Code
- var cat = new cat ();
- Console.log (cat. Name); //cat
- Cat.eat (' fish '); //cat is eating: Fish
- Cat.sleep (); //cat is sleeping .
- Console.log (cat instanceof Animal); //true
- Console.log (cat instanceof cat); //true
Characteristics:
1. Very pure inheritance, the instance is an instance of the subclass, and also an instance of the parent class;
2. The parent class has new prototype method/prototype attributes, which can be accessed by subclasses;
3. Simple and easy to implement;
Disadvantages:
1. To add properties and methods for subclasses, you must execute after a statement such as New Animal (), not in the constructor
2. Unable to achieve multiple inheritance;
3. When you create a subclass, you cannot pass arguments to the parent class constructor;
4. Attributes from the prototype object are shared by all instances;
2. Construction Inheritance
Core : Use the constructor of the parent class to enhance the subclass instance, which is equivalent to copying the instance property of the parent class to the subclass (useless to the prototype)
- function Cat (name) {
- ???? Animal.call (this);
- ???? this. name = name | | ' Tom ';
- }
- ?
- Test Code
- var cat = new cat ();
- Console.log (cat. Name);
- Console.log (Cat.sleep ());
- Console.log (cat instanceof Animal); //False
- Console.log (cat instanceof cat); //True
Characteristics:
1. Resolves a problem where subclass instances share the parent class reference property in 1;
2. When you create a subclass instance, you can pass parameters to the parent class;
3. Multiple inheritance (call multiple parent objects) can be implemented;
Disadvantages:
1. The instance is not an instance of the parent class, only an instance of the subclass;
2. Only the instance properties and methods of the parent class can be inherited, and the prototype properties/methods cannot be inherited;
3. Unable to implement function reuse, each subclass has a copy of the parent class instance function, affecting performance;
3. Instance Inheritance
Core : Adds a new attribute to the parent class instance, returning as a subclass instance
- function Cat (name) {
- ???? var instance = new Animal ();
- ???? Instance. name = name | | ' Tom ';
- ???? return instance;
- }
- ?
- Test Code
- var cat = new cat ();
- Console.log (cat. Name);
- Console.log (Cat.sleep ());
- Console.log (cat instanceof Animal); //True
- Console.log (cat instanceof cat); //False
Characteristics:
1. Unrestricted invocation, whether it is a new subclass () or a subclass (), the returned object has the same effect;
Disadvantages:
2. Unable to achieve multiple inheritance;
4. Copy Inheritance
- function Cat (name) {
- ???? var animal = new animal ();
- ???? for (var p in animal) {
- ???????? Cat. prototype [P] = animal[p];
- ????}
- ???? Cat. prototype. name = name | | ' Tom ';
- }
- ?
- Test Code
- var cat = new cat ();
- Console.log (cat. Name);
- Console.log (Cat.sleep ());
- Console.log (cat instanceof Animal); //False
- Console.log (cat instanceof cat); //True
Characteristics:
1. Support multiple inheritance;
Disadvantages:
1. Low efficiency and high memory consumption (because you want to copy the attributes of the parent class);
2. Unable to get the parent class non-enumerable method (non-enumerable method, cannot use for in access);
5. Combination Inheritance
Core : By calling the parent class construct, inheriting the property of the parent class and preserving the advantages of the pass parameter, and then implementing the function reuse by using the parent class instance as the subclass prototype
- function Cat (name) {
- ???? Animal.call (this);
- ???? this. name = name | | ' Tom ';
- }
- Cat. prototype = new Animal ();
- Cat. prototype. constructor = Cat;
- ?
- Test Code
- var cat = new cat ();
- Console.log (cat. Name);
- Console.log (Cat.sleep ());
- Console.log (cat instanceof Animal); //True
- Console.log (cat instanceof cat); //True
Characteristics:
1. Compensate for the defect of Mode 2, can inherit the instance attribute/method, also can inherit the prototype attribute/method;
2. Both an instance of the subclass and an instance of the parent class;
3. There is no reference attribute sharing problem;
4. Can transmit the parameter;
5. function can be reused;
Disadvantages:
1. A two-time parent constructor is called, and two instances are generated (the subclass instance masks the sub-class prototype);
6. Parasitic combination inheritance
core : By parasitic way, the instance property of the parent class is cut off, so that when two times the construction of the parent class is called, the two instance method/property is not initialized, the disadvantage of avoiding the combination inheritance
- function Cat (name) {
- ???? Animal.call (this);
- ???? this. name = name | | ' Tom ';
- }
- (function() {
- ???? //Create a class with no instance method
- ???? var Super = function() {};
- ???? Super. prototype = Animal. prototype;
- ???? //prototype The instance as a subclass
- ???? Cat. prototype = new Super ();
- ???? Cat. prototype. constructor = Cat; //need to fix the next constructor
- })();
- ?
- Test Code
- var cat = new cat ();
- Console.log (cat. Name);
- Console.log (Cat.sleep ());
- Console.log (cat instanceof Animal); //True
- Console.log (cat instanceof cat); //true
Characteristics:
1. Perfect;
Disadvantages:
1. The implementation is more complex;
Third, JavaScriptSolution for calling the parent class method from a neutron class
None of the above inheritance methods implement subclasses calling the parent class method, which overrides the parent class function after overriding the subclass prototype function.
Iv. Summary
Appendix I, Class base class
- Defines the top-level class for JS inheritance base class
- function Class () {}
- Class. prototype. construct = function () {};
- Class.extend = function (def) {
- ???? var subclass = function () {
- ???????? if (arguments[0]!== Class) { this. construct.apply (This, arguments);}
- ????};
- ?
- ???? var proto = newThis (Class);
- ?
- ???? var superclass = this. prototype;
- ???? for (var n in def) {
- ???????? var item = Def[n];
- ???????? if (Item instanceofFunction) item.father = superclass;
- ???????? Proto[n] = Item;
- ????}
- ???? Subclass. prototype = Proto;
- ?
- ???? //Assign to this new subclass the same static Extend method
- ???? Subclass.extend = this. Extend;
- ???? return subclass;
- };
Appendix II, Reference articles
???? 39991173
The implementation of the JavaScript neutron class calling the parent class method