[🐱 자바스크립트] 상속 ( Inheritance)

자바스크립트의 상속

🍎 상속의 필요성 -> 기능 확장

개발을 하다 보면 기존에 있는 기능을 가져와 추가적으로 확장해야 하는 경우 필요로 한다.
이때 기존의 기능을 가진 클래스를 부모 클래스, 추가 기능을 구현하여 확장된 클래스를 자식클래스 로 통칭한다.

자바스크립트 상속은 다음과 같은 방법들로 구현 및 사용할 수 있다.

✅ prototype chain 형태로 직접 구현
✅ extends 키워드 사용
✅ super 키워드 사용

---

🍎 prototype chain 형태로 직접 구현

prototype chain을 통한 자바스크립트의 상속이 어떻게 이뤄지는지 확인해보자.

상속 예제

function Ultra(){}
Ultra.prototype.ultraProp = true;

function Super(){}
Super.prototype = new Ultra();

function Sub(){}
Sub.prototype = new Super();

var o = new Sub();
console.log(o.ultraProp) // true

Ultra, Super, Sub 세개의 생성자가 정의되어 있다.

var o = new Sub();
서브 객체(o) 를 만들었을때 그 객체의 ultraProp 프로퍼티에 접근하면 true가 나온다.

하지만 코드를 살펴보면 Sub는 ultraProp 를 갖고 있지 않다.
Sub의 부모인 Super, Super의 부모인 Ultra가 갖고 있는 값이다.

즉, Ultra (최상위) > Super > Sub
Sub는 Super를 상속받고, Super는 Ultra를 상속받는 셈이다.

따라서 Sub에 Ultra 프로퍼티로 접근했을때,
자바스크립트는 실행 과정 중에 Sub에 정의가 안되있는 값이니, 자동으로 super에 그 값을 갖고 있는지 확인한다.

이와같이 부모 생성자를 상속받기 때문에 자식 생성자에서는 상속받은 값을 사용할 수 있게 된다.

결국 prototype 프로퍼티의 호출이 상위 클래스에서 연쇄적으로 작용하면서 체인 형태를 이룬 것을 확인할 수 있다.
이를 prototype chain 으로 부른다.

상속 예제 2

const Ultra = {
	ultraProp : true
};

const Super = {}
//Super.prototype = new Ultra();
Super.__proto__ = Ultra;

const Sub = {}
//Sub.prototype = new Super();
Sub.__proto__ = Super;


console.log(Sub.ultraProp) // true

다음과 같이 자식의 프로토타입 값에 __proto__ 키워드를 통해 직접 부모를 할당해주는 방법도 있다.

---

🍎extends 키워드의 사용

extends 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용한다.

예시) extends Date

class DateFormatter extends DateFormatter { 

  getFormattedDate() {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return `${this.getDate()}-${months[this.getMonth()]}-${this.getFullYear()}`;
  }

}

console.log(new DateFormatter('August 19, 1975 23:15:30').getFormattedDate());
// expected output: "19-Aug-1975"

자식 클래스(DateFormatter) 옆에 extends 키워드를 덧붙여 부모 클래스(DateFormatter) 를 확장하였다.

• 내장 객체 (Number, BigInt, Math, Date 등 )의 확장도 가능하다.

---

🍎super 키워드의 사용

super 키워드는 부모 오브젝트의 함수(부모 생성자 함수)를 호출할 때 사용한다.

예시 ) super(인자값1, 인자값2);

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다.

    // 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다.
    // Polygon의 길이와 높이를 넘겨줍니다.
    super(length, length);

    // 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야
    // 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }
}

• 자식 클래스 내부에서 부모클래스의 생성자함수를 호출하여 값을 넘겨준다.
  ( 이 때 super가 먼저 호출되지 않은 경우 참조 오류가 발생한다.)

• 부모 클래스의 속성을 삭제할 경우 ReferenceError오류가 발생한다.

  ---

  [출처] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/extends
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/super