super과 extends

class 부모라는게 있을 때 이거랑 유사한 class를 하나 더 만들고 싶으면 extends를 사용할 수 있다. (class를 상속하는 것)

하드코딩해도 되지만, class안에 상속할게 너무 많을 때 사용한다.

class 할아버지 {
	constructor(name) {
    	this.성 = 'Kim';
        this.이름 = name;
    }
}

//var 할아버지1 = new 할아버지('만덕')

class 아버지 extends 할아버지 {//할아버지 속성을 그대로 물려받음
	constructor() {
    	this.나이 = 50;
    }
}

var 아버지1 = new 아버지();

이렇게 쓰면 완벽한 것 같지만 에러가 난다. extends해서 만든 class는 this를 안에 못 쓰기 때문이다. super() 다음에 써야한다.

class 할아버지 {
	constructor(name) {
            this.성 = 'Kim';
            this.이름 = name;
    }
}

//var 할아버지1 = new 할아버지('만덕')

class 아버지 extends 할아버지 {//할아버지 속성을 그대로 물려받음
	constructor(name) {
            super(name);
            this.나이 = 50;
    }
}

var 아버지1 = new 아버지();

이렇게 사용하며, super()은 this.성 = 'Kim'; this.이름 = name; 을 뜻한다. 

파라미터만 constructor()과 super()에 적어주면 된다.

 

super의 또 다른 용도를 알아보면,

우선, 할아버지 class에 sayHi함수를 넣어보자.

class 할아버지 {
	constructor(name) {
            this.성 = 'Kim';
            this.이름 = name;
    }
    sayHi() {
    	console.log('안녕')
    }
}

//var 할아버지1 = new 할아버지('만덕')

class 아버지 extends 할아버지 {//할아버지 속성을 그대로 물려받음
	constructor(name) {
            super(name);
            this.나이 = 50;
    	}
}

var 아버지1 = new 아버지();

위 처럼 적으면 sayHi()함수는 할아버지의 prototype에 들어가게 되는데, 이때 아버지1.sayHi를 쓰면 잘 나오게 된다.

이건 할아버지를 상속해서 그대로 아버지를 썼기 때문에 자연스레 쓸 수 있는 것이다. 

 

만약, 아버지의 constructor 밖에 sayHi()를 쓰면 자기와 가장 가까운 prototype을 찾으므로 아버지의 sayHi()함수가 나올 것이다. 근데, 아버지의 sayHi()안에 super.sayHi()를 쓰면, 부모class의 prototype을 의미하게 된다.