자바스크립트 상속

ES5 스타일

ES5 style inheritance

자바스크립트가 원래 OOP가 아닌만큼 상속을 구현하는게 상당히 상스러운 모습이다.

• 부모의 생성자함수 call(this, name)로 실행
• Object.create() 카피
• constructor 교체

위 3가지가 핵심 포인트

ES6 스타일

ES6 style inheritance

‘class’로 상속을 구현한 코드다.

• ‘extends’ 때문에 상속을 표현하는게 짧아졌다.
• 생성자를 자동으로 받아서 실행한다. (주석부분)
• ‘super’ 키워드로 부모에 접근할 수 있다. (아래에서 소개)

super example

Super의 사용예제다.

• 원래 7300일로 나와야할 papa의 dayOflived가 14600이 된것을 볼 수 있다. 자녀의 위치에서 age 변수를 2배로 바꿨다. 별로 좋은 예제는 아닌것 같지만 이상한 만큼. 이상한 동작의 원인이 될 수는 있다.
• super.ping()을 통해서 부모의 함수를 호출한 모습을 볼 수 있다. 저 위치에서 super 없이는 부모객체에 접근할 수 없다. pingpong위치에선 this가 child를 보고 있다. super를 통해 부모에 접근하는 것이다.
• super()를 constructor에 넣어주면 부모의 생성자를 그대로 실행한다는것을 명시할 수 있다.