🔍 Prototype Chain

객체 지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때, prototype chain 사용한다.

모든 객체들은 메서드와 속성들을 상속 받기 위한 템플릿으로 프로토타입 객체를 가지며, 그 프로토타입 객체 또한 상위 프로토타입 객체로부터 상속을 받을 수 있고, 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인이라고 부르며, 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 한다. -MDN

👀 예시

학생(Student)과 사람(Human)이라는 class가 각각 존재한다고 사정해보자.

Human class의 메서드와 속성을 객체로 구현하면 아래와 같다.

let kimcoding = new Human('김코딩', 30);

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

학생은 사람이기 때문에, Student class는 Human class의 메서드를 상속받을 수 있다.
일반적인 사람의 특징 외의 학생에 적합한 특징을 필요로 한다. => 상속받은 메서드(사람의 특징) + 추가 메서드(학생에 적합한 특징)

Student class의 메서드와 속성을 객체로 구현하면 아래와 같다.

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

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

위의 예시에 따르면, parhacker는 Student이며, 사람이기 때문에 Human class의 속성(age, gender)과 메서드( sleep( ), eat( ) )을 상속받을 수 있다.



⭐ JavaScript에서는 extends와 super 키워드를 이용해서 상속을 구현할 수 있다.

✔ extends와 super 키워드로 상속 구현

아래는 위의 예시를 바탕으로 재작성된 Human class 코드이다.

class Human{
  constructor(age, gender){
    this.age = age;
    this.gender = gender;
  }
  sleep(){
    console.log(`${this.age}세 ${this.gender} A씨는 잠을 잡니다.`);
  };
  eat(){
    console.log(`${this.age}세 ${this.gender} A씨는 밥을 먹습니다.`);
  };
}

위에서 사람을 나타내는 Human class를 만들었고, 해당 class는 일반적인 사람이 가지는 특징들을 나열하고 있다.

아래는 Human class를 상속받은 Student class의 코드이다. 이 작업을 하위 클래스 생성이라고 한다.

class Student extends Human{ //extends
  constructor(age, gender, subject, grade){
  super(age, gender); //super
    // 추가된 속성(학생의 특징)
    this.subject = subject;
    this.grade = grade;
  }
  // 추가된 속성
  learn(){
    console.log(`${this.age}세 ${this.gender} A씨는 ${this.subject}을(를) 공부합니다.`);
  }
  test(){
    console.log(`${this.subject}의 평점은 ${this.grade} 입니다.`)
  }
}

Student class의 instance를 생성하면, Student와 Human 양 쪽의 속성과 메서드를 사용할 수 있다.

let kim = new Student( 20,'여성','객체 지향 프로그래밍','B+');

kim.sleep(); // '20세 여성 A씨는 잠을 잡니다.'
kim.eat(); // '20세 여성 A씨는 밥을 먹습니다.'
kim.learn(); // '20세 여성 A씨는 객체 지향 프로그래밍을(를) 공부합니다.'
kim.test(); // '객체 지향 프로그래밍의 평점은 B+ 입니다.'

같은 속성을 가졌을 때 다른 값으로 덮어 씌워야 하기 때문에 생성자 함수 내에서 super는 this 키워드가 나오기 전에 사용돼야 한다.

✔ __proto__ 속성으로 상속 확인

DOM 과 프로토타입

브라우저에서 DOM을 이용하면 document.creaElement('div')로 새로운 div element를 만들 수 있다. 이렇게 생성된 div element는 HTMLEivElement라는 class의 instance이다.

DOM element는 innerHTML과 같은 속성들과 append()와 같은 메서드들이 있다.

따라서, 각각의 element가 속성, 메서드가 존재하므로, Element라는 공통의 부모가 있음을 알 수 있다.

화살표 방향은 부모를 가리키며, EvenTarget의 부모로는 모든 class의 조상인 Object가 있다.

아래의 코드를 실행하면 `div` element를 시작으로 프로토타입 체인의 과정을 볼 수 있다.

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

div.__proto__ // HTMLDivElement {…}
div.__proto__.__proto__ // HTMLElement {…}
div.__proto__.__proto__.__proto__ // Element {…}
div.__proto__.__proto__.__proto__.__proto__ // Node {…}
div.__proto__.__proto__.__proto__.__proto__.__proto__ // EventTarget {…}
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // {…} <- object
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // null

Reference:
코스 스테이츠
MDN: https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes