캡슐화

캡슐화

사용자가 수정하지 말아야 할 것을 수정하거나 잘못된 입력을 방지하기 위함

    1) 캡슐화 구현

1. <script>    
2.     function Rectangle() {  
3.         var width;  
4.         var height;  
5.           
6.         this.setWidth = function(w) {  
7.             if(w<=0) {  
8.                 return alert('width error');  
9.             } else {  
10.                 this.width = w;  
11.             }  
12.         };  
13.         this.setHeight = function(h) {  
14.             if(h<=0) {  
15.                 return alert('height error');  
16.             } else {  
17.                 this.height = h;  
18.             }  
19.         };  
20.         this.getWidth = function() {  
21.             return this.width;  
22.         };  
23.         this.getHeight = function() {  
24.             return this.height;  
25.         }  
26.         this.area = function() {  
27.             if(width != null && height != null) {  
28.                 return width*height;  
29.             } else {  
30.                 alert('data error');  
31.             }  
32.         }  
33.     }  
34.       
35.     var rectangle = new Rectangle();  
36.     rectangle.setWidth(-1);  
37.     rectangle.setHeight(-3);  
38.     rectangle.area();  
39. </script>    

           * 실행 시 음수 값이 입력되어 width error, height error 가 발생한다.


    2) 게터(Getter), 세터(Setter)
       ① 게터(getter) : get으로 시작하여 값을 가져오는 메서드
       ② 세터(setter) : set으로 시작하여 값을 설정하는 메서드

상속

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>    

       

프로토타입 기반 언어

프로토타입 기반 언어
동적으로 객체의 구조와 동작 방식을 바꿀 수 있는 장점이 있지만, 클래스 기반 언어보다 정확성, 안정성, 예측가능성이 떨어진다.

1. <script>    
2.     function Make(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.     var clothes = new Make('suit', 100, 32, 'black');    
20.     console.log(clothes.hasOwnProperty('color'));  
21. </script>   

    * 객체에 hasOwnProperty() 함수가 구현되어 있지 않으나 정상 작동

           1) 프로토타입(prototype)
             - 속성과 메서드 포함, 객체
             - 모든 객체는 자신의 프로토타입을 가리키는 prototype라는 숨겨진 속성을 가짐
             - 모든 객체는 속성을 상속하는 프로토타입 객체에 연결됨
             - 표기법({ })을 이용하여 생성된 객체는 Javascript의 표준 객체인 Object의 속성
               인 프로토타입(Object.prototype) 객체에 연결
             - 객체 생성 시 결졍된 프로토타입 객체는 다른 객체로 변경 가능


            2) 생성자 함수를 이용한 객체 생성 시 프로토타입

1. <script>    
2.     function Make(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.         Make.prototype.alertMsg = function() {  
19.             alert('');  
20.         }  
21.     }    
22.         
23.     var clothes = new Make('suit', 100, 32, 'black');    
24.     clothes.alertMsg();  
25. </script>    

            3) 프로토타입 체이닝
               - 프토로타입 체인     상위의 프로토타입 객체들과 연결된 프로토타입
                                           링크들의 집합
               - 프로토타입 체이닝  프로토타입 체인을 따라 상위 프로토타입 객체를
                                           차례로 검색하는 행위