Five Ways of Implementing Inheritance in js

Keywords: ECMAScript

js is a flexible language. There are many ways to realize a function. ECMAScript does not have a clear inheritance mechanism, but through imitation. According to the characteristics of js language, there are several common ways for js to realize inheritance
1. Implementing inheritance by impersonating objects (this way can achieve multiple inheritance)
Implementing Principle: Make the constructor of the parent class a method of the subclass, then call the method of the subclass, assign all attributes and methods by this keyword.

  1. function Parent(firstname)  
  2. {  
  3.     this.fname=firstname;  
  4.     this.age=40;  
  5.     this.sayAge=function()  
  6.     {  
  7.         console.log(this.age);  
  8.     }  
  9. }  
  10. function Child(firstname)  
  11. {  
  12.     this.parent=Parent;  
  13.     this.parent(firstname);  
  14.     delete this.parent;  
  15.     this.saySomeThing=function()  
  16.     {  
  17.         console.log(this.fname);  
  18.         this.sayAge();  
  19.     }  
  20. }  
  21. var mychild=new  Child("plum");  
  22. mychild.saySomeThing();  

 

2. Implementing inheritance by changing the context of function with call method (this method can't inherit prototype chains, if you want to inherit prototype chains, use 5-hybrid mode)
Implementing Principle: Change the function context inside the function so that it points to the specific object of the incoming function

  1. function Parent(firstname)  
  2. {  
  3.     this.fname=firstname;  
  4.     this.age=40;  
  5.     this.sayAge=function()  
  6.     {  
  7.         console.log(this.age);  
  8.     }  
  9. }  
  10. function Child(firstname)  
  11. {  
  12.   
  13.     this.saySomeThing=function()  
  14.     {  
  15.         console.log(this.fname);  
  16.         this.sayAge();  
  17.     }  
  18.    this.getName=function()  
  19.    {  
  20.        return firstname;  
  21.    }  
  22.   
  23. }  
  24. var child=new Child("Zhang");  
  25. Parent.call(child,child.getName());  
  26. child.saySomeThing();  

 

3. Use Apply method to change function context to realize inheritance (this method can not inherit prototype chain, if you want to inherit prototype chain, use 5 hybrid mode)
Implementing Principle: Change the function context inside the function so that it points to the specific object of the incoming function

  1. function Parent(firstname)  
  2. {  
  3.     this.fname=firstname;  
  4.     this.age=40;  
  5.     this.sayAge=function()  
  6.     {  
  7.         console.log(this.age);  
  8.     }  
  9. }  
  10. function Child(firstname)  
  11. {  
  12.   
  13.     this.saySomeThing=function()  
  14.     {  
  15.         console.log(this.fname);  
  16.         this.sayAge();  
  17.     }  
  18.     this.getName=function()  
  19.     {  
  20.         return firstname;  
  21.     }  
  22.   
  23. }  
  24. var child=new Child("Zhang");  
  25. Parent.apply(child,[child.getName()]);  
  26. child.saySomeThing();  

 

4. Implementing Inheritance by Prototype Chain
Implementing Principle: Make the prototype object of the subclass point to the instance of the parent class to realize inheritance, that is, rewrite the prototype of the class. The disadvantage is that it can not directly realize multiple inheritance.

  1. function Parent()  
  2. {  
  3.   
  4.     this.sayAge=function()  
  5.     {  
  6.         console.log(this.age);  
  7.     }  
  8. }  
  9. function Child(firstname)  
  10. {  
  11.     this.fname=firstname;  
  12.     this.age=40;  
  13.     this.saySomeThing=function()  
  14.     {  
  15.         console.log(this.fname);  
  16.         this.sayAge();  
  17.     }  
  18. }  
  19.   
  20. Child.prototype=new  Parent();  
  21. var child=new Child("Zhang");  
  22. child.saySomeThing();  

 

5. Implementing Inheritance by Mixed Mode

  1. function Parent()  
  2. {  
  3.   
  4.     this.sayAge=function()  
  5.     {  
  6.         console.log(this.age);  
  7.     }  
  8. }  
  9.   
  10. Parent.prototype.sayParent=function()  
  11. {  
  12.    alert("this is parentmethod!!!");  
  13. }  
  14.   
  15. function Child(firstname)  
  16. {  
  17.     Parent.call(this);  
  18.     this.fname=firstname;  
  19.     this.age=40;  
  20.     this.saySomeThing=function()  
  21.     {  
  22.         console.log(this.fname);  
  23.         this.sayAge();  
  24.     }  
  25. }  
  26.   
  27. Child.prototype=new  Parent();  
  28. var child=new Child("Zhang");  
  29. child.saySomeThing();  
  30. child.sayParent();  

Posted by bradjinc on Mon, 25 Mar 2019 12:21:28 -0700