javascripts class constructor extends super 간단 정리

최근 react를 함수형으로 hooks만 쓰다가 한번씩 class문법으로 된 코드를 보니까 클래스, 상속 등등이 이해가 안되고있다는 점을 떠올렸다. prototype도 아직 이해되지 않고 너무어렵다. 이런것을 보면 바닐라자바스크립트를 딥하게 한다는게 정말 제일 어려운것 같다. 그래서 패기있게 이해해보려고 덤벼들었다가 기록만 남겨본다.

1.class,constructor,new 문법 사용 정리

class Person{             //class문법을 사용하여 객체를 찍어낼 주물용 함수인 Person을 생성했다.
  constructor() {         //constructor함수를 사용하여 객체의 기본상태를 설정하고, 객체를 초기화 하였다.
    this.lifespan = '80'; //lifespan(수명)이 80살이라는 기본 상태를 설정하였다.
  }
}

//위에서 Person 함수를 만들었지만, 사용하지 않은 상태
//사용하려면 아래와 같이 객체를 만드는 문법인 new를 써야한다.
const person1 = new Person(); //위에서 초기화한 Person함수를 실행하여 person1객체를 생성하였다.
console.log(person1)          //{lifespan: '80'}

위에서 만든 Person객체를 그대로 이용하여 확장 및 재사용 해야할 경우가 있을 것이다. extends와 super는 이 때 필요하다.

2.extends와 super 사용법

class Male extends Person{        //위에서 만든 Person부모 클래스함수를 extends로 확장하여 자식클래스인 Male을 생성하겠다고 선언했다.
  constructor(){                  //constructor함수를 사용하여 객체의 기본상태를 설정하고, 객체를 초기화 하였다.
    super()                       //Person부모 클래스함수를 super함수가 호출하여 lifespan을 상속시켜 넘겨줍니다.
      this.averageHeight='172cm'; //Male클래스함수에 새로운 상태를 설정합니다.
  }
}

//Male 함수를 정의하였으나, 미사용상태
//사용하기 위해 마찬가지로 new문법 사용하여 객체를 만들어 주자
const male1=new Male()  //male1변수에 객체가 생성 및 할당 되었다.
console.log(male1)      //{lifespan: '80', averageHeight: '172cm'}

Male클래스 함수에서 새로운 상태 설정은 averageHeight밖에 없었지만, 부모 함수에서 설정했던 lifespan까지 같이 가지고 있는 것을 볼 수 있다.

3.확인

 

콘솔을 찍어보니

person1은 수명 80의 값만

Person을 확장한 함수인 Male함수로 만든

male1은 따로 설정하지 않았지만 수명80을 갖고 있을 뿐만아니라, 평균키값인 172cm의 상태도 가지고있다.