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實現繼承