[자바스크립트 30] 프로토타입과 상속 3 - 클래스

// ES6의 class 문법을 constructor super extend 의 활용법과 함께 자세히 설명 부탁드려요!

 

ES6에서 도입된 class 문법은 기존의 프로토타입 기반 상속을 보다 명확하고 간결하게 표현할 수 있도록 해줍니다.

constructor, super, extend 키워드들이 이 문법의 주요 부분입니다.

 

1. constructor: 클래스의 생성자 메서드로, 객체가 생성될 때 호출됩니다. 이 메서드는 인스턴스를 초기화하는 코드를 포함하며, 인스턴스의 프로퍼티를 설정합니다.

class Person {
  constructor(name) {
    this.name = name;
  }
}

let person = new Person('John');
console.log(person.name); // 출력: John

 

2. super: 부모 클래스의 생성자 함수를 호출하는데 사용됩니다. 주로 자식 클래스의 constructor 내에서 사용되며, 부모 클래스가 정의한 프로퍼티나 메서드를 자식 클래스에게 상속할 수 있게 합니다.

class Employee extends Person {
  constructor(name, position) {
    super(name); // 부모 클래스의 constructor 호출
    this.position = position; // 자식 클래스의 프로퍼티 추가
  }
}

let employee = new Employee('John', 'Engineer');
console.log(employee.name); // 출력: John
console.log(employee.position); // 출력: Engineer

 

 

3. extends: 클래스가 다른 클래스를 상속받을 때 사용되는 키워드입니다. extends를 사용하면 부모 클래스의 프로퍼티와 메서드를 자식 클래스가 상속받게 됩니다.

class Manager extends Employee {
  constructor(name, position, department) {
    super(name, position); // 부모 클래스의 constructor 호출
    this.department = department; // 자식 클래스의 프로퍼티 추가
  }
}

let manager = new Manager('John', 'Engineer', 'IT');
console.log(manager.name); // 출력: John
console.log(manager.position); // 출력: Engineer
console.log(manager.department); // 출력: IT

이런 식으로 class, constructor, super, extends 등을 사용하면, 좀 더 명확하고 구조적인 방식으로 객체지향 프로그래밍을 할 수 있게 됩니다. 다만, 내부적으로는 여전히 프로토타입 기반의 상속을 사용하고 있으므로, 이 점은 잊지 않는 것이 좋습니다.