#4 자바스크립트 - 생성자

JavaScript 생성자

1. 생성자?

JAVA에서도 객체를 생성할 때 생성자라는 것을 사용했다.

자바스크립트에서도 생성자라는 것이 존재하는데 이번 포스팅은 그 생성자에 대해 알아보는 내용을 담겠다.

function Card(type, num) {
    this.type = type;
    this.num = num;
}

위 코드는 트럼프 카드를 표현하는 객체를 생성하는 생성자의 코드이다.

생성자로 객체를 생성할 땐 new연산자를 사용한다.

var card = new Card("다이아", "A");

이 코드를 실행해보면 객체의 참조가 변수 card에 할당하는 것을 볼 수 있다.

console.log 로 객체를 출력해보면 앞에 생성자 이름( Card )이 표시되는 것을 볼 수 있다.

< 기존 객체리터럴로 생성한 객체는 출력할 때 { 프로퍼티 내용 } 만 출력된다. />

앞의 예제처럼 new 연산자로 객체를 생성할 것이라 생각하고 만든 함수를 생성자라고 한다.

주로 생성자는 이것이 생성자라고 알리기 위해 첫 글자를 대문자로 쓴다.

또한 위에서 this는 생성자가 생성하는 객체를 가리킨다.

( 위 예제에서 this.type -> 객체에서의 프로퍼티 , = type -> 생성자 함수의 인자 type ) 

2. 생성자의 역할

생성자는 객체를 생성하고 초기화하는 역할을 한다.

생성자를 사용하면 객체의 이름은 같지만 프로퍼티 값이 다른 객체들을 여러 개 생성하기가 용이하다.

var card1 = new Card("다이아", "A");
var card2 = new Card("클로버", "7");
var card3 = new Card("스페이드", "K");

또한 생성자는 함수이므로 프로퍼티에 값을 대입할 수 있다.

위 예제는 생성자 Velocity 내에서 속도 velocity를 계산해서 프로퍼티에 값을 대입해 추가해 주는 예제이다.

생성자에서 메소드를 가진 객체를 생성하는 것 또한 가능하다.

function Circle(center, radius) {
    this.center = center;
    this.radius = radius;
    this.area = function() {
        return Math.PI * this.radius * this.radius;
    };
}

< this.area = function() { ... }; 으로 원의 넓이를 계산하는 area메소드를 생성자에서 만들었다. />

3. 내장 생성자 - Function 생성자

자바스크립트에서는 사용자가 정의하는 생성자 외에도 자바스크립트에서 처음부터 포함된 내장 생성자가 있다.

( 내장 생성자의 종류는 다음 포스팅때 소개하겠다. )

그 내장 생성자 중 대표적인 생성자들이 있는데 그중에 Function 생성자를 소개하겠다.

Function은 함수를 생성하는 내장 생성자이다. 일반적으로 함수의 인수가 n개일 때 다음과 같이 사용한다.

var 변수 이름 = new Function(첫 번째 인수, ..., n번째 인수, 함수의 몸통(내용));

예를 들어 제곱 함수인 square를 Function생성자로 생성해본다면

var square = new Function("x", "return x * x");

대충 이런 식으로 생성하는 것이다.

하지만 Function생성자로 생성한 함수는 전역 변수와 자신의 지역 변수만 읽고 쓸 수 있다는 단점이 있어

함수를 동적으로 생성해야 하는 특별한 상황 외에는 잘 사용하지 않는다.

< 본 포스팅에 쓰인 코드의 출처는 '길벗출판사 - 모던 자바스크립트 입문' 입니다. />