js实现继承的5种方式

Posted 2020-09-02 熊熊之火

   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();