0. 들어가며
- 동일 포멧의 여러 객체를 만드는 방법은 "생성자함수"만 있는 것이 아니다.
- class, extends , super 키워드를 이용하면 '몸통' 만들어 놓고 필요에 따라 '팔', '다리' 붙여서 객체 생성하기 좋다.
1. class : 동일 포멧의 객체를 생성한다. (찍어낼 수 있다)
- ES6에 새로 추가된 스펙이다.
- 함수가 아닌 프로퍼티들을 '속성 : field 필드' 라고 하며 동작을 나타내는 함수는 '메소드'라 한다.
- constructor는 생성자라고 한다.
- 메소드(객체 내부에 선언된 함수)는 프로토타입으로 저장된다. (생성자함수로는 그냥 객체에 저장)
- 생성자함수와 동일하게 new 로 생성하지만 new가 빠져도 에러 없이 undefined를 반환하는 생성자함수와 달리 new를 빼고 생성하면 타입에러가 뜬다.
- 프로토타입에 constructor에 Class로 생성된 객체인 것이 명시된다. (생성자함수는 그런거 없음)
- for in 문으로 키 순회하면 생성자함수는 프로토타입에 있는 것도 나오는데 Class는 안나옴
//Class 와 생성자 함수 비교
// 생성자함수
const User1 = function(name, age){
this.name = name,
this.age = age,
this.showName = function(){
console.log(this.name)
}
};
const mike = new User1("mike", 20);
// 클래스
class User2 {
// 함수대신 constructor가 들어가고 메서드는 constructor 외부에 선언
constructor(name, age){ // 생성자
this.name = name; // 속성 : filed
this.age = age; // 속성 : field
}
showName(){ // 메소드
console.log(this.name);
}
}
const cole = new User2("cole",30);
console.log(mike); // User1 { name: 'mike', age: 20, showName: [Function (anonymous)] }
console.log(cole); // User2 { name: 'cole', age: 30 } // 메서드는 프로토타입에 저장
2. extends : class1에 이것저것 추가한 class2를 만들고 싶다면? (class 상속)
- A에게 상속받는 B를 만들고 싶다면 (A 부모, B 자식)
class B extends A {B에 추가로 담길 내용}
- 오버라이딩 (overriding) : 덮어쓰기 // '인수를 받아야하는 프로퍼티', '메소드'는 super 키워드 필요
1) 인수 안받아도 되는 부모의 프로퍼티는 알아서 상속됨.
2) 인수 받아야하는 부모의 프로퍼티는 super 키워드를 사용해야 함. // super(매개변수명)
3) 부모 constructor가 정한 매개변수명을 자식 constructor에 그대로 옮겨놔야 함.
4) 메소드 오버라이딩은 자식 메소드 내부에 부모 메소드 추가 // 자식메소드 실행시 부모메소드까지 함께 실행 // super.메소드명() // 단순히 부모메소드만 사용할거면 안해도 됨. 프로토타입체인으로 ( 자식.부모메소드() ) 이렇게 실행 가능 .
// extends : class 의 상속
class Body {
constructor(skinColor) {
this.color = skinColor;
this.niple = 2;
}
bodyMove() {
console.log("body move")
}
}
const person2 = new Body("white");
// extends 활용 자식 class 생성
class Arm_Body extends Body {
constructor(skinColor, fingers) {
super(skinColor); // 부모 프로퍼티는 이렇게 가져 옴 (인수가 필요한 경우만, 인수없으면 알아서 들어감)
this.fingers = fingers;
}
armMove() {
super.bodyMove(); // 부모 메소드는 이렇게 가져옴
console.log("arm move")
}
}
const person1 = new Arm_Body("black", 5);
console.log(person1); // 자식: Arm_Body { color: 'black', niple: 2, fingers: 5 }
console.log(person2); // 부모: Body { color: 'white', niple: 2 }
person1.armMove();
person2.bodyMove();