[javascript] 클래스 상속(Inherit)의 이해

다른 객체지향 언어의 클래스처럼 자바스크립트의 클래스도 상속을 지원합니다.

클래스의 상속은 앞서 만들어 놓은 클래스의 기능들을 그대로 가져다 쓸 수 있으면서도, 상속받은 클래스의 고유한 기능을 추가할 수 있기 때문에 체계적으로 구조화 된 서비스를 개발하는데 아주 중요한 역할을 합니다.

클래스 상속을이해하려면 몇가지 중요한 키워드를 알아야 합니다.

extends - 상속받을 클래스를 지정하는 지시자입니다.

class ChildClass extends ParentClass{}

이런 방식으로 부모클래스(ParentClass)를 상속받게 됩니다.

super - 부모 클래스의 생성자(constructor()) 를 호출합니다. 자식 클래스의 생성자에서 호출하며, 부모 클래스의 생성자를 호출합니다. 

호출하지 않으면 부모 클래스의 생성자에서 초기화한 변수나 메서드를 사용할 수 없게 됩니다.

class ChildClass extends ParentClass{  constructor(param){  super(param);    //자식 클래스에서 추가로 사용할 변수 설정  }  //추가 메서드 작성}

상속이 끝났습니다.

클래스의 상속 구현은 의외로 간단합니다.

이제 부모 클래스의 모든 변수와 메서드를 자식 클래스가 사용할 수 있게 되었습니다.

물론 실제로 서비스 구현을 하면 이렇게 간단하지는 않습니다.

간단한 예를 들어서 클래스를 상속을 어떻게 했는지 알아보겠습니다.

Person 클래스를 Teacher, Student 두 클래스가 각각 상속합니다.

Teacher 와 Student 클래스는 각자의 고유 변수와 메서드를 추가로 가집니다.

공통의 변수와 메서드를 Person 클래스에 구현하고, 상속받은 클래스에는 클래스의 특징에 맞는 변수와 메서드만 추가로 구현하면 되기 때문에 코드의 중복이 없고 효율성이 높아집니다.

student 인스턴스의 getSubject() 메서드 호출은 Student() 클래스에도 없고 부모 클래스인 Person()에도 없기 때문에 에러를 발생시킵니다.

class Person {  constructor(firstname, lastname, age, gender){    this.name = {first:firstname, last:lastname};    this.age = age;    this.gender =gender;  };
  getAge(firstname, lastname){    return this.age;  };
  getGender(firstname, lastname){    return this.gender;  };}
//Person 을 상속 받아 Teacher 클래스 생성class Teacher extends Person {  constructor(firstname, lastname, age, gender, subject){    super(firstname, lastname, age, gender);    this.subject = subject;  };
  getSubject(firstname, lastname){    return this.subject;  };}//Person 을 상속 받아 Student 클래스 생성class Student extends Person {  constructor(firstname, lastname, age, gender, grade){    super(firstname, lastname, age, gender);    this.grade = grade;  };
  getGrade(firstname, lastname){    return this.grade;  };}
let teacher = new Teacher('라', '이언', 5, 'male', 'math');let student = new Student('어', '피치', 4, 'female', 3);
console.log(teacher.getSubject('라','이언')); // 'math' 반환console.log(student.getAge('어','피치')); // 4반환console.log(student.getSubject('어','피치'));// 자기 자신과 부모 클래스에 없는 메서드 호출로 에러 발생