클래스(Class)로 객체 생성하기
지금까지 비슷한 형태의 객체를 생성하기 위해 생성자 함수를 사용함.
클래스를 이용해 객체를 생성하면
new를 사용했을때 내부에서 정의된 내용으로 객체를 만드는건 동일함.
- class키워드 사용+ 내부에 constructor가 있음.
- constructor는 객체를 만들어주는 생성자메소드
new를 통해 호출하면 자동으로 constructor 실행
constructor를 통해 객체에 name, age가 만들어짐. - showname처럼 class 내에 정의한 메소드는
User2의 프로토타입에 저장됨.
- 생성자함수로만든 mike, 클래스로 만든 tom을 확인해보면
mike는 객체 내부에 showname이 있고
tom은 프로토타입에 showname이 있음.
- 생성자 함수에서 클래스와 동일하게 동작하도록 만들기(메소드가 프로토타입에 존재하도록)
- new없이 생성자함수 사용시
undefined를 반환, mike에 undefined를 넣음.
에러가 발생하지 않음. - new없이 클래스 사용시
타입에러가 발생함.
=>클래스는 new없이 '실행할 수 없음' - 생성자함수, 클래스의 constructor비교
user2의 constructor는 class라고 명시되어있음, constructor는 class라고 알 수 있음.
이경우 new없이 호출시 에러발생하도록 설계됨 - for in 문 사용해보기
생성자 함수로 만든 mike를 for문 돌리면
프로토타입에 있는 showname까지 다나옴
반면 클래스로 만든 tom은 name,age만 보여줌
for in 문은 프로토타입을 포함한 프로퍼티를 다 보여주고, 객체만 가지고 있는 프로퍼티를 판별하기 위해 hasOwnProperty를 사용함.
그런데 class 메소드는 for in 문에서 제외됨.
클래스의 상속
생성자 함수는 프로토타입을 이용해 상속을 구현함.
- 클래스에서 상속은 extends 키워드를 사용함
Car를 상속해서 bmw만들기.
- 자식 클래스로 생성한 z4객체의 메소드 호출과정
z4.drive()를 실행하면 일단 z4객체에서 찾음.
없으니까 프로토타입으로 가서 찾고.
없으니까 또 프로토타입 가서 찾아 drive메소드 사용. - 코드
class Car{
constructor(color){
this.color = color;
this.wheels = 4;
}
drive(){
console.log("drive");
}
stop(){
console.log("stop!")
}
}
class Bmw extends Car{
park(){
console.log("park!")
}
}
const z4 = new Bmw('blue');메소드 오버라이딩(method overriding)
-
만약 Bmw에 Car에서 정의한 이름과 동일한 메소드가 존재한다면? 덮어쓺(오버라이딩)
stop이 bmw,car 자식클래스, 부모클래스 둘다에 존재한다면?
bmw로 생성한 객체 z4에서 stop호출시 bmw(자식클래스)에 있는 stop나옴.
즉 car를 상속받은 bmw꺼에 정의한 stop으로 덮어쓰게 됨 -
만약 부모의 메소드를 사용하면서 확장하고 싶다면? super() 사용
super() 추가시, car에 있는 stop도 나오고 z4에 있는 stop도 나옴.
super.메소드명() 으로 부모클래스에 있는 메소드를 사용할 수 있음.
이러한 방식을 오버라이딩이라고 함.
생성자 오버라이딩 하기
- 결론
constructor에 super()를 호출해 주어야 하며, constructor의 인수로 부모클래스에서 받는 인수를 똑같이 받을 수 있도록 작업해줘야함.
class 부모 extends 자식{
constructor(부모클래스의 인수){
super(부모클래스의 인수);
this.자식클래스에서 만들고싶은 프로퍼티이름 = 값 혹은 인수로받은 값;
}
z4 생성시 부모클래스로부터 온 인수, 자식클래스에서 필요한 인수 넣어줌.
- 자식클래스에 생성자가 만들어지는 과정
bmw에 생성자를 만들어보면
에러남.
constructor에서 this를 사용하기 전에
super constructor 부모 생성자를 반드시 먼저 호출해야함.
class의 constructor는 빈객체를 만들고 this로 그 객체를 가르키게 됨.
반면 extends로 만든 자식클래스는
빈객체가 만들어지고 this에 할당하는 작업을 건너뜀.
그래서 항상 super()로 부모클래스의 생성자를 실행해줘야함.
그래서 super를 호출해줬는데
그런데 z4를확인해보면, color가 undefined됨. 분명 생성할때 blue넣어줬는데도 그럼.
제대로 동작하기 위해서는 자식클래스의 constructor에 동일한 인수를 받는 작업을 해주어야 함.
위와 같이 자식클래스의 생성자에도 color를 받고 super에 넘겨줘야함.
잘 들어감.
- 자식클래스에 constructor가 없을 때 자바스크립트가 동작하는 방식
저 파란부분이 있는거처럼 행동함.
그러니까 자식생성자는 무조건 부모생성자를 호출해야함.
자식클래스에 constructor가 생겼을때 저런식으로 처리되지 않으니까 항상 super를 이용해서 호출해주고 this. property로 할당해줘야함.
class Car{
constructor(color){
this.color = color;
this.wheels = 4;
}
drive(){
console.log("drive");
}
stop(){
console.log("stop!")
}
}
class Bmw extends Car{
constructor(color){
super(color);
this.navigation =1;
}
park(){
console.log("park!")
}
}
const z4 = new Bmw('blue');
