ํด๋์ค์ ์์ฑ์ ํจ์์ ๋ช๊ฐ์ง ์ฐจ์ด โญ๏ธ
์ผ๊ธ ๊ฐ์ฒด๋ก์์ ํน์งโญ๏ธ
- ๋ฌด๋ช ์ ๋ฆฌํฐ๋ด๋ก ์์ฑํ ์ ์๋ค. ์ฆ ๋ฐํ์์ ์์ฑ์ด ๊ฐ๋ฅ
- ๋ณ์๋ ์๋ฃ๊ตฌ์กฐ์ ์ ์ฅ๊ฐ๋ฅ
- ํจ์์ ๋งค๊ฐ๋ณ์์๊ฒ ์ ๋ฌํ ์ ์๋ค.
- ํจ์์ ๋ฐํ๊ฐ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
ํด๋์ค ๋ชธ์ฒด์์ ์ ์ํ ์ ์๋ ๋ฉ์๋๋ Constructor(์์ฑ์), ํ๋กํ ํ์ ๋ฉ์๋, ์ ์ ๋ฉ์๋๊ฐ ์๋ค.
ํด๋์ค ์ ์ธ๋ฌธ์ผ๋ก ์ ์ํ ํด๋์ค๋ ํจ์ ์ ์ธ๋ฌธ๊ณผ ๊ฐ์ด ์์ค์ฝ๋ ํ๊ฐ ๊ณผ์ , ๋ฐํ์ ์ด์ ์ ๋จผ์ ํ๊ฐ๋์ด ํจ์ ๊ฐ์ฒด๋ฅผ
์์ฑํ๋ค.
ํด๋์ค๊ฐ ํ๊ฐ๋์ด ์์ฑ๋ ํจ์ ๊ฐ์ฒด๋ ์์ฑ์ ํจ์๋ก์ ํธ์ถํ ์ ์๋ ํจ์, ์ฆ constructor๋ค.
์์ฑ์ ํจ์๋ก ํธ์ถํ ์ ์๋ ํจ์๋ ํจ์ ์ ์๊ฐ ํ๊ฐ๋์ด ํจ์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ์์ ์ ํ๋กํ ํ์ ๋ ๋๋ถ์ด ์์ฑ๋๋ค.
ํด๋์ค ์ ์ธ๋ฌธ๋ ๋ณ์ ์ ์ธ, ํจ์ ์ ์์ ๋ง์ฐฌ๊ฐ์ง๋ก ํธ์ด์คํ ์ด ๋ฐ์ํ๋ค! ๋จ, ํด๋์ค๋ let, const ํค์๋๋ก ์ ์ธํ ๋ณ์์ฒ๋ผ ํธ์ด์คํ
var, let, const, function, function*, class ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ธ๋ ๋ชจ๋ ์๋ณ์๋ ํธ์ด์คํ ๋๋ค. ๋ชจ๋ ์ ์ธ๋ฌธ์ ๋ฐํ์ ์ด์ ์ ๋จผ์ ์คํ
ํด๋์ค๋ ์์ฑ์ ํจ์์ด๋ฉฐ new ์ฐ์ฐ์์ ํจ๊ป ํธ์ถ๋์ด ์ธ์คํด์ค๋ฅผ ์์ฑํ๋ค.
class Person {}
// ์ธ์คํด์ค ์์ฑ
const me = new Person();
console.log(me); // Person {}
ํด๋์ค๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ๋ ๊ฒ์ด ์ ์ผํ ์กด์ฌ ์ด์ ์ด๋ฏ๋ก ๋ฐ๋์ new ์ฐ์ฐ์์ ํจ๊ผ ํธ์ถํด์ผ ํจ!
constructor๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ๊ณ ์ด๊ธฐํํ๊ธฐ ์ํ ํน์ํ ๋ฉ์๋๋ค. ์ด๋ฆ๋ณ๊ฒฝโ
์์ฑ์ ํจ์์ ๋ง์ฐฌ๊ฐ์ง๋ก constructor ๋ด๋ถ์์ this์ ์ถ๊ฐํ ํ๋กํผํฐ๋ ์ธ์คํด์ค ํ๋กํผํฐ๊ฐ ๋๋ค.
constructor ๋ด๋ถ์ this ๋ ์์ฑ์ ํจ์์ ๋ง์ฐฌ๊ฐ์ง๋ก ํด๋์ค๊ฐ ์์ฑํ ์ธ์คํด์ค๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
constructor๋ ๋ฉ์๋๋ก ํด์๋๋ ๊ฒ์ด ์๋๋ผ ํด๋์ค๊ฐ ํ๊ฐ๋์ด ์์ฑํ ํจ์ ๊ฐ์ฒด ์ฝ๋์ ์ผ๋ถ๊ฐ ๋๋ค.
โ๏ธ ํด๋์ค์ constructor ๋ฉ์๋์ ํ๋กํ ํ์ ์ constructor ํ๋กํผํฐ๋ ์ด๋ฆ์ด ๊ฐ์ ํผ๋ํ๊ธฐ ์ฝ์ง๋ง ์ง์ ์ ์ธ ๊ด๋ จ์ด ์๋ค. ํ๋กํ ํ์ ์ constructor ํ๋กํผํฐ๋ ๋ชจ๋ ํ๋กํ ํ์ ์ด ๊ฐ์ง๊ณ ์๋ ํ๋กํผํฐ์ด๋ฉฐ, ์์ฑ์ ํจ์๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
constructor์ ์์ฑ์ ํจ์์์ ์ฐจ์ด
์์ฑ์ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์คํด์ค๋ฅผ ์์ฑํ๋ ๊ฒฝ์ฐ ํ๋กํ ํ์ ๋ฉ์๋๋ฅผ ์์ฑํ๊ธฐ ์ํด์๋ ๋ช ์์ ์ผ๋ก ํ๋กํ ํ์ ์ ๋ฉ์๋๋ฅผ ์ถ๊ฐํด์ผ ํ๋ค.
function Person(name) {
this.name = name;
}
// ํ๋กํ ํ์
๋ฉ์๋
Person.prototype.sayHi = function () {
console.log(`Hi! My name is ${this.name}`);
};
const me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee
ํด๋์ค ๋ชธ์ฒด์์ ์ ์ํ ๋ฉ์๋๋ ์์ฑ์ ํจ์์ ์ํ ๊ฐ์ฒด ์์ฑ ๋ฐฉ์๊ณผ๋ ๋ค๋ฅด๊ฒ ํด๋์ค์ prototype ํ๋กํผํฐ์ ๋ฉ์๋๋ฅผ ์ถ๊ฐํ์ง ์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํ๋กํ ํ์ ๋ฉ์๋๊ฐ ๋๋ค
class Person {
// ์์ฑ์
constructor(name) {
// ์ธ์คํด์ค ์์ฑ ๋ฐ ์ด๊ธฐํ
this.name = name;
}
// ํ๋กํ ํ์
๋ฉ์๋
sayHi() {
console.log(`Hi! My name is ${this.name}`);
}
}
const me = new Person("Lee");
me.sayHi(); // Hi! My name is Lee
์์ฑ์ ํจ์์ ๋ง์ฐฌ๊ฐ์ง๋ก ํด๋์ค๊ฐ ์์ฑํ ์ธ์คํด์ค๋ ํ๋กํ ํ์ ์ฒด์ธ์ ์ผ์์ด ๋๋ค.
ํ๋กํ ํ์ ์ฒด์ธ์ ๊ธฐ์กด์ ๋ชจ๋ ๊ฐ์ฒด ์์ฑ ๋ฐฉ์๋ฟ๋ง ์๋๋ผ ํด๋์ค์ ์ํด ์์ฑ๋ ์ธ์คํด์ค์๋ ๋์ผํ๊ฒ ์ ์ฉ๋๋ค.
ํด๋์ค๋ ์์ฑ์ ํจ์์ ๋ง์ฐฌ๊ฐ์ง๋ก ํ๋กํ ํ์ ๊ธฐ๋ฐ์ ๊ฐ์ฒด ์์ฑ ๋ฉ์ปค๋์ฆ์ด๋ค.
์ธ์คํด์ค๋ฅผ ์์ฑํ์ง ์์๋ ํธ์ถํ ์ ์๋ ๋ฉ์๋
ํด๋์ค์์๋ ๋ฉ์๋์ static ํค์๋๋ฅผ ๋ถ์ด๋ฉด ์ ์ ๋ฉ์๋๊ฐ ๋๋ค.
class Person {
// ์์ฑ์
constructor(name) {
// ์ธ์คํด์ค ์์ฑ ๋ฐ ์ด๊ธฐํ
this.name = name;
}
// ์ ์ ๋ฉ์๋
static sayHi() {
console.log('Hi!');
}
}
์ ์ ๋ฉ์๋๋ ํด๋์ค์ ๋ฐ์ธ๋ฉ๋ ๋ฉ์๋๊ฐ ๋๋ค.
ํด๋์ค๋ ํด๋์ค ์ ์(ํด๋์ค ์ ์ธ๋ฌธ์ด๋ ํด๋์ค ํํ์)๊ฐ ํ๊ฐ๋๋ ์์ ์ ํจ์ ๊ฐ์ฒด๊ฐ ๋๋ฏ๋ก ์ธ์คํด์ค์ ๋ฌ๋ฆฌ ๋ณ๋ค๋ฅธ ์์ ๊ณผ์ ์ด ํ์ ์๋ค.
์ ์ ๋ฉ์๋๋ ํด๋์ค ์ ์ ์ดํ ์ธ์คํด์ค๋ฅผ ์์ฑํ์ง ์์๋ ํธ์ถํ ์ ์๋ค.
ํ๋กํ ํ์ ๋ฉ์๋๋ ์ธ์คํด์ค๋ก ํธ์ถํด์ผ ํ๋ฏ๋ก ํ๋กํ ํ์ ๋ฉ์๋ ๋ด๋ถ์ this๋ ํ๋กํ ํ์ ๋ฉ์๋๋ฅผ ํธ์ถํ ์ธ์คํด์ค๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
์ ์ ๋ฉ์๋๋ ํด๋์ค๋ก ํธ์ถํด์ผ ํ๋ฏ๋ก ์ ์ ๋ฉ์๋ ๋ด๋ถ์ this ๋ ์ธ์คํด์ค๊ฐ ์๋ ํด๋์ค๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
์ฆ, ํ๋กํ ํ์ ๋ฉ์๋์ ์ ์ ๋ฉ์๋ ๋ด๋ถ์ this ๋ฐ์ธ๋ฉ์ด ๋ค๋ฅด๋ค.
new ์ฐ์ฐ์์ ํจ๊ป ํด๋์ค๋ฅผ ํธ์ถํ๋ฉด ์์ฑ์ ํจ์์ ๋ง์ฐฌ๊ฐ์ง๋ก ํด๋์ค์ ๋ด๋ถ ๋ฉ์๋ [[Construct]]๊ฐ ํธ์ถ๋๋ค. ํด๋์ค๋ new ์ฐ์ฐ์ ์์ด ํธ์ถํ ์ ์๋ค.
1 ์ธ์คํด์ค ์์ฑ๊ณผ this ๋ฐ์ธ๋ฉ
new ์ฐ์ฐ์์ ํจ๊ป ํด๋์ค๋ฅผ ํธ์ถํ๋ฉด constructor ์ ๋ด๋ถ ์ฝ๋๊ฐ ์คํ๋๊ธฐ์ ์์ ์๋ฌต์ ์ผ๋ก ๋น ๊ฐ์ฒด๊ฐ ์์ฑ๋๋ค. ์ด ๋น ๊ฐ์ฒด๊ฐ (์์ฑ๋ ๊ฒ์ ์๋์ง๋ง) ํด๋์ค๊ฐ ์์ฑํ ์ธ์คํด์ค์ด๋ค
ํด๋์ค๊ฐ ์์ฑํ ์ธ์คํด์ค์ ํ๋กํ ํ์
์ผ๋ก ํด๋์ค์ prototype ํ๋กํผํฐ๊ฐ ๊ฐ๋ฆฌํค๋ ๊ฐ์ฒด๊ฐ ์ค์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์์ฑ๋ ๋น ๊ฐ์ฒด, ์ธ์คํด์ค๋ this์ ๋ฐ์ธ๋ฉ๋๋ค. ๋ฐ๋ผ์ constructor ๋ด๋ถ์ this๋ ํด๋์ค๊ฐ ์์ฑํ ์ธ์คํด์ค๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
2 ์ธ์คํด์ค ์ด๊ธฐํ
constructor์ ๋ด๋ถ ์ฝ๋๊ฐ ์คํ๋์ด this์ ๋ฐ์ธ๋ฉ๋์ด ์๋ ์ธ์คํด์ค๋ฅผ ์ด๊ธฐํํ๋ค. this์ ๋ฐ์ธ๋ฉ๋์ด ์๋ ์ธ์คํด์ค์ ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ๊ณ constructor๊ฐ ์ธ์๋ก ์ ๋ฌ๋ฐ์ ์ด๊ธฐ๊ฐ์ผ๋ก ์ธ์คํด์ค์ ํ๋กํผํฐ ๊ฐ์ ์ด๊ธฐํ, constructor๊ฐ ์๋ต๋์๋ค๋ฉด ์ด ๊ณผ์ ๋ ์๋ต.
3 ์ธ์คํด์ค ๋ฐํ
ํด๋์ค์ ๋ชจ๋ ์ฒ๋ฆฌ๊ฐ ๋๋๋ฉด ์์ฑ๋ ์ธ์คํด์ค๊ฐ ๋ฐ์ธ๋ฉ๋ this๊ฐ ์๋ฌต์ ์ผ๋ก ๋ฐํ๋จ
class Person {
// ์์ฑ์
constructor(name) {
// 1. ์๋ฌต์ ์ผ๋ก ์ธ์คํด์ค๊ฐ ์์ฑ๋๊ณ this์ ๋ฐ์ธ๋ฉ๋๋ค.
console.log(this); // Person {}
console.log(Object.getPrototypeOf(this) === Person.prototype); // true
// 2. this ์ ๋ฐ์ธ๋ฉ ๋์ด์๋ ์ธ์คํด์ค๋ฅผ ์ด๊ธฐํํ๋ค.
this.name = name;
// 3. ์์ฑ๋ ์ธ์คํด์ค๊ฐ ๋ฐ์ธ๋ฉ ๋ this ๊ฐ ์๋ฌต์ ์ผ๋ก ๋ฐํ๋๋ค.
}
}
const test = new Person("์ง์");
console.log(test);
์ธ์คํด์ค ํ๋กํผํฐ๋ constructor ๋ด๋ถ์์ ์ ์ํด์ผ ํจ.
constructor ๋ด๋ถ ์ฝ๋๊ฐ ์คํ๋๊ธฐ ์ ์ constructor ๋ด๋ถ์ this์๋ ์ด๋ฏธ ํด๋์ค๊ฐ new ์ฐ์ฐ์์ ํจ๊ป ํธ์ถ๋๋ฉฐ ์๋ฌต์ ์ผ๋ก ์์ฑํ ์ธ์คํด์ค์ธ ๋น ๊ฐ์ฒด๊ฐ ๋ฐ์ธ๋ฉ๋์ด์๋ค.
constructor ๋ด๋ถ์์ this์ ์ธ์คํด์ค ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ๋ค. ์ด๋ก์จ ์ธ์คํด์ค์ ํ๋กํผํฐ๊ฐ ์ถ๊ฐ๋์ด ์ธ์คํด์ค๊ฐ ์ด๊ธฐํ๋๋ค.
์์ฒด์ ์ผ๋ก๋ ๊ฐ์ ๊ฐ์ง ์๊ณ ๋ค๋ฅธ ๋ฐ์ดํฐ ํ๋กํผํฐ์ ๊ฐ์ ์ฝ๊ฑฐ๋ ์ ์ฅํ ๋ ์ฌ์ฉํ๋ ์ ๊ทผ์ ํจ์๋ก ๊ตฌ์ฑ๋ ํ๋กํผํฐ๋ค.
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
// fullName ์ ์ ๊ทผ์ ํจ์๋ก ๊ตฌ์ฑ๋ ์ ๊ทผ์ ํ๋กํผํฐ๋ค.
// getter ํจ์
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
// setter ํจ์
set fullName(name) {
[this.firstName, this.lastName] = name.split(" ");
}
}
const me = new Person("ungmo", "Lee");
// ๋ฐ์ดํฐ ํ๋กํผํฐ๋ฅผ ํตํ ํ๋กํผํฐ ๊ฐ์ ์ ์ฅ
console.log(`${me.firstName} ${me.lastName}`); // ungmo Lee
// ์ ๊ทผ์ ํ๋กํผํฐ๋ฅผ ํตํ ํ๋กํผํฐ ๊ฐ์ ์ ์ฅ
// ์ ๊ทผ์ ํ๋กํผํฐ fullName์ ๊ฐ์ ์ ์ฅํ๋ฉด setter ํจ์๊ฐ ํธ์ถ๋๋ค.
me.fullName = "Heegun Lee";
console.log(me); // {firstName: 'Heegun', lastName: 'Lee'}
// ์ ๊ทผ์ ํ๋กํผํฐ๋ฅผ ํตํ ํ๋กํผํฐ ๊ฐ์ ์ฐธ์กฐ
// ์ ๊ทผ์ ํ๋กํผํฐ fullName ์ ์ ๊ทผํ๋ฉด getter ํจ์๊ฐ ํธ์ถ๋๋ค.
console.log(me.fullName); // Heegun Lee
// fullName์ ์ ๊ทผ์ ํ๋กํผํฐ๋ค.
// ์ ๊ทผ์ ํ๋กํผํฐ๋ get, set, enumerable, configurable ํ๋กํผํฐ ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ๊ฐ๋๋ค.
console.log(Object.getOwnPropertyDescriptor(Person.prototype, "fullName"));
// {get: f, set: f, enumerable: false, configurable: true}
์ ๊ทผ์ ํ๋กํผํฐ๋ ์์ฒด์ ์ผ๋ก ๊ฐ์ ๊ฐ์ง ์๊ณ ๋ค๋ฅธ ๋ฐ์ดํฐ ํ๋กํผํฐ์ ๊ฐ์ ์ฝ๊ฑฐ๋ ์ ์ฅํ ๋ ์ฌ์ฉํ๋ ์ ๊ทผ์ ํจ์, getterํจ์์ setter ํจ์๋ก ๊ตฌ์ฑ
getter์ setter ์ด๋ฆ์ ์ธ์คํด์ค ํ๋กํผ์น๋ผ ์ฌ์ฉ. ๋ค์ ๋งํด getter๋ ํธ์ถํ๋ ๊ฒ์ด ์๋๋ผ ํ๋กํผํฐ์ฒ๋ผ ์ฐธ์กฐํ๋ ํ์์ผ๋ก ์ฌ์ฉํ๋ฉฐ, ์ฐธ์กฐ ์์ ๋ด๋ถ์ ์ผ๋ก getter๊ฐ ํธ์ถ๋๋ค, setter๋ ํธ์ถํ๋ ๊ฒ์ด ์๋๋ผ ํ๋กํผํฐ์ฒ๋ผ ๊ฐ์ ํ ๋นํ๋ ํ์์ผ๋ก ์ฌ์ฉํ๋ฉฐ, ํ ๋น ์์ ๋ด๋ถ์ ์ผ๋ก setter๊ฐ ํธ์ถ
getter๋ ์ด๋ฆ ๊ทธ๋๋ก ๋ฌด์ธ๊ฐ๋ฅผ ์ทจ๋ํ ๋ ์ฌ์ฉํ๋ฏ๋ก ๋ฐ๋์ ๋ฌด์ธ๊ฐ๋ฅผ ๋ฐํํด์ผ ํ๊ณ setter๋ ๋ฌด์ธ๊ฐ๋ฅผ ํ๋กํผํฐ์ ํ ๋นํด์ผ ํ ๋ ์ฌ์ฉํ๋ฏ๋ก ๋ฐ๋์ ๋งค๊ฐ๋ณ์๊ฐ ์์ด์ผ ํ๋ค. setter๋ ๋จ ํ๋์ ๊ฐ๋ง ํ ๋น๋ฐ๊ธฐ ๋๋ฌธ์ ๋จ ํ๋์ ๋งค๊ฐ๋ณ์๋ง ์ ์ธ
ํด๋์ค ํ๋๋ ํด๋์ค ๊ธฐ๋ฐ ๊ฐ์ฒด์งํฅ ์ธ์ด์์ ํด๋์ค๊ฐ ์์ฑํ ์ธ์คํด์ค์ ํ๋กํผํฐ๋ฅผ ๊ฐ๋ฆฌํค๋ ์ฉ์ด๋ค.
ํด๋์ค ํ๋ ์ ์ ์ ์์ผ๋ก ์ธํด ์ธ์คํด์ค ํ๋กํผํฐ๋ฅผ ์ ์ํ๋ ๋ฐฉ์์ ๋ ๊ฐ์ง๊ฐ ์๋ค
์ธ์คํด์ค ํ๋กํผํฐ๋ ์ธ์คํด์ค๋ฅผ ํตํด ํด๋์ค ์ธ๋ถ์์ ์ธ์ ๋ ์ฐธ์กฐํ ์ ์๋ค.
ํด๋์ค ํ๋ ์ ์ ์ ์์ ์ฌ์ฉํ๋๋ผ๋ ํด๋์ค ํ๋๋ ๊ธฐ๋ณธ์ ์ผ๋ก publicํ๊ธฐ ๋๋ฌธ์ ์ธ๋ถ์ ๊ทธ๋๋ก ๋ ธ์ถ๋๋ค.
public ํ๋๋ ์ด๋์๋ ์ฐธ์กฐํ ์ ์์ง๋ง private ํ๋๋ ํด๋์ค ๋ด๋ถ์์๋ง ์ฐธ์กฐํ ์ ์๋ค.
static publicํ๋, static private ํ๋, static private ๋ฉ์๋๋ฅผ ์ ์ํ ์ ์๋ ์๋ก์ด ํ์ค ์ฌ์์ด ์ ์๋์ด ์๋ค. ์ด ์ ์ ์ค์์ static public/private ํ๋๋ ํ์ฌ ๊ตฌํ๋์ด ์๋ค.
ํ๋กํ ํ์ ๊ธฐ๋ฐ ์์์ ํ๋กํ ํ์ ์ฒด์ธ์ ํตํด ๋ค๋ฅธ ๊ฐ์ฒด์ ์์ฐ์ ์์๋ฐ๋ ๊ฐ๋ ์ด์ง๋ง ์์์ ์ํ ํด๋์ค ํ์ฅ์ ๊ธฐ์กด ํด๋์ค๋ฅผ ์์๋ฐ์ ์๋ก์ด ํด๋์ค๋ฅผ ํ์ฅํ์ฌ ์ ์ํ๋ ๊ฒ์ด๋ค.
์์์ ํตํด ํด๋์ค๋ฅผ ํ์ฅํ๋ ค๋ฉด extends ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ์์๋ฐ์ ํด๋์ค๋ฅผ ์ ์
์์์ ํตํด ํ์ฅ๋ ํด๋์ค๋ฅผ ์๋ธํด๋์ค๋ผ ๋ถ๋ฅด๊ณ , ์๋ธํด๋์ค์๊ฒ ์์๋ ํด๋์ค๋ฅผ ์ํผํด๋์ค๋ผ ๋ถ๋ฅธ๋ค, ์๋ธํด๋์ค๋ฅผ ํ์ ํด๋์ค ๋๋ ์์ ํด๋์ค, ์ํผํด๋์ค๋ฅผ ๋ฒ ์ด์ค ํด๋์ค ๋๋ ๋ถ๋ชจ ํด๋์ค๋ผ๊ณ ๋ถ๋ฅด๊ธฐ๋ ํ๋ค.
extends ํค์๋์ ์ญํ ์ ์ํผํด๋์ค์ ์๋ธํด๋์ค ๊ฐ์ ์์ ๊ด๊ณ๋ฅผ ์ค์ ํ๋ ๊ฒ
extends ํค์๋๋ ํด๋์ค๋ฟ๋ง ์๋๋ผ ์์ฑ์ ํจ์๋ฅผ ์์๋ฐ์ ํด๋์ค๋ฅผ ํ์ฅํ ์๋ ์๋ค. ๋จ, extends ํค์๋ ์์๋ ๋ฐ๋์ ํด๋์ค๊ฐ ์์ผ ํ๋ค.
extends ํค์๋ ๋ค์์๋ ํด๋์ค๋ฟ๋ง์ด ์๋๋ผ [[Construct]] ๋ด๋ถ ๋ฉ์๋๋ฅผ ๊ฐ๋ ํจ์ ๊ฐ์ฒด๋ก ํ๊ฐ๋ ์ ์๋ ๋ชจ๋ ํํ์์ ์ฌ์ฉํ ์ ์๋ค.
์๋ธํด๋์ค์์ constructor๋ฅผ ์๋ตํ๋ฉด ํด๋์ค์ ๋ค์๊ณผ ๊ฐ์ constructor๊ฐ ์๋ฌต์ ์ผ๋ก ์ ์๋จ. args๋ new ์ฐ์ฐ์์ ํจ๊ผ ํด๋์ค๋ฅผ ํธ์ถํ ๋ ์ ๋ฌํ ์ธ์ค์ ๋ฆฌ์คํธ๋ค.
constructor(...args) { super(...args);}
super ํค์๋๋ ํจ์์ฒ๋ผ ํธ์ถํ ์๋ ์๊ณ this์ ๊ฐ์ด ์๋ณ์์ฒ๋ผ ์ฐธ์กฐํ ์ ์๋ ํน์ํ ํค์๋๋ค. super๋ ๋ค์๊ณผ ๊ฐ์ด ๋์ํ๋ค.
- super๋ฅผ ํธ์ถํ๋ฉด ์ํผํด๋์ค์ constructor๋ฅผ ํธ์ถํ๋ค.
- super๋ฅผ ์ฐธ์กฐํ๋ฉด ์ํผํด๋์ค์ ๋ฉ์๋๋ฅผ ํธ์ถํ ์ ์๋ค.
โ๏ธ ๋ฉ์๋ ๋ด์์ super๋ฅผ ์ฐธ์กฐํ๋ฉด ์ํผํด๋์ค์ ๋ฉ์๋๋ฅผ ํธ์ถํ ์ ์๋ค.super ํธ์ถ
super ๋ฅผ ํธ์ถํ๋ฉด ์ํผํด๋์ค์ constructor(super-constructor)๋ฅผ ํธ์ถํ๋ค.
์ํผํด๋์ค์ constructor ๋ด๋ถ์์ ์ถ๊ฐํ ํ๋กํผํฐ๋ฅผ ๊ทธ๋๋ก ๊ฐ๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ๋ค๋ฉด,
์๋ธํด๋์ค์ constructor๋ฅผ ์๋ตํ ์ ์๋ค.
์ด ๋ new ์ฐ์ฐ์์ ํจ๊ป ์๋ธํด๋์ค๋ฅผ ํธ์ถํ๋ฉด์ ์ ๋ฌํ ์ธ์๋ ๋ชจ๋ ์๋ธํด๋์ค์ ์๋ฌต์ ์ผ๋ก ์ ์๋ constructor์ super ํธ์ถ์ ํตํด ์ํผํด๋์ค์ constructor ์ ์ ๋ฌ๋๋ค.
์ํผํด๋์ค์์ ์ถ๊ฐํ ํ๋กํผํฐ์ ์๋ธํด๋์ค์์ ์ถ๊ฐํ ํ๋กํผํฐ๋ฅผ ๊ฐ๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ๋ค๋ฉด,
์๋ธํด๋์ค์ constructor ๋ฅผ ์๋ตํ ์ ์๋ค.
์ด ๋ new ์ฐ์ฐ์์ ํจ๊ป ์๋ธํด๋์ค๋ฅผ ํธ์ถํ๋ฉด์ ์ ๋ฌํ ์ธ์ ์ค์์ ์ํผํด๋์ค์ constructor ์ ์ ๋ฌํ ํ์๊ฐ ์๋ ์ธ์๋ ์๋ธํด๋์ค์ constructor์์ ํธ์ถํ๋ super ๋ฅผ ํตํด ์ ๋ฌํ๋ค.
โ๏ธ super๋ฅผ ํธ์ถ์ ์ฃผ์์ฌํญ
โ๏ธ super ์ฐธ์กฐ
๋ฉ์๋ ๋ด์์ super๋ฅผ ์ฐธ์กฐํ๋ฉด ์ํผํด๋์ค์ ๋ฉ์๋๋ฅผ ํธ์ถํ ์ ์๋ค.
์ฃผ์ํ ๊ฒ์ ES6์ ๋ฉ์๋ ์ถ์ฝ ํํ์ผ๋ก ์ ์๋ ํจ์๋ง์ด [[HomeObject]]๋ด๋ถ ์ฌ๋กฏ์ ๊ฐ์ง๋ค.
[[HomeObject]]๋ด๋ถ ์ฌ๋กฏ์ ๊ฐ์ง๋ ํจ์๋ง์ด super๋ฅผ ์ฐธ์กฐํ ์ ์๋ค.
๋ฐ๋ผ์ [[HomeObject]]๋ด๋ถ ์ฌ๋กฏ์ ๊ฐ์ง๋ ES6์ ๋ฉ์๋ ์ถ์ฝ ํํ์ผ๋ก ์ ์๋ ํจ์๋ง์ด super ์ฐธ์กฐ๋ฅผ ํ ์ ์๋ค. ๋จ super ์ฐธ์กฐ๋ ์ํผํด๋์ค์ ๋ฉ์๋๋ฅผ ์ฐธ์กฐํ๊ธฐ ์ํด ์ฌ์ฉํ๋ฏ๋ก ์๋ธํด๋์ค์ ๋ฉ์๋์์ ์ฌ์ฉํด์ผ ํ๋ค.
1. ์๋ธํด๋์ค์ super ํธ์ถ
์๋ธํด๋์ค๋ ์์ ์ด ์ง์ ์ธ์คํด์ค๋ฅผ ์์ฑํ์ง ์๊ณ ์ํผํด๋์ค์๊ฒ ์ธ์คํด์ค ์์ฑ์ ์์ํ๋ค. ์ด๊ฒ์ด ๋ฐ๋ก ์๋ธํด๋์ค์ constructor์์ ๋ฐ๋์ super๋ฅผ ํธ์ถํด์ผ ํ๋ ์ด์ ๋ค.
2. ์ํผํด๋์ค์ ์ธ์คํด์ค ์์ฑ๊ณผ this๋ฐ์ธ๋ฉ
์ํผํด๋์ค์ consturctor ๋ด๋ถ์ ์ฝ๋๊ฐ ์คํ๋๊ธฐ ์ด์ ์ ์๋ฌต์ ์ผ๋ก ๋น ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ค. ์ด ๋น ๊ฐ์ฒด๊ฐ ๋ฐ๋ก ํด๋์ค๊ฐ ์์ฑํ ์ธ์คํด์ค๋ค.
๊ทธ๋ฆฌ๊ณ ์๋ฌต์ ์ผ๋ก ์์ฑ๋ ๋น ๊ฐ์ฒด, ์ฆ ์ธ์คํด์ค๋ this์ ๋ฐ์ธ๋ฉ๋๋ค. ๋ฐ๋ผ์ ์ํผํด๋์ค์ constructor ๋ด๋ถ์ this๋ ์์ฑ๋ ์ธ์คํด์ค๋ฅผ ๊ฐ๋ฆฌํด
์ธ์คํด์ค๋ ์ํผํด๋์ค๊ฐ ์์ฑํ ๊ฒ์ด๋ค. ํ์ง๋ง new ์ฐ์ฐ์์ ํจ๊ป ํธ์ถ๋ ํด๋์ค๊ฐ ์๋ธํด๋์ค๋ผ๋ ๊ฒ์ด ์ค์ํ๋ค. ์ฆ, new ์ฐ์ฐ์์ ํจ๊ผ ํธ์ถ๋ ํจ์๋ฅผ ๊ฐ๋ฆฌํค๋ new.target์ ์๋ธํด๋์ค๋ฅผ ๊ฐ๋ฆฌํด. ๋ฐ๋ผ์ ์ธ์คํด์ค๋ new.target์ด ๊ฐ๋ฆฌํค๋ ์๋ธํด๋์ค๊ฐ ์์ฑํ ๊ฒ์ผ๋ก ์ฒ๋ฆฌ๋จ
3. ์ํผํด๋์ค์ ์ธ์คํด์ค ์ด๊ธฐํ
this ์ ๋ฐ์ธ๋ฉ ๋์ด ์๋ ์ธ์คํด์ค์ ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ๊ณ
constructor ๊ฐ ์ธ์๋ก ์ ๋ฌ ๋ฐ๋ ์ด๊ธฐ๊ฐ์ผ๋ก ์ธ์คํด์ค์ ํ๋กํผํฐ๋ฅผ ์ด๊ธฐํํ๋ค.
4. ์๋ธํด๋์ค constructor๋ก์ ๋ณต๊ท์ this ๋ฐ์ธ๋ฉ
super๊ฐ ๋ฐํํ ์ธ์คํด์ค๊ฐ this์ ๋ฐ์ธ๋ฉ๋๋ค. ์๋ธํด๋์ค๋ ๋ณ๋์ ์ธ์คํด์ค๋ฅผ ์์ฑํ์ง ์๊ณ super๊ฐ ๋ฐํํ ์ธ์คํด์ค๋ฅผ this์ ๋ฐ์ธ๋ฉํ์ฌ ๊ทธ๋๋ก ์ฌ์ฉ
์ด์ฒ๋ผ super๊ฐ ํธ์ถ๋์ง ์์ผ๋ฉด ์ธ์คํด์ค๊ฐ ์์ฑ๋์ง ์์ผ๋ฉฐ, this ๋ฐ์ธ๋ฉ๋ ํ ์ ์๋ค. ์๋ธํด๋์ค์ constructor์์ super๋ฅผ ํธ์ถํ๊ธฐ ์ ์๋ this๋ฅผ ์ฐธ์กฐํ ์ ์๋ ์ด์ ๊ฐ ์ด ๋๋ฌธ์ด๋ค.
5. ์๋ธํด๋์ค์ ์ธ์คํด์ค ์ด๊ธฐํ
super ํธ์ถ ์ดํ, ์๋ธ ํด๋์ค์ constructor์ ๊ธฐ์ ๋์ด ์๋ ์ธ์คํด์ค ์ด๊ธฐํ๊ฐ ์คํ๋๋ค.
์ฆ this ์ ๋ฐ์ธ๋ฉ ๋์ด ์๋ ์ธ์คํด์ค์ ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ๊ณ ,
constructor ๊ฐ ์ธ์๋ก ์ ๋ฌ ๋ฐ์ ์ด๊ธฐ๊ฐ์ผ๋ก ์ธ์คํด์ค์ ํ๋กํผํฐ๋ฅผ ์ด๊ธฐํํ๋ค.
6. ์ธ์คํด์ค ๋ฐํ
ํด๋์ค์ ๋ชจ๋ ์ฒ๋ฆฌ๊ฐ ๋๋๋ฉด ์์ฑ๋ ์ธ์คํด์ค๊ฐ ๋ฐ์ธ๋ฉ๋ this ๊ฐ ์๋ฌต์ ์ผ๋ก ๋ฐํ๋๋ค.