JavaScript

[JS] extends / super

잼굴 2022. 5. 20. 15:09

 

extends :  유사한 class를 하나 더만들고 싶을때! -> class 상속

 

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

      let 할아버지1 = new 할아버지("냐옹이");

그냥 class로 만들면 이런형식임 

 

 

 


extends를 써보자 !  하는김에 내용도 추가해보자

 

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

      class 아버지 extends 할아버지 {
        constructor() {
          this.나이 = 50;
        }
      }
      let 아버지1 = new 아버지();

이렇게 하면 되겠찌?

에러가 뜬다

extends에는 this를 사용할수없다!!  내용을 추가하고 싶을땐 super를 사용해야함

 

super

super() 안에 부모의 내용을 갖다 붙여넣는 느낌

근데 파라미터 쓰는경우는 어떡함?

-> 

constructor(name){

super(name);}

걍 이렇게 평소처럼 넣어주면됨 ㅇㅇ

 


      class 할아버지 {
        constructor(name) {
          this.성 = "Kim";
          this.이름 = name;
        }
      }
      
      class 아버지 extends 할아버지 {
        constructor(name) {
          super(name);
          this.나이 = 50;
        }
      }
      
      let 아버지1 = new 아버지("멍멍이");
      let 할아버지1 = new 할아버지("냐옹이");

완성쓰

 

즉 super(): 물려받는 class의 constructor라는 뜻


 

super()의 또 다른 용도!

      class 할아버지 {
        constructor(name) {
          this.성 = "Kim";
          this.이름 = name;
        }
        sayHi(){
            console.log('안녕')  //할아버지.prototype에 추가됨
        }
      }

만약에 할아버지의 prototype에 sasyHi라는 함수를 추가하면 아버지도 사용가능할까??

 

 

된다!

 

      class 할아버지 {
        constructor(name) {
          this.성 = "Kim";
          this.이름 = name;
        }
        sayHi() {
          console.log("안녕 저는 할아버지에요"); //할아버지.prototype에 추가됨
        }
      }

      class 아버지 extends 할아버지 {
        constructor(name) {
          super(name);
          this.나이 = 50;
        }
        sayHi() {
          console.log("안녕 저는 아버지에요");
          super.sayHi();
        }
      }
      
      let 아버지1 = new 아버지("멍멍이");
      let 할아버지1 = new 할아버지("냐옹이");

 

 

class 아버지가 constructor 바깥에서 super()를 사용하였다.

이때 super는 부모 class의 prototype을 의미함

 

할아버지의 prototype은 constructor와 sayHi 2개가 있음

 

그중 아버지는 sayHi 가져와서 쓰는거임ㅇㅇ 굿

'JavaScript' 카테고리의 다른 글

[JS] Vending Mahcine 우여곡절 제작기  (0) 2022.06.09
[JS] getter, setter  (0) 2022.05.20
[JS] ES5 ES6 상속기능 사용하기 (create , class)  (0) 2022.05.20
[JS] prototype  (0) 2022.05.20
[JS] constructor 정리  (0) 2022.05.19