[JavaScript] 중급 #15 - 클래스(Class)

 

Class: ES6에 추가된 스펙

 

e.g.) 생성자 함수와 Class 비교하기

  →  baby 객체는 객체 내부에 showName이 있고, angel 객체는 __proto__ 내부에 showName이 있음

 

 

  →  생성자 함수를 다음과 같이 작성하면 baby 객체는 클래스로 생성된 angel 객체와 같이 showName이 __proto__ 안에 있음

  →  하지만 for … in문을 통해 객체의 프로퍼티를 출력해보면, baby는 name, age, showName이 출력되지만, angel은 name, age만 출력

       그 이유는 클래스의 메소드는 for…in문에서 제외되기 때문

 

  →  생성자 함수와 클래스 모두 객체를 생성할 때 new를 생략하고 실행시키면,

       생성자 함수는 error 없이 baby에 undefined가 들어가지만,

       클래스는 new 없이 클래스를 실행할 수 없다는 내용의 TypeError가 발생

 

 

클래스 – 상속

  -  extends 키워드를 사용

             

 

클래스 – 메소드 오버라이딩(method overriding)

  →  Car를 상속받는 Bmw 클래스 내부에 Car에 이미 정의된 메소드와 동일한 이름의 메소드를 작성하게 되면, Car에서 상속받은 메소드를 덮어쓰게 됨

z4.stop(); // OFF 출력

 

 

  →  부모의 메소드를 사용하면서 확장하고 싶다면 super라는 키워드를 사용하면 됨

z4.stop(); // STOP!

           // OFF 출력

 

 

클래스 – 생성자 오버라이딩(constructor overriding)

  →  부모 constructor에서 받아온 color에 undefined가 들어감

 

  →  자식 클래스의 constructor에도 부모와 동일한 인수를 받아와야 제대로 작동함

 

 

e.g.)  자식 클래스에 constructor를 작성하지 않았을 땐

constructor(...args) {
	super(...agrs);
}

  이 부분이 있는 것처럼 작동해서 문제없이 부모 생성자를 받아올 수 있었음

 

 

 

 

 

↓ [코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=OpvtD7ELMQo