Javascript - 캡슐화 (Encapsulation)

28 Jul 2018 • Javascript
  • 캡슐화 : 정보 은닉하기
  • 객체의 자료와 행위를 하나로 묶고, 실제 구현내용을 외부에 감춘다.
  • 캡슐화 규칙 : 속성명을 밑줄로 시작하는 것
캡슐화 방법 1. 밑줄(_)로 시작하는 변수는 ‘절대 건드리지 말자’라는 약속!
  • 한계점 : 개발자들의 언어 규칙일 뿐, 실제 자바스크립트 내에서 제한 할 수는 없음.

1.1 Rectangle 생성자 함수 선언

function Rectangle(width, height){
  this._width = width; // width 변수는 건드리지 말자.
  this._height = height; // height 변수도 건드리지 말자.
}

1.2 메서드(프로토타입) 선언

Rectangle.prototype.getArea = function (){
  return this._width * this._height;
}

1.3 인스턴스 생성 및 출력

var rectangle = new Rectangle(5,7);
document.write('Area : ' + rectangle.getArea() );	// Area : 35

See the Pen Javascript 캡슐화 1 : 밑줄로 시작하는 속성명 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

캡슐화 방법 2. 클로저를 활용하여 외부에서 변수에 접근할 수 없도록 하자.
  • Getter / Setter 이용하여 캡슐화하기
  • 내부에 코드를 작성하여 원래 변수를 보호하는 목적
  • 자기 자신도 직접 접근이 불가능하기 때문에 getter 를 이용하여 접근
  • 한계점 : 생성자 함수 안에 Getter/Setter 함수를 선언하므로 약간의 메모리 낭비가 발생
  • 하지만, 완벽한 캡슐화가 가능하다.

2.1 Rectangle 생성자 함수 선언
생성자 함수 안에 Getter/Setter 선언

function Rectangle (width, height) {
  var _width = width;
  var _height = height;

  // 2.1.1 Getter
  	this.getWidth = function () { return _width; }
  	this.getHeight = function () { return _height; }

  // 2.1.2 Setter : 0보다 작은 수를 입력하면 값 세팅 불가 !
  	this.setWidth = function (value) {
    	if(value<=0){ return alert("0보다 작은 값은 넣을 수 없습니다."); }
    	_width=value;
  	}

  	this.setHeight = function (value) {
 		 if(value<=0){ return alert("0보다 작은 값은 넣을 수 없습니다."); }
    	_height=value;
   }

}

2.2 메서드(프로토타입) 선언
자기 자신도 직접 접근이 불가능 –> getter 를 이용하여 접근

Rectangle.prototype.getArea = function (){
  return this.getWidth() * this.getHeight();
}

2.3 인스턴스 생성 및 출력

var rectangle = new Rectangle(5,7);
rectangle.setHeight(10); // 값 변경하기
document.write('Area : ' + rectangle.getArea() );	// Area : 50

See the Pen Javascript 캡슐화 2 : 클로저 사용 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

캡슐화 방법 3. 혼합하기.
  • (방법1) + (방법2) 혼합하여 사용
  • 기존의 클로저 방식의 메모리 낭비 문제를 해결하기 위한 타협점
  • 프로토 타입으로 캡슐화하기

3.1 Rectangle 생성자 함수 선언

function Rectangle (width, height) {
  this._width = width;
  this._height = height;
}

3.2 Getter/Setter 를 프로토타입으로서 선언
리턴 타입을 this.속성명 형태로 변환

  Rectangle.prototype.getArea = function (){
    return this._width * this._height;
  }

  Rectangle.prototype.getWidth = function () {
    return this._width;
  }

  Rectangle.prototype.getHeight = function () {
    return this._height;
  }

  Rectangle.prototype.setWidth = function (value) {
    if(value<=0) { return alert("0보다 작은 값은 넣을 수 없습니다."); }
    this._width = value;
  }

  Rectangle.prototype.setHeight = function (value) {
  if(value<=0) { return alert("0보다 작은 값은 넣을 수 없습니다."); }
    this._height = value;
   }

2.3 인스턴스 생성 및 출력

var rectangle = new Rectangle(5,7);
rectangle.setHeight(20);	// 값 변경하기
document.write('Area : ' + rectangle.getArea() ); // Area : 100

See the Pen Javascript 캡슐화 3 : 혼합 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

Comments

Related Posts