클래스 상속, getters와 setters

class 문법으로 상속

• 자바스크립트에서는 extends와 super 키워드를 이용해서 상속을 구현할 수 있다.
• 하위 클래스를 만드려면 Javascript에서 extends 키워드를 통해 상속 받을 클래스를 명시한다.

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

  this.age = age;
  this.gender = gender;
  this.interests = interests;
  // subject and grade are specific to Teacher
  this.subject = subject;
  this.grade = grade;
  }
}

• super() 연산자를 정의하면 코드를 조금 더 읽기 쉬워진다. 이는 상위 클래스의 생성자를 호출하며 super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드이다.

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;
  }
}

- this와 super

클래스 안에서 쓰이는 this는 클래스의 프로퍼티를 정의한다. 자식 클래스가 상속받은 함수가 실행될 때, 그 함수가 부모 클래스에서 받은 함수더라도 this는 프로토타입의 영향을 받지 않으며 this가 쓰이고 있는 자식 클래스를 가리킨다.

자식 클래스에서 this를 이용하여 새로운 프로퍼티를 부여하거나 상속받은 프로퍼티를 수정하고 싶다면 먼저 super()를 이용하여 부모 클래스의 기존 프로퍼티 값을 호출해야 한다.

자식 클래스에서 생성자 함수(constructor)가 실행되면, 생성자 함수는 빈 객체를 만들고 this가 될 객체를 할당하는 일을 부모 클래스의 생성자가 처리해주기를 기대한다. 그렇기 때문에 super()를 호출해서 부모 클래스의 생성자를 실행해주어야만 this가 될 객체가 만들어지고, this를 사용할 수 있게 된다.

- super

-부모 클래스의 함수를 호출할 때 사용된다.
-생성자 함수 내에서 super 키워드는 한 번만 사용할 수 있다.
-생성자 함수 내에서 this 키워드가 나오기 전에 사용돼야 한다.
-생성자 함수 내에서 super를 호출하면 부모 클래스의 생성자 함수를 호출한다.

Getters와 Setters

-Teacher 예제에서 인스턴스를 생성하기 전에는 어떤 과목을 가르칠지 아직 모른다. 학기 도중에 가르치는 과목이 변경될 수도 있다.
-이런 상황에 getter/setter가 필요.
-Getter와 setter는 쌍으로 동작한다. Getter가 현재 값을 반환한다면 그에 대응하는 setter는 해당하는 값을 변경한다.

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;
  }
}

-subject 속성에 대해 getter와 setter가 생김
-snape 객체의 _subject 속성 값을 보려면 snape._subject를 실행
-_subject에 새 값을 할당하려면 snape._subject="new value"를 실행

// Check the default value
console.log(snape._subject) // Returns "Dark arts"

// Change the value
snape._subject="Balloon animals" // Sets subject to "Balloon animals"

// Check it again and see if it matches the new value
console.log(snape._subject) // Returns "Balloon animals"