[JS ES6] 객체지향4. ES6방식으로 안쉽게 구현하는 상속기능 (class)

ES6의 class 키워드는 기존의 생성자 함수와 prototype 기반 상속 기능을 좀 더 직관적이고 가독성 좋게 구현할 수 있게 해줍니다. ES6 class의 기본 문법과 상속 기능 구현 방법을 알아봅니다.

---

1️⃣ ES6 class 기본 문법

• class 키워드를 사용하면 기존의 function 부모(){} 문법과 동일하게 객체를 생성하는 "기계(생성자 함수)"를 만들 수 있습니다.
• constructor 메서드는 객체 생성 시 실행되는 특별한 메서드로, 초기 속성을 설정하는 역할을 합니다.

예제: 기본 class와 constructor

class 부모 {
  constructor() {
    this.name = 'Kim';
  }
}

const 자식 = new 부모(); // 새 객체 생성

• 설명:
  • constructor() 내부에서 this.name = 'Kim'을 통해 새 객체의 속성 name에 값을 할당합니다.
  • 기존 생성자 함수와 동일하게 new 키워드를 사용해 객체를 생성합니다.

---

2️⃣ 상속 가능한 함수 추가 방법

ES6 class에서는 두 가지 방식으로 상속 가능한 메서드를 추가할 수 있습니다.

방법 1: constructor 내부에서 함수 직접 할당

class 부모 {
  constructor() {
    this.name = 'Kim';
    this.sayHi = function() {
      console.log('hello');
    }
  }
}

const 자식 = new 부모();
자식.sayHi(); // "hello" 출력

• 설명:
  • 이 방식은 각 객체 인스턴스마다 sayHi 함수를 개별적으로 생성합니다.
  • 객체 생성 시마다 함수가 새로 할당되므로 메모리 사용 측면에서는 비효율적일 수 있습니다.

방법 2: 클래스 내부에 메서드 정의 (prototype에 추가)

class 부모 {
  constructor() {
    this.name = 'Kim';
  }
  sayHi() {
    console.log('hello');
  }
}

const 자식 = new 부모();
자식.sayHi(); // "hello" 출력

• 설명:
  • 클래스 내부에 메서드를 정의하면 해당 메서드는 자동으로 클래스의 prototype에 추가됩니다.
  • 모든 인스턴스가 해당 메서드를 공유하므로 메모리 효율성이 높습니다.
  • 참고: 기존 방식대로 부모.prototype.sayHi = function(){}와 같이 작성할 수도 있습니다.

---

3️⃣ Object.getPrototypeOf() 사용하기

• Object.getPrototypeOf(객체)
  • 전달된 객체가 어떤 prototype을 상속받고 있는지 확인할 수 있는 내장 함수입니다.
  • 이는 __proto__와 유사한 역할을 하며, 객체의 상속 관계를 확인할 때 유용합니다.

---

4️⃣ constructor에 파라미터 추가하기

• 생성자 함수에 파라미터를 추가하여 동적으로 객체의 속성을 설정할 수 있습니다.

예제: 파라미터를 활용한 생성자

class 부모 {
  constructor(이름, 나이) {
    this.name = 이름;
    this.age = 나이;
  }
}

const 자식 = new 부모('Park', 30);

• 설명:
  • 생성 시 전달된 인자 'Park'와 30이 각각 name과 age에 할당됩니다.

---

5️⃣ prototype 내에 함수 여러 개 추가하기

클래스 내부에 여러 메서드를 정의하면, 모두 해당 클래스의 prototype에 추가됩니다.

예제: 여러 메서드 정의하기

class 부모 {
  constructor(이름, 나이) {
    this.name = 이름;
    this.age = 나이;
  }
  sayHi() {
    console.log('안녕');
  }
  sayHello() {
    console.log('안녕하세요');
  }
}

const 자식 = new 부모('Park', 30);
자식.sayHi();    // "안녕" 출력
자식.sayHello(); // "안녕하세요" 출력

• 설명:
  • sayHi와 sayHello 메서드는 부모 클래스의 prototype에 정의되어, 모든 인스턴스가 공통으로 사용할 수 있습니다.

---

📌 정리

• class 키워드는 기존의 생성자 함수와 prototype 방식을 좀 더 간결하게 표현할 수 있게 해줍니다.
• constructor는 객체 생성 시 초기 속성을 정의하는 역할을 하며, 파라미터를 통해 동적으로 값을 할당할 수 있습니다.
• 상속 가능한 함수는 constructor 내에서 직접 할당하거나, 클래스 내부에 메서드를 정의하는 두 가지 방식으로 추가할 수 있습니다.
• Object.getPrototypeOf()를 통해 객체가 어떤 prototype으로부터 상속받고 있는지 확인할 수 있습니다.