[JavaScript] class로 상속 구현

class 기본 작성법

// ES6
class Person { // class 키워드와 함께 선언
    constructor(name, age, gender) {
    // 생성자 함수로 인스턴스 객체 생성 및 초기화
      this.name = name
      this.age = age
      this.gender = gender
    }

	// 메서드
    greeting() {
      console.log(`내 이름은 ${this.name} 입니다.`)
    }

    farewell() {
      console.log(`${this.name} 는 작별인사를 했다.`)
    }
}

 

constructor

다른 메서드 호출에 앞서서 인스턴스 객체를 초기화 할때 수행할 초기화 코드를 정의할 수 있다. 

constructor는 하나의 클래스에 오직 하나만 존재할 수 있다. 

 

// 기본 생성자
constructor() {}

// 다른 클래스를 상속하는 경우
constructor(...args) {
	super(...args);
}

클래스에 생성자를 정의하지 않으면 기본 생성자를 사용한다.

다른 클래스를 상속하는 경우 매개변수를 부모 클래스의 생성자로 전달한다. 

 

extends

하위 클래스를 만들때 class 선언과 함께 사용한다. 

class ChildClass extends ParentClass { ... }

 

super

부모 클래스의 함수를 호출할때 사용한다. 

super 키워드는 하나만 사용되거나, this 키워드가 사용되기 전에 호출되어야 한다. 

constructor(name, age, gender, subject, grade) {
  super(name, age, gender) // super 키워드로 부모 클래스의 매개변수들 받아옴
  this.subject = subject
  this.grade = grade
}

 

 

 

✅ 예제

// 부모 클래스
      class Person {
        constructor(name, age, gender) { // 초기값을 지정할 경우 매개변수를 넣지 않는다 
          this.name = name
          this.age = age
          this.gender = gender
        }

        greeting() {
          console.log(내 이름은 ${this.name} 입니다.)
        }

        farewell() {
          console.log(${this.name} 는 작별인사를 했다.)
        }
      }

      // 자식 클래스(하위 클래스) 생성
      class Teacher extends Person {
        // extends 키워드로 상속 받을 키워드 명시함
        constructor(name, age, gender, subject, grade) {
          super(name, age, gender) 
          // super 키워드로 부모 클래스의 속성들 받아옴
          // super는 this.~~보다 상위에 위치해야 오류나지 않는다 
          this.subject = subject
          this.grade = grade
        }

        teaching() {
          console.log(${this.name} 선생님이 수업을 시작합니다.)
        }

        homework() {
          console.log(
            ${this.name} 선생님이 ${this.subject} 과목의 숙제를 내주었습니다.
          )
        }
      }

      let hailey = new Person('hailey', 20, 'female')
      let hannah = new Teacher('hannah', 30, 'female', 'English', 5)
      // 클래스 Person을 상속받은 클래스 Teacher의 인스턴스가 할당된 변수 hannah
      // hannah는 프로토타입 체인을 통해 클래스 Person의 메서드도 사용할수있다