본문 바로가기

Frontend/JAVASCRIPT

[Javascript] class inheritance in ES6

반응형

앞에서는 object.create( ),  prototype.constructor 를 이용해서 상속을 구현했다면 ES6 에서는 이 방법을 좀더 쉽고 간결하게 쓸수있도록 새로운 문법을 만들었다.

class Person {
  constructor(name){
    this.name = name;
  }
  eat(){
    // do something
  }
}

class Employee extends Person {
  constructor(name){
    super(name)
  }
  work(){
    // do something
  }
}

엄청나게 간결해졌다.

extends 키워드를 사용해서 어떤 클래스를 상속할지 적어준다(매우매우 직관적이다.)

Employee class에서 constructor 함수를 보면 name을 받고 있는데, 인스턴스 생성시 인자로 넣어주면된다.

super keyword로 받은 name을 념겨주면 상위 class에서의 constructor함수의 인자로 들어가게 된다. (즉, 상위 class의 property를 사용할수 있다. 이전에서 사용하려면 call, apply를 사용하던것과 비교하면 굉장히 간편해졌다.)

코드를 실행해보면,

Object.create() 로 만들었던 부분과, constructor부분까지 모든것이 다 깔끔하게 정리되었다.

반응형