JS Implementation inheritance

Source: Internet
Author: User

JS is a flexible language, to achieve a function is often a variety of practices, ECMAScript no explicit inheritance mechanism, but by imitation, according to the characteristics of the JS language itself, JS implementation of the following common methods of inheritance
1. Using an object to impersonate the inheritance (this implementation can implement multiple inheritance)
Implementation principle: Make the constructor of the parent class A method of the subclass, then call the method of the subclass, assign the value to all the properties and methods through the This keyword

JS Code
  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 ("Lee");
  22. Mychild.saysomething ();



2. Use the call method to change the function context implementation of inheritance (this way can not inherit the prototype chain, if you want to inherit the prototype chain, then 5 mixed mode)
Implementation principle: Change the function context inside the function this so that it points to the specific object passed into the function

JS Code
  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.saysomething=function ()
  13. {
  14. Console.log (this.fname);
  15. This.sayage ();
  16. }
  17. this.getname=function ()
  18. {
  19. return firstname;
  20. }
  21. }
  22. var child=New Child ("Zhang");
  23. Parent.call (Child,child.getname ());
  24. Child.saysomething ();



3. Use the Apply method to change the function context implementation inheritance (this way can not inherit the prototype chain, if you want to inherit the prototype chain, the use of 5 mixed mode)
Implementation principle: Change the function context inside the function this so that it points to the specific object passed into the function

JS Code
  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.saysomething=function ()
  13. {
  14. Console.log (this.fname);
  15. This.sayage ();
  16. }
  17. this.getname=function ()
  18. {
  19. return firstname;
  20. }
  21. }
  22. var child=New Child ("Zhang");
  23. Parent.apply (Child,[child.getname ());
  24. Child.saysomething ();



4. Implement inheritance in the form of a prototype chain
Implementation principle: The subclass prototype object points to the parent class to implement inheritance, that is, rewrite the prototype of the class, the disadvantage is not directly implement multiple inheritance

JS Code
  1. function Parent ()
  2. {
  3. this.sayage=function ()
  4. {
  5. Console.log (this.age);
  6. }
  7. }
  8. function Child (FirstName)
  9. {
  10. This.fname=firstname;
  11. this.age=40;
  12. this.saysomething=function ()
  13. {
  14. Console.log (this.fname);
  15. This.sayage ();
  16. }
  17. }
  18. Child.prototype=new Parent ();
  19. var child=New Child ("Zhang");
  20. Child.saysomething ();



5. Implementing inheritance with Mixed mode

JS Code
  1. function Parent ()
  2. {
  3. this.sayage=function ()
  4. {
  5. Console.log (this.age);
  6. }
  7. }
  8. parent.prototype.sayparent=function ()
  9. {
  10. Alert ("This is Parentmethod!!!");
  11. }
  12. function Child (FirstName)
  13. {
  14. Parent.call (this);
  15. This.fname=firstname;
  16. this.age=40;
  17. this.saysomething=function ()
  18. {
  19. Console.log (this.fname);
  20. This.sayage ();
  21. }
  22. }
  23. Child.prototype=new Parent ();
  24. var child=New Child ("Zhang");
  25. Child.saysomething ();
  26. Child.sayparent ();

JS Implementation inheritance

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.