자바스크립트 생성자

JS Constructor

자바스크립트 생성자는 객체 인스턴스를 생성하고 반환한다.

생성자 함수의 역할은 같은 값과 동작을 공유하는 객체를 여러 개를 만드는 것에 있습니다.

기본적으로 생성자 함수는 기본 속성과 속성 메소드를 갖춘 객체를 생산해내는 쿠키틀(cookie cutter)과 같은 것입니다.

만약에 다른 누군가가 "생성자 함수는 그냥 함수이잖아!!" 라고 한다면 "맞아.. new 키워드를 사용해서 실행하지 않는다면 그냥 함수일 뿐이지.." 라고 답할 수 있습니다.

E.g.) new String('foo');

new 키워드를 사용하면 자바스크립트가 생성자 함수 내에 있는 this 의 값을 새로 만들어진 객체로 설정함으로써 생성자 함수는 일반함수와는 다른 특수한 동작을 수행하게 되는 것입니다.

특수한 동작을 한 생성자 함수는 기본값인 거짓스러운 값^[각주:1]이 아닌 새로 만든 객체(즉, this)  를 반환합니다.

생성자 함수가 반환한 새로운 객체는 객체를 만든 생성자 함수의 인스턴스(instance)라고 부릅니다.

다음의 생성자 함수코드를 통해 new 키워드의 효과에 대해 생각해 보도록 하겠습니다.

// 사용자 정의 생성자 함수 작성
var Drama = function(title, actor, time) {

    /* 아래에서 "this" 는 새롭게 작성된 객체(this = new Object();) 를 뜻한다. */

    this.title = title;
    this.actor = actor;
    this.time = time;
    this.dramaTitle = function () {
        return this.title;
    };

    /* new 키워드와 함께 생성자 함수를 호출하면 undefined 대신 "this" 를 반환합니다. */

};

// Drama 객체의 인스턴스를 만들어서 myDrama 에 저장합니다.
var myDrama = new Drama('오마이 비너스', '신민아','10시');

// myDrama 는 Drama() 의 객체이면서 인스턴스입니다.
console.log(typeof myDrama); // object 가 기록.

console.log(myDrama); // myDrama 가 포함된 속성과 값이 기록.

console.log(myDrama.constructor); // Drama() 함수가 기록.

위의 코드는 사용자 정의 생성자함수(=Drama()) 를 사용하여 myDrama 라는 객체를 만들었습니다. 

이는 Array() 네이티브 생성자 함수(=내장 객체생성자)를 통해 Array() 객체를 만드는 것(e.g. new Array()) 과 같은 동작입니다.

일반적인 함수는 함수를 호출,실행하였을 경우 return 값이 없다면 undefined 를 반환하지만 new 키워드를 사용하여 함수를 호출한 경우는 

this 를 반환한다는 것이 일반함수와의 차이점입니다.

다시 말해서, new 통하여 새로운 객체를 반환하면서 그 객체는 this 를 가리킵니다. 

이렇게 자바스크립트에서 대부분의 값(원시값 제외)은 생성자 함수를 이용하여 객체로 만들거나 인스턴스화할 수 있습니다.

이때 생성자 함수에서 반환된 객체를 가리켜 인스턴스(instance)라 합니다.

위의 코드에서 myDrama 를 객체이면서 인스턴스라고 한 것에 대해 혼동할 수 있지만 실질적으로 객체를 생성하기 위한 틀로 만들어 생성된 것이 인스턴스라고 한다면 반대로 그 인스턴스는 객체의 생성틀로 만들어 진 것이기 때문에 객체라고도 합니다.

이는 다만 좀더 정확한 의미로써 용어를 구분짓기 위함인데 실무적으로 new Drama() 객체를 생성하였을 때 dramaTitle 이란 메소드는 Drama 객체의 메소드라고 명명하지 인스턴스(=객체)인 myDrama 객체(인스턴스)의 메소드라고 부르지는 않습니다.

이 글에서 알아야 할 내용은 new 연산자를 사용하여 생성자 인스턴스를 생성한다는 것이고 생성자 함수는 기본적으로 미리 설정(정의)된 객체를 만들도록 되어 있는 쿠키틀,템플릿과 같다라는 정도로 이해하면 좋을 것입니다.

[참고]

1. 자바스크립트 생성자 만드는 법 

2. 자바스크립트 생성자(클래스) 더 알아보기

Jaehee's WebClub

1. null,undefined,0, 빈문자열과 같이 false 는 아니지만 false 처럼 사용할 수 있는 있을 가리켜 거짓스러운 값(falsey value)이라 표현합니다. [본문으로]