JavaScript 공부 - 프로토타입 체인

프로토타입 체인은 프로토타입이 단방향 링크드 리스트 형태로 연결되어 있는 상속구조를 말한다. 즉 객체지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때 이러한 프로토타입 체인을 사용하게 된다.
예를 들어 이전에 객체지향 프로그래밍 포스트에서 살짝 언급했던 상속 예시 중에서 사람 -> 학생을 다시 예를 들어 설명한다면

let kim = new Human('김', 30);
//속성
kim.age;
kim.gender;
//메서드
kim.eat();
kim.sleep();

위는 사람의 메서드와 속성을 객체로 표현한 것이다.

let park = new Student('박', 25);
//속성
park.grade;
//메서드
park.learn();

위는 학생의 메서드와 속성을 객체로 표현한 것이다.
학생은 학생이기 이전에 사람이므로, 사람의 기본적인 속성과 메서드를 상속받는다. 여기에 추가로 학년이나, 수강과목 등의 부가적인 특징이 들어가는 것이다.
이러한 JavaScript에서의 상속단계는 extends와 super 등을 이용하여 구현할 수 있다.

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

조금 더 자세하게 표현된 Person 클래스이다. 여기서 Person의 속성과 메서드를 상속받아야 하는 Teacher 클래스를 만든다면

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);    //상속받기

    // subject와 grade는 Teacher에만 있음
    this.subject = subject;
    this.grade = grade;
  }
}

이러한 식으로 간단하게 상속이 구현된다!

이렇게 물고 물리는 부모-자식 간의 상속관계는 인스턴스의 __proto__를 활용하면 쉽게 확인할 수 있다. 부모 클래스는 물론 부모의 부모 클래스까지..!

let div = document.createElement('div');

이러한 Element를 생성했다고 가정해보자. 이렇게 생성된 Element는 HTMLDivElement 클래스의 인스턴스이다. 그런데 여기서 HTMLDivElement의 부모 클래스가 무엇인지 알고싶다면 어떻게 해야할까?

div.__proto__;

이러한 방식으로 div 뒤에 __prototype__을 계속해서 붙이면 부모클래스, 부모의 부모클래스까지 알아낼 수 있다.

계속 해본 결과 7번째 부터는 Null값이 나오고 8번째 부터는 타입에러가 발생하였다...😂😂

이렇게 프로토타입 체인과 __proto__의 쓰임새에 대해서 알아보았다 🫡