본문 바로가기

Javascript

JavaScript(1) - 캡슐화와 상속

1. 캡슐화

자바스크립트에서 캡슐화란 잘못 사용될 수 있는 객체의 특정 부분을 사용자가 직접 사용할 수 없게 막는 기술이라고 할 수 있다. 캡슐화를 구현할때는 클로저를 사용해서 구현하는게 보편적이다.

<script>
		function Ractangle(w, h){
			this.width = w;
			this.height = h;
			
			this.getWidth = function(){
				return width;
			}
			this.getHeight = function(){
				return height;
			}
			this.setWidth = function(w){
				if(w < 0){
					throw '길이는 음수일 수 없습니다.';
				}else{
					this.width = w;
				}
			}
			this.setHeight = function(h){
				if(h < 0){
					throw '길이는 음수일 수 없습니다.';
				}else{
					this.height = h;
				}
			}
			
			this.getArea = function(){
				return this.width * this.height;
			}
		}
		
		var ractangle = new Ractangle(3, 5);
		ractangle.setWidth(6);
		ractangle.setHeight(-3);
		alert(ractangle.getArea());
	</script>

이런식으로 사용자가 아예 음수를 입력하지 못하게끔(음수를 입력하면 페이지에서 에러를 발생시킨다)해서 캡슐화를 할 수 있다. 사용자는 setOOO을 이용해서만 길이를 설정할 수 있기 때문에 음수가 들어갈 일은 없다. getter, setter자체를 만드는것이 캡슐화가 아니고, 만일의 상황이나 특정상황을 대비해서 메서드나 속성을 사용하지 못하게끔 숨겨놓는 것이 바로 캡슐화이다.

2. 상속

상속은 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만들 수 있게 해주는 것을 뜻한다. 자바에서의 상속과 거의 동일한 개념으로 상속받은 객체나 생성자함수는 상속하는 객체, 생성자 함수의 특성을 모두 가지고 있다.

<script>
		function Ractangle(w, h){
			this.width = w;
			this.height = h;
			
			this.getWidth = function(){
				return width;
			}
			this.getHeight = function(){
				return height;
			}
			this.setWidth = function(w){
				if(w < 0){
					throw '길이는 음수일 수 없습니다.';
				}else{
					this.width = w;
				}
			};
			this.setHeight = function(h){
				if(h < 0){
					throw '길이는 음수일 수 없습니다.';
				}else{
					this.height = h;
				}
			};
		}
			
		Ractangle.prototype.getArea = function(){
			return this.width * this.height;
		}	
	</script>
	<script>
		function Square(length){
			this.base = Ractangle;
			this.base(length, length);
		}
		Square.prototype = Ractangle.prototype;
		
		var rectangle = new Ractangle(5, 7);
		var square = new Square(5);
		
		alert(rectangle.getArea() + " : " + square.getArea());
	</script>

자바스크립트에서 상속이 됐다 안됐다를 판단하는 기준은 정확하지 않다. 오로지 한가지 기준은 instanceof를 사용해 true를 출력하는지 확인하는 방법뿐이다.

'Javascript' 카테고리의 다른 글

JavaScript(3) - 내장 객체(Array)  (0) 2019.04.17
JavaScript(2) - 내장 객체(Object, String)  (0) 2019.04.17