스펜서 개발블로그

#14. 캡슐화와 상속(Encapsulation and Inheritance) 본문

Front-End/JavaScript

#14. 캡슐화와 상속(Encapsulation and Inheritance)

스펜서 2021. 4. 19. 21:05

캡슐화

 

생성자 함수에서 속성 선언 시 this 키워드를 사용하지 않고 지역변수로 선언한 뒤, sett와 getter 메소드를 작성할 때 this를 사용한다.

-> 클로저를 활용한다. (지역변수를 지우지 않고 사용하는 기능)

 

 

<캡슐화 방법>

 

        // 1. 매개변수 생성자 생성
        function GirlGroup(gn, mc, m) {
        
        	// 2. 변수 선언
            var groupName = gn;
            var memberCount = mc;
            var members = m;

            // 3. this.를 이용하여 setter / getter 생성
            this.getGroupName = function() {
                return groupName;
            }
            this.getMemberCount = function() {
                return memberCount;
            }
            this.getMembers = function() {
                return members;
            }
            
            this.setGroupName = function(gn) {
                groupName = gn;
            }
            this.setMemberCount = function(mc) {
                // 특정 조건에만 수정할 수 있도록 조건을 걸어줌
                if(members.length != mc) {
                    // 예외처리
                    throw '멤버 수가 틀립니다. 다시 확인해주세요.';
                } else {
                    memberCount = mc;
                }
            }
            this.setMembers = function(m) {
                members = m;
            }
        }

 

 

상속

 

다른 객체를 상속받아서 사용하는 것으로, 속성으로 객체를 추가하거나, call 메소드를 이용하는 방법 두 가지로 사용이 가능하다.

 

<상속의 두 가지 사용 방법>

 

        // 1. 매개변수 생성자 생성
        function Book(t, p, dr) {
			// 2. 변수 선언
            var title = t;
            var price = p;
            var discountRate = dr;
			
            // 3. this를 이용한 getter/setter 생성
            this.getTitle = function() {
                return title;
            }
            this.getPrice = function() {
                return price;
            }
            this.getDiscountRate = function() {
                return discountRate;
            }
			
            this.setTitle = function(t) {
                title = t;
            }
            this.setPrice = function(p) {
                if(p < 0) {
                    throw '가격이 어떻게 마이너스냐? 사면 돈줄래?';
                } else {
                    price = p;                    
                }
            }
            this.setDiscountRate = function(dr) {
                if(dr < 0) {
                    throw '할인율이 마이너스면 말이 되니? 멍청아!!!';
                } else {
                    discountRate = dr;
                }
            }
        }
		
        // 3. 프로토 타입을 이용하여 상속 (객체들이 공유함)
        Book.prototype.getSellPrice = function() {
            return this.getPrice() - (this.getPrice() * this.getDiscountRate());
        }
		
        // 4. 프로토 타입을 이용하여 생성한 getSellPrice 출력
        function test2() {
            var book1 = new Book('자바의 정석',35000,0.15);
            alert("title : " + book1.getTitle() + "\n" + book1.getSellPrice() + "원");
        }

 

'Front-End > JavaScript' 카테고리의 다른 글

#21. 정규 표현식 (Regualr Expressions)  (0) 2021.04.21
Comments