[JavaScript] 객체지향4. class 2 : class를 복사하고 싶을땐 extends, 복사한 class를 잘 사용하기 위해선 super()

#0. 오늘은 결론먼저..

extends

class를 상속할때 사용

 

super :

1) (클래스 extends시 costructor에)  부모 한번 돌고와서 this값 잘 바인딩하려고 사용

2) 부모의 prototype가져올때도 사용

 

 

 

#1. 적용해나가는 기나긴 과정

1. grandPapa의 속성을 그대로 물려받은 class를 만들고 싶을때 - extends 사용하면 됨.

class grandPapa {
    constructor(name) {
    	this.firstName = "Kim";
        this.name = name;
    }
}

var grandPapa1 = new grandPapa("동식"); >> {firstName: 'Kim', name: '동식'}

 

2. extends 는 다음과 같은 방식으로 사용가능하다.

// 1. 물려받고싶은 클래스는 여기있고
class 물려받고싶은클래스명 {
	constructor(){
    	// 지정하고싶은속성 넣기
    }
}

// 2. 그걸 물려받은 클래스 여기서 생성하고 있는거임.
class 생설될클래스명 extends 물려받고싶은클래스명{
 	constructor(){
    	//추가로 지정하고싶은 속성
    }
 }

 

2-1. (!!! 틀린예 !!!)  그렇게 적용시키면,, 다음과 같이 적을텐데.. (!!! 이거는 틀린예임..!!!!!!) 

>> 이런상황에서 필요한게 super()

// 1. 물려받고싶은 클래스
class grandPapa {
    constructor(name) {
    	this.firstName = "Kim";
        this.name = name;
    }
}

// 2. 물려받는 클래스
// class 생설될클래스명 extends 물려받고싶은클래스명
 class papa extends grandPapa {
 	constructor(){
    	//추가로 지정하고싶은 속성
        this.age = 50;
    }
 }
 
 var papa1 = new papa();  // 실행결과 >> Must call super constructor in derived class before accessing 'this' or returning from derived constructor

- 에러 보면 this를 사용하려면 super를 꼭 불러와달라는 소리다.

 

2-2. (!!!! 틀린예 2 !!!!) super넣기 (!!! 조금 더 낫지만 파라미터 못가져오는 애임 !!!!)

- super();를 사용하니, papa1 실행시, 에러는 뜨지 않는다. 

- 그런데 문제가 있다. name이 undefined라고? >> 파라미터 잘 추가해주면된다.

// 1. 물려받고싶은 클래스
class grandPapa {
    constructor(name) {
    	this.firstName = "Kim";
        this.name = name;
    }
}

// 2. 물려받는 클래스
 class papa extends grandPapa {
 	constructor(){
    	// 걍 이렇게 쓰면된다.
        super();
        this.age = 50;
    }
 }
 
 var papa1 = new papa();  
 papa1; // 실행결과 >> papa {firstName: 'Kim', name: undefined, age: 50}

 

2-3. (!!! 맞는예 !!!) 파라미터도 잘 추가해주자.

- 파라미터는 constructor와 super ()안에 잘 넣어주면된다.

- super()는 부모 잠깐 돌고와줘! 라는 메세지.

- 그래서 부모에 들어갈 파라미터를 super()안에 넣어주면 된다.

- 50살 삼식이 잘 가져온다.

- 그런데 내가 papa의 age를 파라미터로 가져오고 싶다면?

// 1. 물려받고싶은 클래스
class grandPapa {
    constructor(name) {
    	this.firstName = "Kim";
        this.name = name;
    }
}

// 2. 물려받는 클래스
 class papa extends grandPapa {
 	constructor(name){
    	// 걍 이렇게 쓰면된다.
        super(name);
        this.age = 50;
    }
 }
 
 var papa1 = new papa('삼식');  
 papa1; // 실행결과 >> papa {firstName: 'Kim', name: '삼식', age: 50}

 

2-4. (!!! 미션1. !!!) papa의 age를 파라미터로 가져오기

>> papa의 constructor에 age추가 (!주의!) super는 age필요 없으니까, 거긴 안추가해도 된다.

- 다시말하지만, super는 부모 잠깐 갔다와줘 라는 부탁, 부모는 age필요없다.

// 1. 물려받고싶은 클래스
class grandPapa {
    constructor(name) {
    	this.firstName = "Kim";
        this.name = name;
    }
}

// 2. 물려받는 클래스
 class papa extends grandPapa {
 	constructor(name, age){
    	// 걍 이렇게 쓰면된다.
        super(name);
        this.age = age;
    }
 }
 
 var papa1 = new papa('삼식', 48);  
 papa1; // 실행결과 >> papa {firstName: 'Kim', name: '삼식', age: 50}

 

2-5. (!!! super 기능2 !!!) 부모 prototype 함수 가져오기

- super쓰면 부모 prototye의 데이터도 가져올수있다.

- grandPapa, papa 각각의 prototype에 sayHi()를 넣어보자.

- 이 상태에서 papa.sayHi();를 출력한다면? >> 가장 가까운 papa prototype에 있는 안녕 난 아버지 출력할거다.

class grandPapa {
    constructor(name) {
      this.firstName = "Kim";
      this.name = name;
    }
    sayHi() {
      // 할아버지 prototype에 추가되는 함수
      console.log("안녕 난 할아버지");
    }
}

class papa extends grandPapa {
    constructor(name) {
      super(name); // costrucor안의 super : 부모 class의 constructor의미
      this.age = 50;
    }
    sayHi() {
      console.log("안녕 난 아버지");
    }
}

var papa1 = new papa("광렬");
papa1.sayHi(); // 출력결과 >> 안녕 난 아버지

진짜임. 콘솔 출력결과

 

- 근데 papa.sayHi();하면 부모의 sayHi()도 실행하고 싶다? >> super.sayHi() 넣기

class grandPapa {
    constructor(name) {
      this.firstName = "Kim";
      this.name = name;
    }
    sayHi() {
      // 할아버지 prototype에 추가되는 함수
      console.log("안녕 난 할아버지");
    }
}

class papa extends grandPapa {
    constructor(name) {
      super(name); // costrucor안의 super : 부모 class의 constructor의미
      this.age = 50;
    }
    sayHi() {
      console.log("안녕 난 아버지");
      super.sayHi(); // 부모 class 의 prototype을 의미
      // 부모.prtotype에 저장된 sayHi()를 실행해주셈
    }
}

var papa1 = new papa("광렬");
papa1.sayHi();
// 출력결과 >>
// 안녕 난 아버지
// 안녕 난 할아버지

출력결과 둘다 말하지!