상속

1) 프로토타입 속성으로 부모 객체 참조

1. <script>    
2.     function Clothes(name, top, bottom, color) {    
3.         this.name = name;    
4.         this.top = top;    
5.         this.bottom = bottom;    
6.         this.color = color;    
7.             
8.         this.print = function() {    
9.             var out='';    
10.             out+='name:'+this.name+'\n';    
11.             out+='top:'+this.top+'\n';    
12.             out+='bottom:'+this.bottom+'\n';    
13.             out+='color:'+this.color;    
14.                 
15.             console.log(out);    
16.         }  
17.     }  
18.       
19.     function Dress(name, top, bottom, color) {  
20.         this.name = name;    
21.         this.top = top;    
22.         this.bottom = bottom;    
23.         this.color = color;    
24.           
25.         this.changeDress = function() {  
26.             this.name = 'dress2';  
27.         }  
28.     }  
29.     Dress.prototype = new Clothes();  
30.       
31.     var dress = new Dress('dress', 95, 26, 'red');  
32.       
33.     dress.print();  
34. </script>    

        * 위 소스는 Dress 객체가 Clothes 객체를 상속받아 부모(Clothes) 객체에 있는 함수
          를 호출하는 예제입니다.


2) 프로토타입 공유

1. <script>    
2.     function Clothes(name, top, bottom, color) {    
3.         this.name = name;    
4.         this.top = top;    
5.         this.bottom = bottom;    
6.         this.color = color;    
7.     }  
8.       
9.     Clothes.prototype.print = function() {    
10.         var out='';    
11.         out+='name:'+this.name+'\n';    
12.         out+='top:'+this.top+'\n';    
13.         out+='bottom:'+this.bottom+'\n';    
14.         out+='color:'+this.color;    
15.             
16.         console.log(out);    
17.     }  
18.       
19.     function Dress(name, top, bottom, color) {  
20.         this.name = name;    
21.         this.top = top;    
22.         this.bottom = bottom;    
23.         this.color = color;    
24.           
25.         this.changeDress = function() {  
26.             this.name = 'dress2';  
27.         }  
28.     }  
29.     Dress.prototype = Clothes.prototype;  
30.       
31.     var dress = new Dress('dress', 95, 26, 'red');  
32.       
33.     dress.print();  
34. </script>    

        * Clothes 객체의 prototype에 구현 된 함수만 상속


3) Object.create() 를 이용한 상속 구현

1. <script>    
2.     var clothes = {  
3.         name:'dress',  
4.         top:95,  
5.         bottom:32,  
6.         color:'black',  
7.         print:function() {  
8.             console.log(this.name+' '+this.top+' '+this.bottom+' '+this.color);  
9.             // result : dress 95 32 black  
10.         }  
11.     };  
12.       
13.     var dress = Object.create(clothes);  
14.     dress.print();  
15.       
16.     dress.price = 30;  
17.     console.log(dress.price); // result : 30  
18.       
19.     dress.printAll = function() {  
20.         console.log(this.name+' '+this.top+' '+this.bottom+' '+this.color+' '+this.price);  
21.         // result : dress 95 32 black 30  
22.     };  
23.     dress.printAll();  
24. </script>