25장 클래스(3)

* 아래 내용은 이웅모 저자님의  모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다.

   저작권에 문제가 된다면 삭제하도록 하겠습니다.

 

 

8. 상속에 의한 클래스 확장

8.1 클래스 상속

상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다.

class Animal {

  eat() { return 'eat'; }
  walk() { return 'walk'; }
}

// 상속을 통해 Animal 클래스를 확장한 Dog 클래스
class Dog extends Animal {
  wag() { return 'wag'; }
}

const dog = new Dog();

console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true

console.log(dog.eat());  // eat
console.log(dog.walk()); // walk
console.log(dog.wag());  // wag

출처 : https://wayhome25.github.io/python/2017/02/26/py-16-inheritance/

상속에 의한 클래스 확장은 코드 재사용 관점에서 매우 유용하다.

 

클래스는 상속을 통해 다른 클래스를 확장할 수 있는 문법인 extends 키워드가 기본적으로 제공된다.

 

8.2 extends 키워드

extends 키워드를 사용하여 상속받을 클래스를 정의한다.

// 수퍼(베이스/부모)클래스
class Base {}

// 서브(파생/자식)클래스
class Derived extends Base {}

상속을 통해 확장된 클래스를 서브 클래스라고 부르고, 서브 클래스에게 상속된 클래스를 수퍼클래스라 부른다.

 

수퍼클래스와 서브클래스의 프로토타입 체인은 다음과 같다.

출처 : https://poiemaweb.com/es6-class

수퍼클래스와 서브클래스는 인스턴스의 프로토타입 체인뿐 아니라 클래스 간의 프로토타입 체인도 생성한다. 이를 통해 프로토타입 메서드, 정적 메서드 모두 상속이 가능하다.

 

8.3 동적 상속

extends 키워드는 클래스뿐만 아니라 생성자 함수를 상속받아 클래스를 확장할 수도 있다. 단, extends 키워드 앞에는 반드시 클래스가 와야 한다.

// 생성자 함수
function Base(a) {
  this.a = a;
}

// 생성자 함수를 상속받는 서브클래스
class Derived extends Base {}

const derived = new Derived(1);
console.log(derived); // Derived {a: 1}

 

extends 키워드 다음에는 클래스뿐만이 아니라 [[Construct]] 내부 메서드를 갖는 함수 객체로 평가될 수 있는 모든 표현식을 사용할 수 있다.

function Base1() {}

class Base2 {}

let condition = true;

// 조건에 따라 동적으로 상속 대상을 결정하는 서브클래스
class Derived extends (condition ? Base1 : Base2) {}

const derived = new Derived();
console.log(derived); // Derived {}

console.log(derived instanceof Base1); // true
console.log(derived instanceof Base2); // false

 

8.4 서브 클래스의 constructor

서브클래스에서 constructor를 생략하면 클래스에 다음과 같은 constructor가 암묵적으로 정의된다.

constructor(...args) { super(...args); }

 

8.5 super 키워드

super를 호출하면 수퍼클래스의 constructor를 호출한다.

super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다.

 

super 호출

super를 호출하면 수퍼클래스의 constructor를 호출한다.

// 수퍼클래스
class Base {
  constructor(a, b) { 
    this.a = a;
    this.b = b;
  }
}

// 서브클래스
class Derived extends Base {
  constructor(a, b, c) { 
    super(a, b);
    this.c = c;
  }
}

const derived = new Derived(1, 2, 3);
console.log(derived); // Derived {a: 1, b: 2, c: 3}

super를 호출할 때 전달한 인자는 수퍼클래스의 constructor에서 사용된다.

 

super를 호출할 때 주의사항은 다음과 같다.

⓵ 서브클래스에서 consturctor를 생략하지 않는 경우 서브클래스의 constructor에서는 super를 반드시 호출해야 한다.

⓶ 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다.

⓷ super는 반드시 서브클래스의 constructor에서만 호출한다.

 

super 참조

메서드 내에서 super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다.

 

⓵ 서브클래스 프로토타입 메서드 내에서 super.sayHi는 수퍼클래스의 프로토타입 메서드 sayHi를 가리킨다.

// 수퍼클래스
class Base {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    return `Hi! ${this.name}`;
  }
}

// 서브클래스
class Derived extends Base {
  sayHi() {
    // super.sayHi는 수퍼클래스의 프로토타입 메서드를 가리킨다.
    return `${super.sayHi()}. how are you doing?`;
  }
}

 

⓶ 서브클래스의 정적 메서드 내에서 super.sayHi는 수퍼클래스의 정적 메서드 sayHi를 가리킨다.

// 수퍼클래스
class Base {
  static sayHi() {
    return 'Hi!';
  }
}

// 서브클래스
class Derived extends Base {
  static sayHi() {
    // super.sayHi는 수퍼클래스의 정적 메서드를 가리킨다.
    return `${super.sayHi()} how are you doing?`;
  }
}

 

 

 

 

Reference

- 이웅모 ,  모던 자바스크립트 Deep Dive , 위키북스 , 2020