프로토타입 체인

1. 상속 (extends, super)

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

  introduce() {
    console.log(`저의 이름은 ${this.name}이고 나이는 ${this.age}입니다.`);
  }
}

class Student extends Human {
  constructor(name, age, score) {
    super(name, age);
    this.score = score;
  }

  study() {
    console.log(`${this.name}은 공부 중입니다!`);
  }

  getScore() {
    super.introduce();
    console.log(`${this.name}의 성적은 ${this.score}점입니다!`);
  }
}

const gildong = new Human("gildong", 20);
const john = new Student("john", 15, 98);

gildong.introduce(); //저의 이름은 gildong이고 나이는 20입니다.
john.getScore(); // 저의 이름은 john이고 나이는 15입니다. john의 성적은 98점입니다!

 위의 코드에는 Human, Student라는 두 가지 클래스가 있다. 그런데, Student에 처음 보는 것이 두 가지 있다. 그것은 바로 extends와 super이다. 이것들은 무슨 상황에서 사용하는 것들인가. extends와 super는 상속과 관련된 키워드이다. 우선, extends는 클래스를 상속할 때 이용한다. 예를 들어, 기본적인 사람 클래스가 있다고 하자. 그리고 이 사람을 기반으로 하는 학생, 선생, 의사가 있을 수 있다. 이 때, 사람을 기반으로 한 다른 것들을 구현할 때 이용하는 키워드가 extends이다. 위에서 Student는 Human을 상속받은 것으로, Human을 상속받았기 때문에 Human의 속상(name, age)와 메소드(introduce)를 이용할 수 있다. 그리고 super는 부모 클래스의 것들을 호출하고 싶을 때 이용할 수 있다. 예를 들어, Student의 constructor 안의 super를 이용해 Human의 생성자를 이용할 수 있으며 getScore의 super.introduce()를 이용해 부모 클래스의 introduce 메소드를 이용할 수 있다.

 

---

2. 프로토타입 체인

 클래스는 extends를 이용해 상속하고 상속받을 수 있다. 그리고 이는 내부적으로는 프로토타입 체인을 통해 상속이 이뤄진다. 위에서 Student가 Human의 메소드를 이용할 수 있었는데, 이 역시 프로토타입 체인 덕분에 가능하다. 기능에 있어 체인이 이용되는 모습을 예를 들어 보자. 만약 위의 Student 클래스의 john이 john.introduce()를 실행한다고 하자. 우선, 객체 john에 introduce가 있는지 확인하는데 없다. 그렇다면 john의 프로토타입인 Student.prototype에서 메소드를 확인하는데, 역시 없다. 이제는 extends를 통해 만들어진 Student.Prototype의 프로토타입인 Human.prototype을 확인하는데 여기에는 introduce가 있다. 이런 식으로 프로토타입 체인을 통해 각 속성, 메소드를 이용할 수 있다. 이는 '__proto__'를 통해서도 확인할 수 있다.

console.log(john.__proto__); // Human {}

 

 

 

---

참고: https://ko.javascript.info/class-inheritance