자바스크립트 컨스트럭터에 대해서
Ly8g7J6Q67CU7JeQ7ISc64qUIO2BtOuemOyKpOulvCDsoJXsnZjtlZjqs6Ag7J206rKD7J2EIOydtOyaqe2VtCDsnbjsiqTthLTsiqTrpbwg7IOd7ISx7ZWc64ukLgovLyDsnpDrsJTsiqTtgazrpr3tirjsl5DshJzripQg7ZWo7IiY66W8IOygleydmO2VmOqzoCDsnbTqsoPsnLzroZwg7J247Iqk7YS07Iqk66W8IOyDneyEse2VnOuLpC4KLy8g7J247Iqk7YS07Iqk66W8IOunjOuTpOq4sCDsnITtlZwg7ZWo7IiY66W8IOyDneyEseyekO2VqOyImCDtmLnsnYAg7Luo7Iqk7Yq465+t7YSw65286rOgIOu2gOuluOuLpC4KLy8g67Cp67KV7J2AIOuLpOydjOqzvCDqsJnri6QuCmZ1bmN0aW9uIEFuaW1hbCgpIHsgfSAvLyDsu6jsiqTtirjrn63thLAg7Jet7ZWg7J2EIO2VoCDtlajsiJjrpbwg66eM65Og64ukCmNvbnN0IGFuaW1hbCA9IG5ldyBBbmltYWwoKTsgLy8g7ZWo7IiY66W8IOydtOyaqe2VtOyEnCDsnbjsiqTthLTsiqTrpbwg66eM65Og64uk
// 자바에서는 클래스를 정의하고 이것을 이용해 인스턴스를 생성한다.
// 자바스크립트에서는 함수를 정의하고 이것으로 인스턴스를 생성한다.
// 인스턴스를 만들기 위한 함수를 생성자함수 혹은 컨스트럭터라고 부른다.
// 방법은 다음과 같다.
function Animal() { } // 컨스트럭터 역할을 할 함수를 만든다
const animal = new Animal(); // 함수를 이용해서 인스턴스를 만든다
ZnVuY3Rpb24gQW5pbWFsKCkgeyB9IC8vIOy7qOyKpO2KuOufre2EsCDsl63tlaDsnYQg7ZWgIO2VqOyImOulvCDrp4zrk6Dri6QKY29uc3QgYW5pbWFsID0gbmV3IEFuaW1hbCgpOyAvLyDtlajsiJjrpbwg7J207Jqp7ZW07IScIOyduOyKpO2EtOyKpOulvCDrp4zrk6Dri6QKCi8v7JyE7JmAIOqwmeydtCDrp4zrk6AgYW5pbWFsIOyduOyKpO2EtOyKpOyXkOuKlCBjb25zdHJ1Y3RvcuudvOuKlCDsho3shLHsnbQg7KG07J6s7ZWY6rKM65Cc64ukCmNvbnNvbGUubG9nKGFuaW1hbC5jb25zdHJ1Y3Rvcik7IC8vIOydtCDqsJLsnYAg7KaJLi4KY29uc29sZS5sb2coQW5pbWFsKTsgLy8g7J206rKD7J2EIOydmOuvuO2VmOqyjOuQnOuLpApjb25zb2xlLmxvZyhhbmltYWwuY29uc3RydWN0b3IgPT09IEFuaW1hbCk7IC8vIOq3uOuemOyEnCB0cnVl7J2064uk
function Animal() { } // 컨스트럭터 역할을 할 함수를 만든다
const animal = new Animal(); // 함수를 이용해서 인스턴스를 만든다
//위와 같이 만든 animal 인스턴스에는 constructor라는 속성이 존재하게된다
console.log(animal.constructor); // 이 값은 즉..
console.log(Animal); // 이것을 의미하게된다
console.log(animal.constructor === Animal); // 그래서 true이다
ZnVuY3Rpb24gQW5pbWFsKCkgeyB9IC8vIOy7qOyKpO2KuOufre2EsCDsl63tlaDsnYQg7ZWgIO2VqOyImOulvCDrp4zrk6Dri6QKY29uc3QgYW5pbWFsID0gbmV3IEFuaW1hbCgpOyAvLyDtlajsiJjrpbwg7J207Jqp7ZW07IScIOyduOyKpO2EtOyKpOulvCDrp4zrk6Dri6QKY29uc29sZS5sb2coYW5pbWFsLmNvbnN0cnVjdG9yID09PSBBbmltYWwpOyAvLyDsnbQg6rKw6rO86rCAIHRydWXrnbzqs6Ag7ZWc64uk66m0LCDspokg65GQ6rCc6rCAIOqwmeydgOqxsOudvOuptApjb25zdCBhbmltYWwyID0gYW5pbWFsLmNvbnN0cnVjdG9yKCk7IC8vIOydtOugh+qyjCDtlbTshJwg64+Z7J287ZWY6rKMIOyduOyKpO2EtOyKpOulvCDrp4zrk6TslrTrgrwg7IiYIOyeiOuLpA==
function Animal() { } // 컨스트럭터 역할을 할 함수를 만든다
const animal = new Animal(); // 함수를 이용해서 인스턴스를 만든다
console.log(animal.constructor === Animal); // 이 결과가 true라고 한다면, 즉 두개가 같은거라면
const animal2 = animal.constructor(); // 이렇게 해서 동일하게 인스턴스를 만들어낼 수 있다
Ly8g7JyE7JeQ7ISc64qUIEFuaW1hbOydtOudvOqzoCDtlZjripQg7IOd7ISx7J6Q7ZWo7IiY66W8IOygleydmO2VtOyEnCDsnbTqsoPsnLzroZwg7J247Iqk7YS07Iqk66W8IOunjOuTpOyXiOuLpC4KLy8g6riw67O47KCB7Jy866GcIOyekOuwlOyKpO2BrOumve2KuOyXkCDsobTsnqztlZjripQg7IOd7ISx7J6QIO2VqOyImOuPhCDsnojri6QuIOq3uCDspJHsl5AgQXJyYXkg65286rOgIO2VmOuKlCDsg53shLHsnpDtlajsiJjrpbwg7JyE7JmAIOqwmeydtCDsgqzsmqntlbTrs7TqsqDri6QKY29uc3QgYW5pbWFsID0gbmV3IEFycmF5KCk7IC8vIOydtOugh+qyjCDtlZjrqbQgQXJyYXkg7ZWo7IiY66W8IOqwgOyngOqzoCDsnbjsiqTthLTsiqTrpbwg7ZWY64KYIOunjOuTpOyXiOuLpC4KCi8vIOychOyXkOyEnCBBbmltYWztlajsiJjrpbwg6rCA7KeA6rOgIO2WiOuNmOqyg+ydhCDqt7jrjIDroZwg7ZW067O06rKg64ukCi8vIOychOyZgCDqsJnsnbQg66eM65OgIGFuaW1hbCDsnbjsiqTthLTsiqTsl5DripQgY29uc3RydWN0b3LrnbzripQg7IaN7ISx7J20IOuniOywrOqwgOyngOuhnCDsobTsnqztlZjqsozrkJzri6QKY29uc29sZS5sb2coYW5pbWFsLmNvbnN0cnVjdG9yKTsgLy8g7J20IOqwkuydgCDspokuLgpjb25zb2xlLmxvZyhBcnJheSk7IC8vIOydtOqyg+ydhCDsnZjrr7jtlZjqsozrkJzri6QKY29uc29sZS5sb2coYW5pbWFsLmNvbnN0cnVjdG9yID09PSBBcnJheSk7IC8vIOq3uOuemOyEnCB0cnVl7J2064uk
// 위에서는 Animal이라고 하는 생성자함수를 정의해서 이것으로 인스턴스를 만들었다.
// 기본적으로 자바스크립트에 존재하는 생성자 함수도 있다. 그 중에 Array 라고 하는 생성자함수를 위와 같이 사용해보겠다
const animal = new Array(); // 이렇게 하면 Array 함수를 가지고 인스턴스를 하나 만들었다.
// 위에서 Animal함수를 가지고 했던것을 그대로 해보겠다
// 위와 같이 만든 animal 인스턴스에는 constructor라는 속성이 마찬가지로 존재하게된다
console.log(animal.constructor); // 이 값은 즉..
console.log(Array); // 이것을 의미하게된다
console.log(animal.constructor === Array); // 그래서 true이다
bGV0IGFuaW1hbCA9IG5ldyBBcnJheSgpOyAvLyDsnbTqsoPsnYAg7Yq567OE7ZWY6rKM64+ECmxldCBhbmltYWwyID0gW107IC8vIOydtOugh+qyjCDqsITrnrXtnogg7ZGc7ZiE7ZW07IScIOyduOyKpO2EtOyKpOulvCDrp4zrk6TslrTspITsiJgg7J6I64ukCmNvbnNvbGUubG9nKGFuaW1hbDIuY29uc3RydWN0b3IgPT09IGFuaW1hbC5jb25zdHJ1Y3Rvcik7IC8vIOq3uOuemOyEnCDsnbTqsoPsnYAgdHJ1ZeydtOuLpApjb25zb2xlLmxvZyhhbmltYWwyLmNvbnN0cnVjdG9yID09PSBBcnJheSk7IC8vIOusvOuhoCDsnbTqsoPrj4QgdHJ1ZeydtOuLpApsZXQgYW5pbWFsMyA9IGFuaW1hbDIuY29uc3RydWN0b3IoKTsgLy8g6re466CH6riw7JeQIOusvOuhoCDsnbTroIfqsozrj4Qg7J247Iqk7YS07Iqk66W8IOunjOuTpOyWtOuCvCDsiJgg7J6I64uk
let animal = new Array(); // 이것은 특별하게도
let animal2 = []; // 이렇게 간략히 표현해서 인스턴스를 만들어줄수 있다
console.log(animal2.constructor === animal.constructor); // 그래서 이것은 true이다
console.log(animal2.constructor === Array); // 물론 이것도 true이다
let animal3 = animal2.constructor(); // 그렇기에 물론 이렇게도 인스턴스를 만들어낼 수 있다
bGV0IGFuaW1hbCA9IG5ldyBPYmplY3QoKTsgLy8g7J206rKD7J2AIO2KueuzhO2VmOqyjOuPhApsZXQgYW5pbWFsMiA9IHt9OyAvLyDsnbTroIfqsowg6rCE65617Z6IIO2RnO2YhO2VtOyEnCDsnbjsiqTthLTsiqTrpbwg66eM65Ok7Ja07KSE7IiYIOyeiOuLpApjb25zb2xlLmxvZyhhbmltYWwyLmNvbnN0cnVjdG9yID09PSBhbmltYWwuY29uc3RydWN0b3IpOyAvLyDqt7jrnpjshJwg7J206rKD7J2AIHRydWXsnbTri6QKY29uc29sZS5sb2coYW5pbWFsMi5jb25zdHJ1Y3RvciA9PT0gT2JqZWN0KTsgLy8g66y866GgIOydtOqyg+uPhCB0cnVl7J2064ukCmxldCBhbmltYWwzID0gYW5pbWFsMi5jb25zdHJ1Y3RvcigpOyAvLyDqt7jroIfquLDsl5Ag66y866GgIOydtOugh+qyjOuPhCDsnbjsiqTthLTsiqTrpbwg66eM65Ok7Ja064K8IOyImCDsnojri6Q=
let animal = new Object(); // 이것은 특별하게도
let animal2 = {}; // 이렇게 간략히 표현해서 인스턴스를 만들어줄수 있다
console.log(animal2.constructor === animal.constructor); // 그래서 이것은 true이다
console.log(animal2.constructor === Object); // 물론 이것도 true이다
let animal3 = animal2.constructor(); // 그렇기에 물론 이렇게도 인스턴스를 만들어낼 수 있다
Ly8g7J2066CH6rKMIOyekOuwlOyKpO2BrOumve2KuOyXkCDri6TslpHtlZwg7KKF66WY7J2YIOqwkuydtCDsnojri6QuCmxldCB2YWwxID0gW107IC8vIOyWmOuKlCDsnbjsiqTthLTsiqTrnbzripTqsoPsnYQg7JyE7JeQ7IScIO2ZleyduO2WiOuLpApsZXQgdmFsMiA9IHt9OyAvLyDslpjrj4Qg7J247Iqk7YS07Iqk652864qU6rKDIOychOyXkOyEnCDtmZXsnbjtlojri6QKbGV0IHZhbDMgPSAnSGVsbG8nOyAvLyDslpjrj4Qg7J247Iqk7YS07Iqk7J246rCAPwpsZXQgdmFsNCA9IDEwMDsgLy8g7JaY64+EIOyduOyKpO2EtOyKpOyduOqwgD8KbGV0IHZhbDUgPSB0cnVlOyAvLyDslpjrj4Qg7J247Iqk7YS07Iqk7J246rCAPwoKLy8g7J2864uoIOyduOyKpO2EtOyKpOudvOuKlOqxtCDsnITsl5DshJwg7ZaI642Y6rGwIOyymOufvCDsg53shLHsnpDtlajsiJjrpbwg7Ya17ZW07IScIOunjOuTpOyWtOuCuOqyg+ydhCDrtoDrpbTripQg66eQ7J2064ukCi8vIOq3uOufrOuptCDsnbjsiqTthLTsiqTsl5DqsozripQg6re466W8IOywveyhsO2VtOuCvCDrlYwg7IKs7Jqp7ZWcIOyDneyEseyekO2VqOyImOuegOqyjCDsobTsnqztlbTslbztlZzri6TrnbzripQg7KCE7KCc7KGw6rG07J20IOyeiOuLpAoKY29uc29sZS5sb2codmFsMS5jb25zdHJ1Y3Rvcik7IC8vIOydtOufsOuwqeyLneycvOuhnCDsnbjsiqTthLTsiqTsnZgg7IOd7ISx7J6Q7ZWo7IiY66W8IOywuOyhsO2VoCDsiJgg7J6I64ukCmNvbnNvbGUubG9nKHZhbDIuY29uc3RydWN0b3IpOyAvLyDsnbTrn7DrsKnsi53snLzroZwg7J247Iqk7YS07Iqk7J2YIOyDneyEseyekO2VqOyImOulvCDssLjsobDtlaAg7IiYIOyeiOuLpApjb25zb2xlLmxvZyh2YWwzLmNvbnN0cnVjdG9yKTsgLy8g66y47J6Q7Je07J2YIOqyveyasOuPhCDrp4jssKzqsIDsp4DroZwg7J2066CH6rKMIOyDneyEseyekO2VqOyImCDssLjsobDqsIAg6rCA64ql7ZWY64ukCmNvbnNvbGUubG9nKHZhbDMuY29uc3RydWN0b3IgPT09IFN0cmluZyk7IC8vIOq3uOuemOyEnCDsnbTqsoPsnYAgdHJ1ZeqwgCDrkJzri6QKY29uc29sZS5sb2codmFsNC5jb25zdHJ1Y3RvciA9PT0gTnVtYmVyKTsgLy8g7JaY64+EIOuniOywrOqwgOyngOuhnCB0cnVlCmNvbnNvbGUubG9nKHZhbDUuY29uc3RydWN0b3IgPT09IEJvb2xlYW4pOyAvLyDslpjrj4Qg66eI7LCs6rCA7KeA66GcIHRydWUKCmxldCB2YWw2ID0gbmV3IFN0cmluZygnSGVsbG8nKTsgLy8g7J2066CH6rKMIO2VmOuKlOqyg+ydtCDrp4jssKzqsIDsp4DroZwg6rCA64ql7ZWY64ukCmxldCB2YWw3ID0gbmV3IE51bWJlcigxMDApOyAvLyDsnbTroIfqsowg7ZWY64qU6rKD7J20IOuniOywrOqwgOyngOuhnCDqsIDriqXtlZjri6QKbGV0IHZhbDggPSBuZXcgQm9vbGVhbih0cnVlKTsgLy8g7J2066CH6rKMIO2VmOuKlOqyg+ydtCDrp4jssKzqsIDsp4DroZwg6rCA64ql7ZWY64ukCgovLyDtlZjsp4Drp4wgdmFsM+qzvCB2YWw2IOydgCDssKjsnbTqsIAg7J6I64ukLgovLyDtlZjsp4Drp4wgdmFsNOqzvCB2YWw3IOydgCDssKjsnbTqsIAg7J6I64ukLgovLyDtlZjsp4Drp4wgdmFsNeqzvCB2YWw4IOydgCDssKjsnbTqsIAg7J6I64ukLgoKLy8g66y07Iqo7LCo7J206rCAIOyeiOuKlOqwgD8KLy8g7JWE656Y7JmAIOqwmeydgCDssKjsnbTqsIAg7J6I64ukCnZhbDMucHJvcCA9IDEyMzsKdmFsNi5wcm9wID0gNDU2Owpjb25zb2xlLmxvZyh2YWwzLnByb3ApOyAvLyB1bmRlZmluZWQKY29uc29sZS5sb2codmFsNi5wcm9wKTsgLy8gNDU2Cgp2YWw0LnByb3AgPSAxMjM7CnZhbDcucHJvcCA9IDQ1NjsKY29uc29sZS5sb2codmFsNC5wcm9wKTsgLy8gdW5kZWZpbmVkCmNvbnNvbGUubG9nKHZhbDcucHJvcCk7IC8vIDQ1NgoKdmFsNS5wcm9wID0gMTIzOwp2YWw4LnByb3AgPSA0NTY7CmNvbnNvbGUubG9nKHZhbDUucHJvcCk7IC8vIHVuZGVmaW5lZApjb25zb2xlLmxvZyh2YWw4LnByb3ApOyAvLyA0NTYKCi8vIOq3uOufrOuptCDsho3shLHsnYQg64Sj64qU6rKD7J20IOqwgOuKpe2VnCDsnbTsnKDripQg66y07JeH65WM66y47J286rmMPwovLyDqt7jqsoPsnYAg7JWE656Y7JeQ7IScIOydtOyVvOq4sO2VqeyLnOuLpCA=
// 이렇게 자바스크립트에 다양한 종류의 값이 있다.
let val1 = []; // 얘는 인스턴스라는것을 위에서 확인했다
let val2 = {}; // 얘도 인스턴스라는것 위에서 확인했다
let val3 = 'Hello'; // 얘도 인스턴스인가?
let val4 = 100; // 얘도 인스턴스인가?
let val5 = true; // 얘도 인스턴스인가?
// 일단 인스턴스라는건 위에서 했던거 처럼 생성자함수를 통해서 만들어낸것을 부르는 말이다
// 그러면 인스턴스에게는 그를 창조해낼 때 사용한 생성자함수란게 존재해야한다라는 전제조건이 있다
console.log(val1.constructor); // 이런방식으로 인스턴스의 생성자함수를 참조할 수 있다
console.log(val2.constructor); // 이런방식으로 인스턴스의 생성자함수를 참조할 수 있다
console.log(val3.constructor); // 문자열의 경우도 마찬가지로 이렇게 생성자함수 참조가 가능하다
console.log(val3.constructor === String); // 그래서 이것은 true가 된다
console.log(val4.constructor === Number); // 얘도 마찬가지로 true
console.log(val5.constructor === Boolean); // 얘도 마찬가지로 true
let val6 = new String('Hello'); // 이렇게 하는것이 마찬가지로 가능하다
let val7 = new Number(100); // 이렇게 하는것이 마찬가지로 가능하다
let val8 = new Boolean(true); // 이렇게 하는것이 마찬가지로 가능하다
// 하지만 val3과 val6 은 차이가 있다.
// 하지만 val4과 val7 은 차이가 있다.
// 하지만 val5과 val8 은 차이가 있다.
// 무슨차이가 있는가?
// 아래와 같은 차이가 있다
val3.prop = 123;
val6.prop = 456;
console.log(val3.prop); // undefined
console.log(val6.prop); // 456
val4.prop = 123;
val7.prop = 456;
console.log(val4.prop); // undefined
console.log(val7.prop); // 456
val5.prop = 123;
val8.prop = 456;
console.log(val5.prop); // undefined
console.log(val8.prop); // 456
// 그러면 속성을 넣는것이 가능한 이유는 무엇때문일까?
// 그것은 아래에서 이야기합시다
Ly8g7JyE7JeQ7IScIOyGjeyEseydhCDrhKPripTqsoPsl5Ag64yA7ZW0IOyeoOq5kCDtlbTrtKTri6QuCmxldCB2YWwgPSB7fTsgLy8g7J2065+wIOyYpOu4jOygne2KuOydmCDqsr3smrAKdmFsLnByb3AgPSA0NTc7IC8vIOydtOufsOyLneycvOuhnCDsho3shLHsnYQg64u07J2EIOyImCDsnojri6QuCmNvbnNvbGUubG9nKHZhbC5wcm9wKTsgLy8gNDU3CgovLyDqt7jrn7DrjbAg7JyE7JeQIFN0cmluZyBOdW1iZXIgQm9vbGVhbiDsnYQg7Ya17ZW07ISc64+EIDQ1NuydhCDri7TripTqsoPsnbQg6rCA64ql7ZaI64ukCi8vIOyYpOu4jOygne2KuOqwgCDslYTri4jrnbwgU3RyaW5n7J206rOgIE51bWJlcuydtOqzoCBCb29sZWFu7J24642wIOqwgOuKpe2WiOuLpOuKlCDrp5DsnbTri6QKCmxldCB2YWwyID0gW107CmxldCB2YWwzID0gZnVuY3Rpb24gKCkgeyB9OwpsZXQgdmFsNCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwp2YWwyLnByb3AgPSA0NTc7IC8vIOyGjeyEseydhCDri7TripTqsoPsnbQgQXJyYXnsnZgg6rK97Jqw64+EIOqwgOuKpe2VmOuLpAp2YWwzLnByb3AgPSA0NTc7IC8vIOyGjeyEseydhCDri7TripTqsoPsnbQgRnVuY3Rpb27snZgg6rK97Jqw64+EIOqwgOuKpe2VmOuLpAp2YWw0LnByb3AgPSA0NTc7IC8vIOyGjeyEseydhCDri7TripTqsoPsnbQgSFRNTERpdkVsZW1lbnTsnZgg6rK97Jqw64+EIOqwgOuKpe2VmOuLpApjb25zb2xlLmxvZyh2YWwyLnByb3ApOyAvLyA0NTcKY29uc29sZS5sb2codmFsMy5wcm9wKTsgLy8gNDU3CmNvbnNvbGUubG9nKHZhbDQucHJvcCk7IC8vIDQ1NwoKLy8g6re465+w642wIOydtOugh+qyjCDsho3shLHsnYQg64u064qU6rKD7J2AIOuqqOuRkCBPYmplY3TsnZgg7Yq57ISx7J2064ukCi8vIFN0cmluZyBOdW1iZXIgQm9vbGVhbiBGdW5jdGlvbiBBcnJheSDrk7Hrk7Eg6re4IOyZuOydmCDrqqjrk6DqsoPsnYAgT2JqZWN066W8IOuzuOuwm+qzoOyeiOuLpAoKY29uc29sZS5sb2codmFsMi5jb25zdHJ1Y3Rvci5wcm90b3R5cGUuX19wcm90b19fLmNvbnN0cnVjdG9yID09PSBPYmplY3QpOyAvLyB0cnVlIOydtOuLpApjb25zb2xlLmxvZyhBcnJheS5wcm90b3R5cGUuX19wcm90b19fLmNvbnN0cnVjdG9yID09PSBPYmplY3QpOyAvLyDrsJTroZwg7JyE7J2YIOy9lOuTnOyZgCDqsJnsnYAg7ZGc7ZiE7J2064ukCmNvbnNvbGUubG9nKHZhbDMuY29uc3RydWN0b3IucHJvdG90eXBlLl9fcHJvdG9fXy5jb25zdHJ1Y3RvciA9PT0gT2JqZWN0KTsgLy8gdHJ1ZSDsnbTri6QKY29uc29sZS5sb2coRnVuY3Rpb24ucHJvdG90eXBlLl9fcHJvdG9fXy5jb25zdHJ1Y3RvciA9PT0gT2JqZWN0KTsgLy8g67CU66GcIOychOydmCDsvZTrk5zsmYAg6rCZ7J2AIO2RnO2YhOydtOuLpApjb25zb2xlLmxvZyh2YWw0LmNvbnN0cnVjdG9yLnByb3RvdHlwZS5fX3Byb3RvX18uY29uc3RydWN0b3IgPT09IE9iamVjdCk7IC8vIGZhbHNlIOydtOuLpApjb25zb2xlLmxvZyhIVE1MRGl2RWxlbWVudC5wcm90b3R5cGUuX19wcm90b19fLmNvbnN0cnVjdG9yID09PSBPYmplY3QpOyAvLyDrsJTroZwg7JyE7J2YIOy9lOuTnOyZgCDqsJnsnYAg7ZGc7ZiE7J2064ukCgovLyDrp4jsp4Drp4nqurzripQg7JmcIGZhbHNl7J246rCACi8vIOq3uOqxuCDtmZXsnbjtlbTrs7TquLAg7KCE7JeQIOqwhOuLqO2VnOqygyDtlZjrgpgg7ZW067O07J6QCi8vIOyDneyEseyekCDtlajsiJjsl5DripQgbmFtZeydtOudvOuKlCDsho3shLHsnbQg7J6I64ukCmNvbnNvbGUubG9nKEFycmF5Lm5hbWUgPT09ICdBcnJheScpOyAvLyB0cnVl7J2064ukCgovLyDsnbTroIfqsowg7ZWc67KI7ZW067O07J6QCmNvbnNvbGUubG9nKEhUTUxEaXZFbGVtZW50LnByb3RvdHlwZS5fX3Byb3RvX18uY29uc3RydWN0b3IubmFtZSk7IC8vICJIVE1MRWxlbWVudCIKY29uc29sZS5sb2coSFRNTERpdkVsZW1lbnQucHJvdG90eXBlLl9fcHJvdG9fXy5fX3Byb3RvX18uY29uc3RydWN0b3IubmFtZSk7IC8vICJFbGVtZW50Igpjb25zb2xlLmxvZyhIVE1MRGl2RWxlbWVudC5wcm90b3R5cGUuX19wcm90b19fLl9fcHJvdG9fXy5fX3Byb3RvX18uY29uc3RydWN0b3IubmFtZSk7IC8vICJOb2RlIgpjb25zb2xlLmxvZyhIVE1MRGl2RWxlbWVudC5wcm90b3R5cGUuX19wcm90b19fLl9fcHJvdG9fXy5fX3Byb3RvX18uX19wcm90b19fLmNvbnN0cnVjdG9yLm5hbWUpOyAvLyAiRXZlbnRUYXJnZXQiCmNvbnNvbGUubG9nKEhUTUxEaXZFbGVtZW50LnByb3RvdHlwZS5fX3Byb3RvX18uX19wcm90b19fLl9fcHJvdG9fXy5fX3Byb3RvX18uX19wcm90b19fLmNvbnN0cnVjdG9yLm5hbWUpOyAvLyAiT2JqZWN0IgoKLy8g6rKw6rWtIHZhbDQg7J247Iqk7YS07Iqk66W8IOunjOuTpOuVjCDsgqzsmqnrkJwg7IOd7ISx7J6Q7ZWo7IiYIEhUTUxEaXZFbGVtZW5064qUIOyXrOufrOuLqOqzhOulvCDthrXtlbQg7IOB7JyEIOyDneyEseyekO2VqOyImOulvCDqs4Tsho0g7IOB7IaN67Cb6rOgIOq3uCDsoJzsnbwg7JyE7JeQ64qUIE9iamVjdOqwgCDsnojri6QKLy8g6re4656Y7IScIOydtCDsg4Hsho3qtIDqs4Tsl5Ag7J6I64qUIOyDneyEseyekO2VqOyImOuTpOydtCDqsIDsp4Qg7IaN7ISx65Ok7J2EIOuqqOuRkCDrs7jrsJvsnYQg7IiYIOyeiOqyjOuQnOqyg+ydtOuLpA==
// 위에서 속성을 넣는것에 대해 잠깐 해봤다.
let val = {}; // 이런 오브젝트의 경우
val.prop = 457; // 이런식으로 속성을 담을 수 있다.
console.log(val.prop); // 457
// 그런데 위에 String Number Boolean 을 통해서도 456을 담는것이 가능했다
// 오브젝트가 아니라 String이고 Number이고 Boolean인데 가능했다는 말이다
let val2 = [];
let val3 = function () { };
let val4 = document.createElement('div');
val2.prop = 457; // 속성을 담는것이 Array의 경우도 가능하다
val3.prop = 457; // 속성을 담는것이 Function의 경우도 가능하다
val4.prop = 457; // 속성을 담는것이 HTMLDivElement의 경우도 가능하다
console.log(val2.prop); // 457
console.log(val3.prop); // 457
console.log(val4.prop); // 457
// 그런데 이렇게 속성을 담는것은 모두 Object의 특성이다
// String Number Boolean Function Array 등등 그 외의 모든것은 Object를 본받고있다
console.log(val2.constructor.prototype.__proto__.constructor === Object); // true 이다
console.log(Array.prototype.__proto__.constructor === Object); // 바로 위의 코드와 같은 표현이다
console.log(val3.constructor.prototype.__proto__.constructor === Object); // true 이다
console.log(Function.prototype.__proto__.constructor === Object); // 바로 위의 코드와 같은 표현이다
console.log(val4.constructor.prototype.__proto__.constructor === Object); // false 이다
console.log(HTMLDivElement.prototype.__proto__.constructor === Object); // 바로 위의 코드와 같은 표현이다
// 마지막꺼는 왜 false인가
// 그걸 확인해보기 전에 간단한것 하나 해보자
// 생성자 함수에는 name이라는 속성이 있다
console.log(Array.name === 'Array'); // true이다
// 이렇게 한번해보자
console.log(HTMLDivElement.prototype.__proto__.constructor.name); // "HTMLElement"
console.log(HTMLDivElement.prototype.__proto__.__proto__.constructor.name); // "Element"
console.log(HTMLDivElement.prototype.__proto__.__proto__.__proto__.constructor.name); // "Node"
console.log(HTMLDivElement.prototype.__proto__.__proto__.__proto__.__proto__.constructor.name); // "EventTarget"
console.log(HTMLDivElement.prototype.__proto__.__proto__.__proto__.__proto__.__proto__.constructor.name); // "Object"
// 결국 val4 인스턴스를 만들때 사용된 생성자함수 HTMLDivElement는 여러단계를 통해 상위 생성자함수를 계속 상속받고 그 제일 위에는 Object가 있다
// 그래서 이 상속관계에 있는 생성자함수들이 가진 속성들을 모두 본받을 수 있게된것이다
Ly8g7JyE7J2YIEhUTUxEaXZFbGVtZW50IOyDneyEseyekO2VqOyImOyZgCDqsJnsnYAg7ZiV7YOc66GcIOyXrOufrOuLqOqzhOuhnCDsg4Hsho3rsJvripQg6rWs7KGw66W8IOyngeygkSDrp4zrk6TslrTrs7jri6TrqbQg64uk7J2M6rO8IOqwmeydtCDtlaAg7IiYIOyeiOuLpAoKZnVuY3Rpb24gQW5pbWFsKCkgewogICAgT2JqZWN0LmFwcGx5KHRoaXMsIGFyZ3VtZW50cyk7IC8vIOyVhOuemOyVhOuemOyVhOuemOudvOyduOydhCDtlbTspITqsbDrqbQg7ZW07KSY7JW87ZWc64ukCiAgICB0aGlzLm5hbWUgPSAnaGVsbG8nOwp9CkFuaW1hbC5wcm90b3R5cGUuX19wcm90b19fID0gT2JqZWN0LnByb3RvdHlwZTsgLy8g7ZW07KSY64+E65CY6rOgIOyViO2VtOykmOuPhCDrkJzri6QuIAoKZnVuY3Rpb24gTWFtbWFsaWEoKSB7CiAgICBBbmltYWwuYXBwbHkodGhpcywgYXJndW1lbnRzKQp9Ck1hbW1hbGlhLnByb3RvdHlwZS5fX3Byb3RvX18gPSBBbmltYWwucHJvdG90eXBlOwoKZnVuY3Rpb24gTW9ua2V5KCkgewogICAgTWFtbWFsaWEuYXBwbHkodGhpcywgYXJndW1lbnRzKQp9Ck1vbmtleS5wcm90b3R5cGUuX19wcm90b19fID0gTWFtbWFsaWEucHJvdG90eXBlOwoKbGV0IGFuID0gbmV3IE1vbmtleSgpOwpjb25zb2xlLmxvZyhhbi5fX3Byb3RvX18uY29uc3RydWN0b3IubmFtZSk7CmNvbnNvbGUubG9nKGFuLl9fcHJvdG9fXy5fX3Byb3RvX18uY29uc3RydWN0b3IubmFtZSk7CmNvbnNvbGUubG9nKGFuLl9fcHJvdG9fXy5fX3Byb3RvX18uX19wcm90b19fLmNvbnN0cnVjdG9yLm5hbWUpOwpjb25zb2xlLmxvZyhhbi5fX3Byb3RvX18uX19wcm90b19fLl9fcHJvdG9fXy5fX3Byb3RvX18uY29uc3RydWN0b3IubmFtZSk7CmNvbnNvbGUubG9nKGFuLm5hbWUpOyAvLyBhbuydgCBNb25rZXnroZwg66eM65OgIOyduOyKpO2EtOyKpOydtOuCmCBBbmltYWzsnYQg7IOB7IaN67Cb7JWY7Jy866+A66GcIGhlbGxvIOuCmOyYtA==
// 위의 HTMLDivElement 생성자함수와 같은 형태로 여러단계로 상속받는 구조를 직접 만들어본다면 다음과 같이 할 수 있다
function Animal() {
Object.apply(this, arguments); // 아래아래아래라인을 해줄거면 해줘야한다
this.name = 'hello';
}
Animal.prototype.__proto__ = Object.prototype; // 해줘도되고 안해줘도 된다.
function Mammalia() {
Animal.apply(this, arguments)
}
Mammalia.prototype.__proto__ = Animal.prototype;
function Monkey() {
Mammalia.apply(this, arguments)
}
Monkey.prototype.__proto__ = Mammalia.prototype;
let an = new Monkey();
console.log(an.__proto__.constructor.name);
console.log(an.__proto__.__proto__.constructor.name);
console.log(an.__proto__.__proto__.__proto__.constructor.name);
console.log(an.__proto__.__proto__.__proto__.__proto__.constructor.name);
console.log(an.name); // an은 Monkey로 만든 인스턴스이나 Animal을 상속받았으므로 hello 나옴
Ly8g7JyE7JmAIOyZhOyghCDqsJnsnYDqsoPsnYQgY2xhc3Mg66y467KV7Jy866Gc64+EIOqwgOuKpe2VmOuLpApjbGFzcyBBbmltYWwgZXh0ZW5kcyBPYmplY3QgeyAvLyBleHRlbmRzIE9iamVjdCDripQg7ZW07KSY64+E65CY6rOgIOyViO2VtOykmOuPhCDrkJzri6QuIO2VtOykhOqxsOudvOuptCBjb25zdHJ1Y3RvcigpIOyViOyXkOyEnCBzdXBlcigpIOulvCDtlbTspJjslbztlZzri6QKICAgIG5hbWUgPSAnaGVsbG8nOwogICAgY29uc3RydWN0b3IoKSB7CiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKQogICAgfQp9CmNsYXNzIE1hbW1hbGlhIGV4dGVuZHMgQW5pbWFsIHsKICAgIGNvbnN0cnVjdG9yKCkgewogICAgICAgIHN1cGVyKC4uLmFyZ3VtZW50cykKICAgIH0KfQpjbGFzcyBNb25rZXkgZXh0ZW5kcyBNYW1tYWxpYSB7CiAgICBjb25zdHJ1Y3RvcigpIHsKICAgICAgICBzdXBlciguLi5hcmd1bWVudHMpCiAgICB9Cn0KCmxldCBhbiA9IG5ldyBNb25rZXkoMSwgMiwgMyk7CmNvbnNvbGUubG9nKGFuLl9fcHJvdG9fXy5jb25zdHJ1Y3Rvci5uYW1lKTsKY29uc29sZS5sb2coYW4uX19wcm90b19fLl9fcHJvdG9fXy5jb25zdHJ1Y3Rvci5uYW1lKTsKY29uc29sZS5sb2coYW4uX19wcm90b19fLl9fcHJvdG9fXy5fX3Byb3RvX18uY29uc3RydWN0b3IubmFtZSk7CmNvbnNvbGUubG9nKGFuLl9fcHJvdG9fXy5fX3Byb3RvX18uX19wcm90b19fLl9fcHJvdG9fXy5jb25zdHJ1Y3Rvci5uYW1lKTsKY29uc29sZS5sb2coYW4ubmFtZSk7IC8vIGFu7J2AIE1vbmtleeuhnCDrp4zrk6Ag7J247Iqk7YS07Iqk7J2064KYIEFuaW1hbOydhCDsg4Hsho3rsJvslZjsnLzrr4DroZwgaGVsbG8g64KY7Ji0
// 위와 완전 같은것을 class 문법으로도 가능하다
class Animal extends Object { // extends Object 는 해줘도되고 안해줘도 된다. 해줄거라면 constructor() 안에서 super() 를 해줘야한다
name = 'hello';
constructor() {
super(...arguments)
}
}
class Mammalia extends Animal {
constructor() {
super(...arguments)
}
}
class Monkey extends Mammalia {
constructor() {
super(...arguments)
}
}
let an = new Monkey(1, 2, 3);
console.log(an.__proto__.constructor.name);
console.log(an.__proto__.__proto__.constructor.name);
console.log(an.__proto__.__proto__.__proto__.constructor.name);
console.log(an.__proto__.__proto__.__proto__.__proto__.constructor.name);
console.log(an.name); // an은 Monkey로 만든 인스턴스이나 Animal을 상속받았으므로 hello 나옴