[J] JavaScript & jQuery 공부하기 #15

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

17. 캡슐화와 상속

* 캡슐화
- 객체의 특정 속성이나 메소드를 외부에서 직접 접근해서 사용 할 수 없도록 가려주는 것
- 객체에 잘못된 값이 할당되는 것을 방지해 줌
- 외부에 불필요한 메소드를 숨김

* 캡슐화를 사용하지 않을 경우의 문제점
< script type="text/javascript">
function Dog(name, price, height, weight){
this.name=name;
this.price=price;
this.height=height;
this.weight=weight;
}

var dog1 = new Dog("푸들", 100, 1, 10);
dog1.price = -100 //가능
</ script>
> 개의 가격은 - 값을 가질 수 없으나 -100값이 가격으로
할당되기 때문에 잘못된 값이 할당된 것이다.

< script type="text/javascript">
function Car(name, velocity,company){
this.name = name;
this.velocity = velocity;
this.company = company;
}

var car1 = new Car("그랜저", 100, "현대");
car1.velocity = -100;
</ script>
> 자동차의 속도는 - 값이 될 수 없지만 -100값을
  설정했기 때문에 잘못된 값이 할당 된 것이다.

* 캡슐화 적용 방법
- 캡슐화를 위해 사용하는 부분에서 직접 접근할 수 없는 변수를 메소드내에 선언
< script type="text/javascript">
function Car (n,v,c){
var name = n;
var velocity = v;
var company = c;
}
</ script>

- setter 메소드로 변수 값을 할당, getter 메소드로 변수 값 반환
< script type="text/javascript">
this.getName = function(){
return name;
};
this.getVelocity = function(){
return velocity;
};
this.setName = function(value){
name=value;
};
this.setVelocity = function(value){
if(value < 0){
throw'길이는 음수일 수 없습니다.';
}
};
</ script>
> 이 부분에서 캡슐화 적용, 속도 값이 - 값이 할당 못 되게 함
> 잘못된 값이 인자로 넘어오면 에러 발생시킴

* 상속
- 자식 객체가 부모 객체의 메소드와 속성을 자기 자신이 정의 한 것처럼
상속 받아서 사용 할수 있는 기능

  - 상속의 예 : 사자는 포유류에 속함
   > 사자 객체의 생성자 함수를 정의하기 전에 포유류 객체의 생성자
   함수를 정의하고 사자 객체가 포유류 객체를 상속 받게 하면,
   사자 객체의 생성자를 정의할 때는 포유류의 기본적인 속성과
   메소드는 포유류 객체나 생성자에서 상속 받고 사자 객체에만
   존재하는 기능만 추가 정의하면 됨

  - 상속의 장점
   > 자식 객체 정의가 용이해짐
   > 관련 있는 자식 객체들을 정의할 때 부모 객체를 이용해 공통된 속성과 메소드를 정의할 수 있음
   > 예 : 사자, 고양이, 고래 등의 객체들을 정의하기 전에 포유류 객체를
    정의해 놓고 사자, 고양이, 고래 등 자식 객체들을 정의함

 * 상속의 적용
  < script type="text/javascript">
   function Car (name, velocity, company){
   this.name = name;
   this.velocity = velocity;
   this.company = company;

   this.getCarInfo = function(){
   return "name = " + this.name +".velocity = "
   + this.velocity +",company = " + this.company;
   };
   }
   function Taxi(fee,name, velocity,company){
   this.fee = fee;
   this.base = Car;
   this.base(name, velocity, company);
   }
  </ script>

 * 예제
  < script type="text/javascript">
  var dogs = [];

  function Dog(n, p, h, w) {
  var name = n;
  var price = p;
  var height = h;
  var weigt = w;

  this.getName = function(){
  return name;
  };
  this.getPrice = function(){
  return price;
  };
  this.getHeight = function(){
  return height;
  };
  this.getWeight = function(){
  return weigt;
  };
  this.setName = function(value){
  name = value;
  };

  this.setPrice = function(value){
  if (value < 0){
  throw '가격은 음수 일 수 없습니다.';
  } else {
  price = value;
  }
  };

  this.setHeight = function(value) {
  if (value < 0) {
  throw '키는 음수 일 수 없습니다.';
  } else {
  height = value;
  }
  };

  this.setWeight = function(value) {
  if (value < 0) {
  throw '몸무게는 음수 일 수 없습니다.';
  } else {
  weight = value;
  }
  };
  }

  Dog.prototype.toString = function(){
  return '이름 :' + this.getName() + ', 가격 : ' + this.getPrice() + ', 키 :'
  + this.getHeight() +', 무게 :' + this.getWeight() + '\n';
  }
  var flag = true;

  do {
  var n = prompt(1. 강아지 등록 2. 검색 3. 강아지 목록보기 4. 종료);
  switch (n) {
  case '1':
  var name = prompt('강아지이름을 입력하세요');
  var price = Number(prompt('강아지 가격을 입력하세요'));
  var height = Number(prompt('강아지 키를 입력하세요'));
  var weight = Number(prompt('강아지 무게을 입력하세요'));
  if (price > 0 && height > 0 && weight > 0) {
  var d = new Dog(name, price, height, weight);
  dogs.push(d);
  } else {
  alert('등록 실패');
  }
  break;
  case '2':
  var search = prompt('강아지이름을 입력하세요');
  var find = false;
  for ( var i in dogs) {
  if (dogs[i].getName() == search) {
  find = true;
  alert(dogs[i]);
  }
  }

  if(!find){
  alert('찾으시는 강아지가 없습니다.');
  }

  break;
   case '3':
    var output = '';
    for (var i = 0; i < dogs.length; i++){
    output += dogs[i].toString();
    }
    alert(output);
    break;
   case '4':
   flag = false;
   break;
  }
  } while (flag);
  </ script>