class의 이해

class의 관련 용어

---

클레스 : 차라는 것에 대한 추상화 ( increase(), value ) 쉽게 말해 빈 깡통 자동차

 

if 생성자를 통해 속성을 넣는다면, 

 

인스턴스: class를 바탕으로 만들어진 인스턴스 객체 ex) 아반떼  based on 차

 

 

프로토타입: 

 

생성자:

 

 

 

 

예시

---

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1

 

 

객체지향 프로그래밍의 등장

---

데이터에 접근하고 처리하는 방식에 대한 모형을 만듦. section1 에서는 기능(함수) 따로 데이터 관리 따로 하는 모습을 볼 수 있었으나 이것을 한 번에 관리하고 처리하면 코드 이해와 관리가 수월해짐.

 

 

 

사람이라는 class를 teacher로 확장하기

---

Person class

class Person {
  constructor(first, last, age, gender, interests) {
    this.name = {
      first,
      last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }

  greeting() {
    console.log(`Hi! I'm ${this.name.first}`);
  };

  farewell() {
    console.log(`${this.name.first} has left the building. Bye for now!`);
  };
}

 

 

teacher class로 상속

 

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    //Person() class의 속성 상속받기
    super(first, last, age, gender, interests);
	
    // subject and grade are specific to Teacher
    this.subject = subject;
    this.grade = grade;
  }
}

Getters와 Setters

생성한 클래스 인스턴스의 속성 값을 변경하거나 최종 값을 예측할 수 없는 경우가 있을 겁니다. Teacher 예제를 보면 인스턴스를 생성하기 전에는 어떤 과목을 가르칠지 아직 모릅니다. 학기 도중에 가르치는 과목이 변경될 수도 있구요.

이런 상황에 getter/setter가 필요합니다.

Teacher 클래스에 getter/setter를 추가해 봅시다. 마지막에 작성했던 예제를 그대로 사용해보죠.

Getter와 setter는 쌍으로 동작합니다. Getter가 현재 값을 반환한다면 그에 대응하는 setter는 해당하는 값을 변경합니다.

수정된 Teacher 클래스는 아래와 같습니다:

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);
    // subject and grade are specific to Teacher
    this._subject = subject;
    this.grade = grade;
  }

  get subject() {
    return this._subject;
  }

  set subject(newSubject) {
    this._subject = newSubject;
  }
}