#0. class
- ES6에서 도입된 Constructor를 만드는 신문법이다.
- Object.create(부모)로 prototye을 지장한다고 해서 부모가 constructor가 되진 않는다. 그래서 부모를 constructor로 만드려면 이거써야함.
- java스럽게 constructor를 생성할 수 있음
- 사용법은 다음과 같다.
// 1. class 생성하기
class 클래스명 {
constructor() {
// 넣고싶은 속성 여기에 넣기
}
}
// 2. 위의 constructor 닮은 object 생성하기
var 자식오브젝트명 = new 클래스명();
#1. 사용해보자.
1. Parent라는 이름을 가진 class를 생성하여, 그 안에 constructor를 넣어주었다.
2. 그리고 Child라는 Parent를 빼닮은 인스턴스 생성
// 1. class 생성하기
class Parent {
constructor() {
// 넣고싶은 속성 여기에 넣기
this.name = "Kim";
}
}
// 2. 위의 constructor 닮은 object 생성하기
var child = new Parent();
3. 잘 생성되었는지 확인하고싶다면..?
- 둘중 하나로 검사해보면 생성된 인스턴스의contructor를 확인할 수 있다.
생성된인스턴스.__proto__;
Object.getPrototypeOf(생성된인스턴스);child.__proto__; // 내 부모의 prototype 찾기
// 출력결과 >> {constructor: ƒ}
Object.getPrototypeOf(child); // 부모의 prototype을 출력해주세요
// 출력결과 >> {constructor: ƒ}
4. Parent에 함수 넣고 싶을땐 어떻게 함?
1) constructor{} 안에 추가하거나
- 이 경우, 추가된 sayHi는 Parent의 cosntructor에 직접 추가되는거니까, child에 직접 추가되는거다.
2) constructor{} 밖에 추가하기
- 이 경우, sayBye는 Parent의 protype에 추가되는거다. 그래서 child에 직접 추가되진 않는다.
- 그래도 내 부모.prototype에 있는거니까 실행은 잘된다.
// 1. class 생성하기
class Parent {
constructor() {
// 넣고싶은 속성 여기에 넣기
this.name = "Kim";
// * 함수 추가1
// 여기에 쓰면 child가 직접 함수를 가짐
this.sayHi = function () {
console.log("Hi");
};
}
// * 함수 추가2
// 여기에쓰면 자식 오브젝트에 추가 안됨.
// Parent.prototype에 추가됨.
sayBye() {
console.log("Bye");
}
}
// 2. 위의 constructor 닮은 object 생성하기
var child = new Parent();
child; // 내속엔 뭐가 있을까? 출력결과 >> Parent {name: 'Kim', sayHi: ƒ}
child.__proto__; // 내 부모의 prototype 찾기
// 출력결과 >> {constructor: ƒ, sayBye: ƒ}
child.sayBye(); // 출력결과 >> Bye