js实现继承

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现继承相关的知识,希望对你有一定的参考价值。

  js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式
1.使用对象冒充实现继承(该种实现方式可以实现多继承)
实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

Js代码  技术分享
  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("李");  
  22. mychild.saySomeThing();  

 

2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

Js代码  技术分享
  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("张");  
  25. Parent.call(child,child.getName());  
  26. child.saySomeThing();  

 

3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

Js代码  技术分享
  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("张");  
  25. Parent.apply(child,[child.getName()]);  
  26. child.saySomeThing();  

 

4.采用原型链的方式实现继承
实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

Js代码  技术分享
  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("张");  
  22. child.saySomeThing();  

 

5.采用混合模式实现继承

Js代码  技术分享
  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("张");  
  29. child.saySomeThing();  
  30. child.sayParent();  

 

以上是关于js实现继承的主要内容,如果未能解决你的问题,请参考以下文章

JS- 继承

js中的继承

js实现继承

JS继承之原型继承

JS继承之原型继承

JS继承以及继承的几种实现方式总结