JS中的constructor与prototype（2）--js继承的实现原理

接着看继承是如何实现的。[javascript] view plaincopy

1. function Person(name)  
2. {  
3.    this.name=name;  
4.    this.showMe=function()  
5.         {  
6.            alert(this.name);  
7.         }  
8. };  
9.   
10. Person.prototype.from=function()  
11. {  
12.   alert('I come from prototype.');  
13. }  
14.   
15. function SubPerson()  
16. {  
17. }  
18. SubPerson.prototype=new Person();  
19.   
20. var subOne=new SubPerson();  
21. subOne.from();//I come from prototype.  
22. alert(subOne.constructor);//function Person(name) {...};  
23. alert(SubPerson.prototype.constructor);//function Person(name) {...};  

继承的实现很简单，只需要把子类的prototype设置为父类的一个对象即可。注意这里说的可是对象哦！

 那么通过prototype属性实现继承的原理是什么呢？还是先看图形说明，然后编写代码进行验证。

 

注意：红色的方框就是把子类与父类链接起来的地方。这个就应该是传说中的prototype链了吧。下面有代码进行验证。

js代码:

[javascript]  view plain copy

1. function Person(name)  
2. {  
3.    this.name=name;  
4.    this.showMe=function()  
5.         {  
6.            alert(this.name);  
7.         }  
8. };  
9.   
10. Person.prototype.from=function()  
11. {  
12.   alert('I come from prototype.');  
13. }  
14. var father=new Person('js');//为了下面演示使用showMe方法，采用了js参数,实际多采用无参数  
15. alert(father.constructor);//查看构造函数,结果是:function Person(name) {...};  
16. function SubPer()  
17. {  
18. }  
19. SubPer.prototype=father;//注意这里  
20. SubPer.prototype.constructor=SubPer;  
21.   
22. var son=new SubPer();  
23. son.showMe();//js  
24. son.from();//I come from prototype.  
25. alert(father.constructor);//function SubPer(){...}  
26. alert(son.constructor);//function SubPer(){...}  
27. alert(SubPer.prototype.constructor);//function SubPer(){...}  

 

 根据上图的prototype链，还有代码的结果，我想应该明白为什么使用prototype能够实现

JS中的继承了吧。