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

Source: Internet
Author: User
Tags instance 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:

  1. Define an animal class
  2. ???? function Animal (name) {
  3. ???????? //Properties
  4. ???????? this. name = name | | ' Animal ';
  5. ???????? //Instance method
  6. ???????? this. Sleep = function () {
  7. ???????????? Console.log (this. Name + ' is sleeping! ‘);
  8. ????????}
  9. ????}
  10. ???? //Prototyping method
  11. ???? Animal. prototype. Eat = function (food) {
  12. ???????? Console.log (this. Name + ' eating: ' + food);
  13. ????};

1. Prototype chain inheritance

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

  1. Definition Animal Cat
  2. function Cat () {
  3. }
  4. Cat. prototype = new Animal ();
  5. Cat. prototype. name = ' Cat ';
  6. ?
  7. Test Code
  8. var cat = new cat ();
  9. Console.log (cat. Name); //cat
  10. Cat.eat (' fish '); //cat is eating: Fish
  11. Cat.sleep (); //cat is sleeping .
  12. Console.log (cat instanceof Animal); //true
  13. 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)

  1. function Cat (name) {
  2. ???? Animal.call (this);
  3. ???? this. name = name | | ' Tom ';
  4. }
  5. ?
  6. Test Code
  7. var cat = new cat ();
  8. Console.log (cat. Name);
  9. Console.log (Cat.sleep ());
  10. Console.log (cat instanceof Animal); //False
  11. 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

  1. function Cat (name) {
  2. ???? var instance = new Animal ();
  3. ???? Instance. name = name | | ' Tom ';
  4. ???? return instance;
  5. }
  6. ?
  7. Test Code
  8. var cat = new cat ();
  9. Console.log (cat. Name);
  10. Console.log (Cat.sleep ());
  11. Console.log (cat instanceof Animal); //True
  12. 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

  1. function Cat (name) {
  2. ???? var animal = new animal ();
  3. ???? for (var p in animal) {
  4. ???????? Cat. prototype [P] = animal[p];
  5. ????}
  6. ???? Cat. prototype. name = name | | ' Tom ';
  7. }
  8. ?
  9. Test Code
  10. var cat = new cat ();
  11. Console.log (cat. Name);
  12. Console.log (Cat.sleep ());
  13. Console.log (cat instanceof Animal); //False
  14. 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

  1. function Cat (name) {
  2. ???? Animal.call (this);
  3. ???? this. name = name | | ' Tom ';
  4. }
  5. Cat. prototype = new Animal ();
  6. Cat. prototype. constructor = Cat;
  7. ?
  8. Test Code
  9. var cat = new cat ();
  10. Console.log (cat. Name);
  11. Console.log (Cat.sleep ());
  12. Console.log (cat instanceof Animal); //True
  13. 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

  1. function Cat (name) {
  2. ???? Animal.call (this);
  3. ???? this. name = name | | ' Tom ';
  4. }
  5. (function() {
  6. ???? //Create a class with no instance method
  7. ???? var Super = function() {};
  8. ???? Super. prototype = Animal. prototype;
  9. ???? //prototype The instance as a subclass
  10. ???? Cat. prototype = new Super ();
  11. ???? Cat. prototype. constructor = Cat; //need to fix the next constructor
  12. })();
  13. ?
  14. Test Code
  15. var cat = new cat ();
  16. Console.log (cat. Name);
  17. Console.log (Cat.sleep ());
  18. Console.log (cat instanceof Animal); //True
  19. 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

  1. Defines the top-level class for JS inheritance base class
  2. function Class () {}
  3. Class. prototype. construct = function () {};
  4. Class.extend = function (def) {
  5. ???? var subclass = function () {
  6. ???????? if (arguments[0]!== Class) { this. construct.apply (This, arguments);}
  7. ????};
  8. ?
  9. ???? var proto = newThis (Class);
  10. ?
  11. ???? var superclass = this. prototype;
  12. ???? for (var n in def) {
  13. ???????? var item = Def[n];
  14. ???????? if (Item instanceofFunction) item.father = superclass;
  15. ???????? Proto[n] = Item;
  16. ????}
  17. ???? Subclass. prototype = Proto;
  18. ?
  19. ???? //Assign to this new subclass the same static Extend method
  20. ???? Subclass.extend = this. Extend;
  21. ???? return subclass;
  22. };

Appendix II, Reference articles

???? 39991173

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.