The implementation of the JavaScript neutron class calling the parent class method

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:

2. Define an animal class
4. ???? function Animal (name) {
6. ???????? //Properties
8. ???????? this. name = name | | ' Animal ';
10. ???????? //Instance method
12. ???????? this. Sleep = function () {
14. ???????????? Console.log (this. Name + ' is sleeping! ‘);
16. ????????}
18. ????}
20. ???? //Prototyping method
22. ???? Animal. prototype. Eat = function (food) {
24. ???????? Console.log (this. Name + ' eating: ' + food);
26. ????};

1. Prototype chain inheritance

Core: prototype An instance of a parent class as a child class

2. Definition Animal Cat
4. function Cat () {
6. }
8. Cat. prototype = new Animal ();
10. Cat. prototype. name = ' Cat ';
12. ?
14. Test Code
16. var cat = new cat ();
18. Console.log (cat. Name); //cat
20. Cat.eat (' fish '); //cat is eating: Fish
22. Cat.sleep (); //cat is sleeping .
24. Console.log (cat instanceof Animal); //true
26. 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)

2. function Cat (name) {
4. ???? Animal.call (this);
6. ???? this. name = name | | ' Tom ';
8. }
10. ?
12. Test Code
14. var cat = new cat ();
16. Console.log (cat. Name);
18. Console.log (Cat.sleep ());
20. Console.log (cat instanceof Animal); //False
22. 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

2. function Cat (name) {
4. ???? var instance = new Animal ();
6. ???? Instance. name = name | | ' Tom ';
8. ???? return instance;
10. }
12. ?
14. Test Code
16. var cat = new cat ();
18. Console.log (cat. Name);
20. Console.log (Cat.sleep ());
22. Console.log (cat instanceof Animal); //True
24. 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

2. function Cat (name) {
4. ???? var animal = new animal ();
6. ???? for (var p in animal) {
8. ???????? Cat. prototype [P] = animal[p];
10. ????}
12. ???? Cat. prototype. name = name | | ' Tom ';
14. }
16. ?
18. Test Code
20. var cat = new cat ();
22. Console.log (cat. Name);
24. Console.log (Cat.sleep ());
26. Console.log (cat instanceof Animal); //False
28. 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

2. function Cat (name) {
4. ???? Animal.call (this);
6. ???? this. name = name | | ' Tom ';
8. }
10. Cat. prototype = new Animal ();
12. Cat. prototype. constructor = Cat;
14. ?
16. Test Code
18. var cat = new cat ();
20. Console.log (cat. Name);
22. Console.log (Cat.sleep ());
24. Console.log (cat instanceof Animal); //True
26. 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

2. function Cat (name) {
4. ???? Animal.call (this);
6. ???? this. name = name | | ' Tom ';
8. }
10. (function() {
12. ???? //Create a class with no instance method
14. ???? var Super = function() {};
16. ???? Super. prototype = Animal. prototype;
18. ???? //prototype The instance as a subclass
20. ???? Cat. prototype = new Super ();
22. ???? Cat. prototype. constructor = Cat; //need to fix the next constructor
24. })();
26. ?
28. Test Code
30. var cat = new cat ();
32. Console.log (cat. Name);
34. Console.log (Cat.sleep ());
36. Console.log (cat instanceof Animal); //True
38. 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

2. Defines the top-level class for JS inheritance base class
4. function Class () {}
6. Class. prototype. construct = function () {};
8. Class.extend = function (def) {
10. ???? var subclass = function () {
12. ???????? if (arguments[0]!== Class) { this. construct.apply (This, arguments);}
14. ????};
16. ?
18. ???? var proto = newThis (Class);
20. ?
22. ???? var superclass = this. prototype;
24. ???? for (var n in def) {
26. ???????? var item = Def[n];
28. ???????? if (Item instanceofFunction) item.father = superclass;
30. ???????? Proto[n] = Item;
32. ????}
34. ???? Subclass. prototype = Proto;
36. ?
38. ???? //Assign to this new subclass the same static Extend method
40. ???? Subclass.extend = this. Extend;
42. ???? return subclass;
44. };

Appendix II, Reference articles

???? 39991173

The implementation of the JavaScript neutron class calling the parent class method