<요약>
1.class
2. constructor
3. super
1. class
자바스크립트에서 클래스란 생성자 함수를 의미한다.
함수(function)는 우리가 알고리즘 문제를 풀때는 특정 기능을 하는 구문을 묶을 때 사용 하는 문법이라면,
클래스(Class)는 이렇게 만들어진 함수와 변수들을 연관 있는것끼리 묶을때 사용되는 문법이다.
클래스(Class)를 사용해서 묶어 놓는 이유는 편하게 코드를 재사용하기 위해서다.
2. constructor
생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 함수안에 생성자는 객체를 만들어 주기위해 만드는 것이고 "초기모델", "초기값"이라고 이해하자.
즉, Class 안에 constructor는 보통 class의 초기값을 설정해 주는데 사용된다.
예시코드를 보자 .
class Lion {
// class의 초기값 설정. 생성자와 비슷하다고 보면 된다.
constructor( name ){
this.name = name
}
getName( ){
console.log("내 이름은 "+this.name)
}
}
myLion = new Lion("King")
myLion.getName()결과는 "내 이름은 King"이 나오는 것을 볼 수 있다.
3. 상속
자바스크립트에서 상속이란 상속이란 부모 클래스(class)의 속성을 그대로 물려받고 새로운 속성을 추가하여 확장할 수 있는 기능이다.
위의 예시 코드에서 상속을 추가해보자.
class Animal {
constructor(leg){
this.leg = leg
}
printAnimal(){
console.log(this.name+"은 다리 가" + String(this.leg)+"개")
}
}
class Lion extends Aniaml {
// class의 초기값 설정. 생성자와 비슷하다고 보면 된다.
constructor( name ){
this.name = name
}
getName( ){
console.log("내 이름은 "+this.name)
}
}
myLion = new Lion("King")
myLion.getName()
이런식을 부모 클래스(class)인 Animal을 만들어주고 Animal의 기능을 가져다 쓰기 위해 Lion 클래스(class)에 extends 를 추가한 것을 볼 수 있다.
4. Super
그런데 이것을 실행하면 오류가 나오는데
ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
Super를 꼭 필요하다라는 오류가 나온다.
super를 다음과 같이 Lion 클래스(class)에 추가해보면
class Animal {
constructor(leg) {
this.leg = leg
}
printAnimal(){
console.log(this.name+"은 다리가 "+String(this.leg)+"개")
}
}
class Lion extends Animal {
constructor(name) {
// 이렇게 superclass를 호출해준다
super(name)
this.name = name
}
... (이하 생략) ...
}
myLion = new Lion("King")
myLion.getName()
myLion.printAnimal()"내이름은 King"
"King은 다리가 King개"
라고 결과가 나온다.
여기서 알게된 점은 2가지가 있는데 이것을 기억하고 가자.
1. Animal라는 부모 클래스(class)에서 자식 클래스(class)인 Lion의 this.name을 가져다 쓸 수있구나.
2. super는 부모 클래스의 constructor의 input이구나.
위에 예시는, super를 사용했기 때문에 결과는 잘 실행됐지만 올바르지 않은 예시이다.
super를 올바르게 사용하기 위해서는 다음과 같이 바꿔주면 된다.
class Animal {
constructor(leg) {
this.leg = leg
}
printAnimal(){
console.log(this.name+"은 다리가 "+String(this.leg)+"개")
}
}
class Lion extends Animal {
constructor(name, leg) {
// 부모 constructor의 input으로 name, leg 보내자
super(name, leg)
this.name = name
}
... (이하 생략) ...
}
myLion = new Lion("King", 4) // 객체를 생성할 때도 인자 두 개 주기
myLion.getName()
myLion.printAnimal(