[JS] 프로토타입 체인

홍다희·2022년 7월 25일

프로토타입 체인

.prototype

함수 객체만 가지고 있는 프로퍼티다.
함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다.

클래스 상속

부모의 특성을 자식이 물려받는 것처럼 부모 클래스의 속성과 메서드를 자식 클래스가 상속받게 된다. 자바스크립트에서는 프로토타입 체인을 사용하여 상속을 구현한다.

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

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

학생은 학생인 동시에 사람이기도 한 것처럼 클래스 Student가 위의 클래스 Human을 상속받는다고 하면,

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

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

클래스 Student는 자신의 속성과 메서드 외에도 부모 클래스의 속성인 age, gender, 메서드인 eat, sleep 등을 사용할 수 있는 것이다.

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

extends

extends는 클래스를 다른 클래스의 자식으로 만들기 위해 사용한다.

class ChildClass extends ParentClass { ... }

super

super([arguments]); // 부모 생성자 호출
super.functionOnParent([arguments]);

super는 부모 클래스의 함수를 호출할 때 사용한다.

생성자 함수 내에서 쓰일때는, super 키워드는 한번만 사용 가능
this 키워드가 사용되기 전에 사용되어야 하며, 그렇지 않을 경우 Reference 에러 발생
생성자 함수 내에서 super를 호출하면 부모 클래스의 생성자 함수를 호출

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

위 예시는 Person 클래스다. extends와 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;
  }
}