FE 기술/JavaScript

JavaScript) 상속

Rulu_ 2023. 4. 24. 14:05

상속

  • JS에서는 class 키워드를 지원하기 시작했으나 문법적인 양념일 뿐이며, 여전히 프로토타입 기반의 언어이다.
  • 상속 관점에서 JS의 유일한 생성자는 객체뿐.
  • 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 프로토타입 이 되는 다른 객체를 가리킴.
    • 그 객체의 프로토타입 또한 프로토타입을 가지고있고 무한반복
    • null을 프로토타입으로 가지는 오브젝트는 더 이상 프로토 타입이 없다고 정의
    • → 프로토타입 체인의 종점 역할
  • 이러한 점이 JS의 약점이자 강점이다.

 

프로토타입 체인을 이용한 상속

속성상속

  • JS 객체는 동적인 자기만의 속성과 프로토타입 객체에 대한 링크를 가짐
  • 객체의 속성에 접근하려 한다면 객체 자체 속성 뿐 아닌 프로토타입 체인의 종단까지 탐색함.
  • 객체의 속성에 값을 지정하면 “자기만의 속성”이 생김
    • getter/setter가 적용되는 속성이 상속되는 경우 예외적인 규칙이 적용

 

메소드 상속

  • JS는 객체의 속성으로 함수를 지정할 수 있고 속성 값을 사용하듯 사용가능
  • 상속된 함수가 실행 될 때, this 라는 변수는 상속된 오브젝트를 가르킴
    • 그 함수가 프로토타입의 속성으로 지정되었다고 하더라도..!

 

클래스 상속

  • 클래스를 다른 클래스로 확장 할 수 있다.
    • 키워드 extends 는 프로토타입을 기반으로 동작.
    • 클래스 문법은 extends뒤에 표현식이 와도 처리.
  • 메서드 오버라이딩: 키워드 super
    • super(...)는 부모 생성자를 호출하는데, 자식 생성자 내부에서만 사용가능
    • 화살표 함수에는 super 가 없다.
  • 객체를 만들 때 생성자(constructor) 함수를 사용. 생성자 함수는 new 연산자와 함께 호출되며, 객체를 생성하여 반환.
    • 상속 클래스의 생성자에선 반드시 super(...)를 호출

 

클래스 필드 오버라이딩

  • 부모 생성자는 자식 클래스에서 오버라이딩한 값이 아닌**, 부모 클래스 안의 필드 값을 사용**
  • 필드 초기화 순서
    • 아무것도 상속받지 않는 베이스 클래스는 생성자 실행 이전에 초기화됨
    • 부모 클래스가 있는 경우엔 super() 실행 직후에 초기화됨
  • 이런 문제 오버라이딩한 필드를 부모 생성자에서 사용할 때만 발생