JavaScript Object Constructors
JavaScript Object Constructors: 객체 생성의 이해와 활용
JavaScript에서 **객체 생성자(Object Constructor)**는 새로운 객체를 생성하는 데 사용되는 특수한 함수입니다. 생성자는 객체의 초기 상태를 설정하고, 특정 속성과 메서드를 가진 객체를 생성하는 데 매우 유용합니다. 이 가이드는 JavaScript 객체 생성자에 대한 이해를 높이고, 이를 활용하는 방법을 설명합니다.
1. 객체 생성자의 기본 개념
객체 생성자는 함수로 정의되며, 대문자로 시작하는 이름을 사용하는 것이 관례입니다. 생성자 함수를 호출할 때는 new 키워드를 사용하여 새로운 객체를 생성합니다.
1.1. 생성자 함수 정의
function Person(name, age) {
this.name = name; // 객체의 프로퍼티
this.age = age; // 객체의 프로퍼티
this.greet = function() { // 메서드 정의
console.log(`Hello, my name is ${this.name}`);
};
}
위의 코드에서 Person은 객체 생성자 함수입니다. 이 함수는 name과 age 프로퍼티를 설정하고, greet
메서드를 정의합니다.
1.2. 생성자 함수 호출
생성자 함수를 호출할 때는 new 키워드를 사용하여 객체를 생성합니다.
const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);
console.log(person1.name); // 출력: Alice
person2.greet(); // 출력: Hello, my name is Bob
2. 프로토타입과 상속
JavaScript에서는 생성자 함수를 사용하여 객체의 프로토타입을 설정할 수 있습니다. 프로토타입을 사용하면 메모리를 절약하고 코드 재사용성을 높일 수 있습니다.
2.1. 프로토타입 메서드 추가
생성자 함수의 프로토타입에 메서드를 추가하면, 생성자로 생성된 모든 객체가 이 메서드를 공유하게 됩니다.
Person.prototype.sayAge = function() {
console.log(`I am ${this.age} years old.`);
};
person1.sayAge(); // 출력: I am 30 years old.
person2.sayAge(); // 출력: I am 25 years old.
2.2. 상속 구현
상속을 통해 한 생성자 함수가 다른 생성자 함수의 프로퍼티와 메서드를 사용할 수 있습니다. 이를 위해 Object.create()와 call() 또는
apply() 메서드를 사용합니다.
function Employee(name, age, position) {
Person.call(this, name, age); // 부모 생성자 호출
this.position = position; // 추가 프로퍼티
}
// 프로토타입 체인 설정
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
// 추가 메서드
Employee.prototype.describe = function() {
console.log(`I am a ${this.position}.`);
};
const employee1 = new Employee("Charlie", 28, "Developer");
employee1.greet(); // 출력: Hello, my name is Charlie
employee1.describe(); // 출력: I am a Developer.
3. ES6 클래스 문법
ES6부터는 클래스(class) 문법을 사용하여 객체 생성자를 보다 직관적으로 정의할 수 있습니다. 클래스는 생성자와 프로토타입 메서드를 한 곳에 정의할 수 있도록 해줍니다.
3.1. 클래스 정의
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
3.2. 클래스 사용
const person1 = new Person("Alice", 30);
person1.greet(); // 출력: Hello, my name is Alice
3.3. 클래스 상속
ES6 클래스 문법을 사용하면 상속이 간단해집니다.
class Employee extends Person {
constructor(name, age, position) {
super(name, age); // 부모 클래스의 생성자 호출
this.position = position; // 추가 프로퍼티
}
describe() {
console.log(`I am a ${this.position}.`);
}
}
const employee1 = new Employee("Bob", 25, "Manager");
employee1.greet(); // 출력: Hello, my name is Bob
employee1.describe(); // 출력: I am a Manager.
4. 결론
JavaScript 객체 생성자는 새로운 객체를 생성하고 초기 상태를 설정하는 데 매우 유용합니다. 생성자 함수를 사용하여 객체를 정의하고, 프로토타입을 활용하여 메모리를 절약하며, 클래스 문법을 통해 코드의 가독성을 높일 수 있습니다. 이러한 이해를 바탕으로 JavaScript의 객체 지향 프로그래밍을 효과적으로 활용해 보세요!