js 继承(1)

js 如何实现继承呢?

下面是一个简单的继承demo

Js代码  

1. console.clear();  
2. //child 继承 parent  
3. var extend=function(child,parent)  
4. {  
5.   child.prototype=new parent();  
6.     
7. }  
8. function A(){  
9.   this.name="A";  
10.   this.sayHello=function(){  
11.     console.log("Hello , "+this.name);  
12.   }  
13.     
14. }  
15.   
16. function B(){  
17.   this.sex='man';  
18.   this.mySex=function(){  
19.     console.log("sex:"+this.sex);  
20.   }  
21. }  
22.   
23.   
24.   
25. extend(B,A);  
26.   
27. var b=new B();  
28. b.mySex();  
29. b.sayHello();  

 运行结果:

sex:man

 

Hello , A

说明:B 本身没有sayHello 方法,而是从A 继承过来的.

 

那么我们再让B继承另外一个类C 

Js代码  

1. function C(){  
2.   this.age=26;  
3.   this.myAge=function(){  
4.     console.log("age:"+this.age);  
5.   }  
6. }  
7.   
8.   
9.   
10. extend(B,A);  
11. extend(B,C);  
12. var b=new B();  
13. b.mySex();  
14. b.sayHello();  

 报错:

 继承C 之后,调用sayHello竟然报错,但是sayHello不是从A 继承过来的吗?

说明我们的继承方法有问题:

Js代码  

1. var extend=function(child,parent)  
2. {  
3.   child.prototype=new parent();  
4.     
5. }  

 B先继承A,然后继承C,那么之前继承A的属性都没了.这显然不合要求.

所以我优化一下继承方法:

Js代码  

1. //child 继承 parent  
2. var extend=function(child,parent)  
3. {  
4.   var p1=child.prototype;  
5.   child.prototype=new parent();  
6.   child.prototype.__proto__=p1;  
7.     
8. }  

 完整代码如下:

Js代码  

1. console.clear();  
2. //child 继承 parent  
3. var extend=function(child,parent)  
4. {  
5.   var p1=child.prototype;  
6.   child.prototype=new parent();  
7.   child.prototype.__proto__=p1;  
8.     
9. }  
10. function A(){  
11.   this.name="A";  
12.   this.sayHello=function(){  
13.     console.log("Hello , "+this.name);  
14.   }  
15.     
16. }  
17.   
18. function B(){  
19.   this.sex='man';  
20.   this.mySex=function(){  
21.     console.log("sex:"+this.sex);  
22.   }  
23. }  
24.   
25. function C(){  
26.   this.age=26;  
27.   this.myAge=function(){  
28.     console.log("age:"+this.age);  
29.   }  
30. }  
31.   
32.   
33. extend(B,A);  
34. extend(B,C);  
35. var b=new B();  
36. b.mySex();  
37. b.sayHello();  
38. b.myAge();  

 执行结果:

sex:man

 

Hello , A

age:26

 

 

即B 成功地调用了A和C 的方法

 我们继续优化,因为__proto__在IE中不能访问.

优化的结果:

Js代码  

1. //child 继承 parent  
2.        var extend=function(child,parent)  
3.        {  
4.            var p1=child.prototype;  
5.            var p2=parent.prototype;  
6.            parent.prototype=p1;  
7.            child.prototype=new parent();  
8.            parent.prototype=p2;  
9.   
10.        }  
11.        function A(){  
12.            this.name="A";  
13.            this.sayHello=function(){  
14.                console.dir("Hello , "+this.name);  
15.            }  
16.   
17.        }  
18.   
19.        function B(){  
20.            this.sex='man';  
21.            this.mySex=function(){  
22.                console.dir("sex:"+this.sex);  
23.            }  
24.        }  
25.   
26.        function C(){  
27.            this.age=26;  
28.            this.myAge=function(){  
29.                console.dir("age:"+this.age);  
30.            }  
31.        }  
32.   
33.   
34.        extend(B,A);  
35.        extend(B,C);  
36.        var b=new B();  
37.        b.mySex();  
38.        b.sayHello();  
39.        b.myAge();  
40.        console.dir(A);  
41.        console.dir(B);  
42.        console.dir(C);  

 运行结果:

 

 继承方法:

Js代码  

1. //child 继承 parent  
2.        var extend=function(child,parent)  
3.        {  
4.            var p1=child.prototype;  
5.            var p2=parent.prototype;  
6.            parent.prototype=p1;  
7.            child.prototype=new parent();  
8.            parent.prototype=p2;  
9.            delete p1;  
10.            delete p2;  
11.        }