프로토타입 체인

JavaScript에서 구현할 때에는 프로토타입 체인을 사용합니다. 예시를 들기 위해, 학생(Student)과 사람(Human)이라는 클래스가 각각 존재한다고 가정하겠습니다. 클래스 Human의 메소드와 속성을 객체로 구현한다면, 다음과 같습니다.

 

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('홍코딩', 28);

// 속성
kimcoding.age;
kimcoding.gender;
// 메소드
kimcoding.eat();
kimcoding.sleep();

학생은 학생이기 이전에, 사람입니다. 따라서 클래스 Student는 Human의 기본적인 메소드를 상속받을 수 있습니다. 다만, 학생은 일반적인 사람의 특징에 추가적인 특징이 필요합니다. 예를 들면 다음과 같습니다.

let parkhacker = new Student('김해커', 22);

// 속성
parkhacker.grade;
// 메소드
parkhacker.learn();

자바스크립트에서는 extends 와 super 키워드를 이용해서 상속을 구현할 수 있습니다.

 

ECMAScript 2015 클래스

Inheritance in JavaScript - Web 개발 학습하기 | MDN

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!`);
  };
}

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

extends 키워드를 사용하여 클래스를 상속 받습니다.

 

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

부모 클래스의 생성자를 가져오기 위해서는 super()를 사용하여 호출해옵니다.

 

Getters and Setters

 

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

 

이런 상황에 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;
  }
}

• snape 객체의 _subject 속성 값을 보려면 snape._subject를 실행합니다.
• To show the current value of the _subject property of the snape object we can use snape._subject.
• _subject에 새 값을 할당하려면 snape._subject="new value"를 실행합니다.