자바스크립트에서는 객체를 생성하는 다양한 방법을 제공한다. 객체를 생성할 때 객체 리터럴을 통해 생성하는 것이 일반적이지만 생성자 함수를 통해 객체를 생성하는 방법도 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
// 빈 객체 생성
const person = new Object();
// 프로퍼티 추가
person.name = 'Lee';
person.sayHello = function () {
console.log('Hello' + this.name);
};
console.log(person); // { name: "Lee", sayHello: f }
person.sayHello(); // Hello Lee
생성자 함수를 통해 생성된 객체는 인스턴스(Instance)라 한다. 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.
생성자 함수
객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하지만 단 하나의 객체만 생성하기 때문에 동일한 프로퍼티를 가지는 객체를 여러 개 생성할 경우 매번 같은 프로퍼티를 기술해야 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const circle1 = {
radius: 5,
getDiameter() {
return 2 * this.radius;
}
};
const circle2 = {
radius: 10,
getDiameter() {
return 2 * this.radius;
}
};
console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20
생성자 함수로 객체를 생성할 경우 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 생성자 함수
function Circle(radius) {
// 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
this.radius = radius;
this.getDiameter = function() {
return 2 * radius;
};
}
// 인스턴스 생성
const circle1 = new Circle(5);
const circle2 = new Circle(10);
console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20
this 키워드는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 *자기 참조 변수 이다. this가 가리키는 값은 함수 호출 방식에 따라 동적으로 결정된다.
| 함수 호출 방식 | this가 가리키는 값 |
|---|---|
| 일반 함수로서 호출 | 전역 객체 |
| 메서드로서 호출 | 메서드를 호출한 객체(마침표 앞의 객체) |
| 생성자 함수로서 호출 | 생성자 함수가 생성할 인스턴스 |
생성자 함수는 객체를 생성하는 함수이다. 자바스크립트는 클래스 기반 객체 지향 언어와 다르게 생성자의 형식이 정해져 있지 않고, 일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다. new 연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수가 아니라 일반 함수로 동작한다.
인스턴스 생성 과정
생성자 함수의 동작은 인스턴스 생성과 인스턴스 초기화로 구분할 수 있다. 자바스크립트 엔진은 암묵적인 처리를 통해 인스턴스를 생성하고 반환한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Circle(radius) {
// 1. 암묵적으로 빈 객체가 생성되고 this에 바인딩된다.
// 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
// 3. 암묵적으로 this를 반환한다.
}
const circle = new Circle(1);
console.log(circle); // 2
인스턴스를 반환할 때 this가 아닌 다른 객체를 명시적으로 반환하면 this가 아닌 명시된 객체가 반환된다. 하지만 명시적으로 원시 값을 반환할 경우 원시 값은 무시되고 this가 반환된다.
생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손하는 행위이다. 따라서 생성자 함수에서는 반드시 return문을 생략해야 한다.