JavaScriptμμ κ°μ²΄λ₯Ό μμ±ν λ νν μ¬μ©νλ λ°©λ² μ€ νλλ μμ±μ ν¨μλ₯Ό μ¬μ©νλ κ²μ λλ€. κ·Έλ¬λ μ€μλ‘ new ν€μλλ₯Ό λΉ λ¨λ¦¬λ©΄ λ¬Έμ κ° λ°μν μ μμ΅λλ€. μ΄λ² ν¬μ€ν μμλ μ΄λ¬ν λ¬Έμ λ₯Ό λ°©μ§νλ νκ³Ό ν¨κ» μμ±μ ν¨μμ νμ΄ν ν¨μμ μ°¨μ΄μ μ μμλ³΄κ² μ΅λλ€.
β£ λͺ©μ°¨
01. μμ±μ ν¨μλ?π§
μλ°μ€ν¬λ¦½νΈ μμ±μ ν¨μλ κ°μ²΄λ₯Ό μμ±νλ λ° μ¬μ©λλ νΉλ³ν ν¨μμ
λλ€. ν¨μ μ΄λ¦μ μΌλ°μ μΌλ‘ λλ¬Έμλ‘ μμνλ©°, this ν€μλλ₯Ό μ¬μ©νμ¬ κ°μ²΄μ νλ‘νΌν°λ₯Ό μ μν©λλ€.
μμ±μ ν¨μμ κ΄ν μμΈν λ΄μ©μ μλ ν¬μ€ν
μ μ°Έκ³ ν΄ μ£ΌμΈμπ
02. new ν€μλμ μν π
JavaScriptμμ new ν€μλλ μ£Όλ‘ μμ±μ ν¨μ(constructor function)μ ν¨κ» μ¬μ©λμ΄ μλ‘μ΄ κ°μ²΄λ₯Ό μμ±νλ λ° μ¬μ©λ©λλ€. new ν€μλλ₯Ό μ¬μ©νλ©΄ λ€μκ³Ό κ°μ μΌλ€μ΄ μΌμ΄λ©λλ€:
- μλ‘μ΄ λΉ κ°μ²΄ μμ±: new ν€μλλ₯Ό μ¬μ©νλ©΄ λ¨Όμ μλ‘μ΄ λΉ κ°μ²΄κ° μμ±λ©λλ€.
- νλ‘ν νμ μ°κ²°: μμ±λ μλ‘μ΄ κ°μ²΄λ μμ±μ ν¨μμ prototype μμ±μ μ°Έμ‘°νλ νλ‘ν νμ κ°μ²΄μ μ°κ²°λ©λλ€.
- this λ°μΈλ©: μμ±μ ν¨μ λ΄μμ this ν€μλλ μλ‘ μμ±λ κ°μ²΄λ₯Ό κ°λ¦¬ν€κ² λ©λλ€.
- μμ±μ ν¨μ μ€ν: μμ±μ ν¨μμ μ½λκ° μ€νλλ©°, μ΄λ this ν€μλλ₯Ό ν΅ν΄ μ κ°μ²΄μ μμ±κ³Ό λ©μλκ° μ μλ©λλ€.
- μ κ°μ²΄ λ°ν: μμ±μ ν¨μκ° λͺ μμ μΌλ‘ λ€λ₯Έ κ°μ²΄λ₯Ό λ°ννμ§ μλ ν, new ν€μλλ μλ‘ μμ±λ κ°μ²΄λ₯Ό λ°νν©λλ€.
// μμ±μ ν¨μ μ μ
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
}
// new ν€μλλ₯Ό μ¬μ©νμ¬ κ°μ²΄ μμ±
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);
person1.sayHello(); // Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // Hello, my name is Bob and I am 25 years old.
λμ κ³Όμ
- new Person('Alice', 30)λ₯Ό νΈμΆνλ©΄ μλ‘μ΄ λΉ κ°μ²΄κ° μμ±λ©λλ€.
- μ΄ κ°μ²΄λ Person ν¨μμ νλ‘ν νμ κ°μ²΄μ μ°κ²°λ©λλ€.
- Person ν¨μκ° νΈμΆλκ³ , this ν€μλλ μλ‘ μμ±λ κ°μ²΄λ₯Ό κ°λ¦¬ν€κ² λ©λλ€.
- this.name = nameκ³Ό κ°μ μ½λλ₯Ό ν΅ν΄ μλ‘μ΄ κ°μ²΄μ nameκ³Ό age μμ±μ΄ μΆκ°λ©λλ€.
- μμ±λ κ°μ²΄κ° λ°νλμ΄ person1 λ³μμ ν λΉλ©λλ€.
μ΄μ κ°μ λ°©μμΌλ‘ new ν€μλλ₯Ό μ¬μ©νλ©΄ λμΌν ꡬ쑰λ₯Ό κ°μ§λ μ¬λ¬ κ°μ²΄λ₯Ό κ°νΈνκ² μμ±ν μ μμ΅λλ€.
03. new.targetμ μ¬μ©νμ¬ μ€μ λ°©μ§π‘οΈ
new.targetμ ν¨μκ° new ν€μλλ‘ νΈμΆλμλμ§ νμΈνλ λ° μ¬μ©λ©λλ€. new ν€μλ μμ΄ νΈμΆλλ©΄ undefinedκ° λ°νλλ©°, μ΄λ₯Ό ν΅ν΄ 쑰건μμ μ μ©νμ¬ μ€μλ₯Ό λ°©μ§ν μ μμ΅λλ€.
function Teacher(name, subject) {
if (!new.target) {
return new Teacher(name, subject);
}
this.name = name;
this.subject = subject;
this.teach = function () {
return `${this.name}κ° ${this.subject}λ₯Ό κ°λ₯΄μΉ©λλ€.`;
};
}
04. μμ μ½λμ μ€λͺ π
μλ μ½λλ new ν€μλλ₯Ό μ¬μ©ν κ²½μ°μ μ¬μ©νμ§ μμ κ²½μ°μ λν μμ μ λλ€.
const bob = new Teacher("λ°₯", "μν");
console.log(bob); // Teacher { name: 'λ°₯', subject: 'μν', teach: [Function (anonymous)] }
console.log(bob.teach()); // "λ°₯μ΄ μνμ κ°λ₯΄μΉ©λλ€."
const bob2 = Teacher("λ°₯", "μν"); // μ€μλ‘ new ν€μλ λΉ λ¨λ¦Ό
console.log(bob2); // Teacher { name: 'λ°₯', subject: 'μν', teach: [Function (anonymous)] }
console.log(bob2.teach()); // "λ°₯μ΄ μνμ κ°λ₯΄μΉ©λλ€."
μ μμ μμ new ν€μλλ₯Ό μ¬μ©νμ§ μμ κ²½μ°μλ 쑰건μ λλΆμ κ°μ²΄κ° μ μμ μΌλ‘ μμ±λ©λλ€.
05. νμ΄ν ν¨μμ new ν€μλπ«
νμ΄ν ν¨μλ new ν€μλμ ν¨κ» μ¬μ©ν μ μμ΅λλ€. μ΄λ νμ΄ν ν¨μκ° μΌλ° ν¨μμλ λ€λ₯΄κ² λμνκΈ° λλ¬Έμ λλ€.
const TeacherArrow = (name, subject) => {
this.name = name;
this.subject = subject;
};
const bob3 = new TeacherArrow("λ°₯", "μν"); // μ€λ₯ λ°μ
νμ΄ν ν¨μλ thisλ₯Ό μ체μ μΌλ‘ λ°μΈλ©νμ§ μκΈ° λλ¬Έμ μμ±μ ν¨μλ‘ μ¬μ©ν μ μμ΅λλ€.
μμ±μ ν¨μμ new ν€μλλ₯Ό μ μ ν μ¬μ©νλ©΄ JavaScriptμμ κ°μ²΄ μμ± μ λ°μν μ μλ μ€μλ₯Ό λ°©μ§ν μ μμ΅λλ€. new.targetμ νμ©νμ¬ μ€μλ₯Ό μ€μ΄κ³ , νμ΄ν ν¨μμμ μ°¨μ΄μ μ λͺ
νν μ΄ν΄νλ κ²μ΄ μ€μν©λλ€.