23.01.16 - 프로토타입 체인

프로토타입 체인

상속

객체 지향 프로그래밍의 특성 중 하나.

부모 클래스가 자식 클래스에게 속성과 메서드를 물려주는 과정을 말한다.

그리고 이 상속 과정을 JavaScript에서 구현하기 위해, 프로토타입 체인을 사용한다.

 

프로토타입 체인

객체 생성자의 prototype 속성에 정의된 속성과 메서드들이 하위 객체 생성자의 prototype으로 상속되는 것. 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있게 해준다.

예를 들어 클래스 A로 생성한 인스턴스 A’에서 특정 메서드를 실행할 경우, 브라우저는 우선 A’에 해당 메서드를 갖고 있는지 체크한다.

없다면 A’의 프로토타입 객체(A의 프로토타입)에 메서드가 있는지 체크하고, 또 없다면 상위의 프로토타입 객체에 해당 메서드를 갖고 있는지 체크하고 있을 경우 해당 메서드를 호출한다.

프로토타입 체인은 이렇게 체인을 타고 올라가며 상위 객체의 내용에 접근할 수 있게 해준다.

 

extends, super를 사용한 상속 구현

// 부모 클래스
      class Person {
        constructor(name, age, gender) {
          this.name = name
          this.age = age
          this.gender = gender
        }

        greeting() {
          console.log(`내 이름은 ${this.name} 입니다.`)
        }

        farewell() {
          console.log(`${this.name} 는 작별인사를 했다.`)
        }
      }

      // 자식 클래스(하위 클래스) 생성
      class Teacher extends Person {
        // extends 키워드로 상속 받을 키워드 명시함
        constructor(name, age, gender, subject, grade) {
          super(name, age, gender) // super 키워드로 부모 클래스의 매개변수들 받아옴
          this.subject = subject
          this.grade = grade
        }

        teaching() {
          console.log(`${this.name} 선생님이 수업을 시작합니다.`)
        }

        homework() {
          console.log(
            `${this.name} 선생님이 ${this.subject} 과목의 숙제를 내주었습니다.`
          )
        }
      }

      let hailey = new Person('hailey', 20, 'female')
      let hannah = new Teacher('hannah', 30, 'female', 'English', 5)
      // 클래스 Person을 상속받은 클래스 Teacher의 인스턴스가 할당된 변수 hannah
      // hannah는 프로토타입 체인을 통해 클래스 Person의 메서드도 사용할수있다

 

DOM과 프로토타입

document.createElement('div')로 생성된 div 엘리먼트의 부모는 클래스 HTMLDivElement이다.

DOM 엘리먼트에는 속성과 메서드가 있고, 이를 통해 Element라는 공통의 부모가 있음을 알 수 있다.

인스턴스의 .__proto__ 혹은 Object.getPrototypeOf()를 사용해 부모 클래스, 또는 부모의 부모 클래스의 프로토타입을 탐색할 수 있다.