# 객체지향 (4) class, extends, super

Doozuu·2022년 11월 12일
0

Javascript

목록 보기
23/99

📌 class

ES6의 class 신문법으로 constructor를 만들 수 있다.


만드는 방법

class 부모 {
  constructor(){
    this.name = 'Kim'
  }
}

var 자식 = new 부모();

class 안에 constructor를 만들고 새로 생성할 때는 이전과 동일하게 new
키워드를 사용함.


상속가능한 함수 추가하기

방법 1) 함수를 constructor 안에 추가

class 부모 {
  constructor(){
    this.name = 'Kim';
    this.sayHi = function(){ console.log('hello') }
  }
}

var 자식 = new 부모();

방법 2) 부모 prototype에 추가

class 부모 {
  constructor(){
    this.name = 'Kim';
  }
  sayHi(){ 
    console.log('hello') 
  }
}

var 자식 = new 부모();


부모 prototype 출력하기

Object.getPrototypeOf( )

__proto__와 비슷한 역할.



constructor안에 파라미터 추가하기

class 부모 {
  constructor(이름, 나이){
    this.name = 이름;
    this.age = 나이;
  }
}

var 자식 = new 부모('Park', 30);


📌 extends

기존에 있는 class와 유사한 class를 하나 더 만들고 싶을 때(상속할 때) 사용한다.

할아버지 class를 상속받는 아버지 class 생성.

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

class 아버지 extends 할아버지{

}


📌 super

super는 2가지 의미를 가지고 있다.

  1. 부모 class의 constructor
    super( ) (constructor 안에서 쓸 경우)
  2. 부모 class의 prototype (참고)
    super.함수명( ) (prototype 함수 안에서 쓸 경우)

1. 부모 class의 constructor

아래처럼 작성하면 super를 써야한다고 에러가 난다.

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

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

여기서의 super( )는 할아버지 class의 constructor를 의미한다.
부모의 constructor 값들을 상속받기 위해 꼭 작성해주어야 한다.
(이렇게 해야 에러없이 this를 사용할 수 있음.)

또한, 할아버지 class의 constructor에 있는 name 파라미터를 자식 파라미터에도 동일하게 적어주어야 정확히 상속받을 수 있다.

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

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
}

💡 할아버지 class 안에 함수를 추가하면 아버지 class의 자식들도 쓸 수 있다.
a < 아버지 < 할아버지 로 거슬러 올라가서 찾게 됨.

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

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
}

var a = new 아버지('만수');
a.sayHi(); // '안녕 나는 할아버지'

2. 부모의 prototype

class 간에 함수를 상속할 수 있다.

할아버지 class에 있는 함수를 아버지 class에 가져와서 쓰고싶을 때, super.함수명()을 통해 가져올 수 있다.

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

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi(); // 할아버지 constructor의 sayHi함수를 가져옴
  }
}

var a = new 아버지('만수');
profile
모든게 새롭고 재밌는 프론트엔드 새싹

0개의 댓글