8. Javascript 함수 호출 (4) - 생성자 함수 호출 시 this 바인딩 1

 

Javascript에서의 생성자 함수 동작

Javascript에서 객체를 생성하는 방법 중, 리터럴 방식을 제외하면 생성자 함수를 이용하는 방법이 있습니다. 일단 생성자 함수 생성에 있어서 C# 또는 JAVA에서의 생성자 개념은 (언뜻 비슷하지만) 그대로 적용시키기는 어려운 부분이 있습니다. 

 

일단, 함수의 종류를 구분하지 않고 new 키워드를 사용하면 함수를 생성자 함수로 동작할 수 있게 됩니다. 그렇기 때문에 통상적으로 생성자 함수로 사용할 것을 의도하여 선언한 함수라면, 함수명 첫 문자를 대문자로 사용해줘야 합니다(문법적으로 강제된 것은 아닙니다). 

 

그리고 this 키워드의 경우 이러한 생성자 함수 내부에서 사용될 때는 앞서 살펴본 메서드 / 함수 호출에서의 this 바인딩과는 다르게 사용됩니다. 

 

 

 

---

 

 

생성자 함수 동작 프로세스

일단 생성자 함수에서의 this 바인딩 규칙을 살펴보기 위해서는, 기본적으로 Javascript에서의 new 키워드를 통한 객체 생성의 원리를 파악해야 합니다. 

 

Javascript 함수를 new 연산자를 이용해 생성자로서 호출하게 되면, 다음과 같이 작동하게 됩니다. 

 

 

1. 신규 객체가 생성되고, this 바인딩이 일어난다.

우선 생성자의 함수 코드들이 실행되기 직전에 새로운 객체 하나가 생성됩니다. 생성자 함수가 새로 생성하게 되는 객체인데, 이 객체는 생성자 함수 내부에서 사용되는 this에 바인딩 됩니다. 우선 생성자 함수 내부에서 선언된 this가 어디에 바인딩되는지가 확인되었으니, 머릿속에 먼저 담아두시기를 바랍니다. 

 

특히, 이 생성자 함수를 통해 새롭게 생성되는 객체는 생성자 함수를 부모 객체로 두게 되는 특징을 갖습니다. 그래서 이 새로 생성된 객체의 [[Prototype]]객체는 생성자 함수의 prototype이 가리키는 객체를 가리키게 됩니다. 그렇기 때문에, 이 새로운 객체는 부모(여기서는 생성자 함수)의 프로퍼티와 메서드를 사용할 수 있게 됩니다. 이 부분은 Javascript의 중요 규칙 중의 하나이기 때문에, 필히 머리속에 기억해 두셔야 합니다. 아주 중요한 내용입니다. 

 

2. 프로퍼티 생성

통상적으로 생성자 함수에서는, this 연산자를 사용해 동적으로 생성될 프로퍼티와 메서드를 선언해두기 마련입니다. 1번에서 설명했듯이 this는 생성자 함수를 통해 생성되는 새로운 객체를 의미하기 때문에 생성자 함수 내부에 정의된 프로퍼티 / 메서드는 새로운 객체에 자연스럽게 생성됩니다. 

 

3. 리턴

여기서도 중요한 Javascript의 원칙이 적용됩니다. 만일 일반 함수를 선언하였는데 해당 선언문에 리턴문이 없다면, 어떤 것을 리턴하게 될까요? 바로 undefined를 리턴하게 됩니다. 이것이 기본 원칙입니다. 하지만 생성자 함수에서 new 연산자를 사용할 경우에는 이 원칙이 적용되지 않습니다. 생성자 함수에서 new 연산자를 사용했을 경우에는, 리턴 문이 없을 때 undefined가 아닌 새로 생성된 객체를 리턴하게 됩니다. 즉, this로 바인딩된 객체를 리턴하게 되는 것이죠. 

 

사실 new 연산자를 통해 생성자 함수를 사용하는 목적은 애초에 '새로운 함수 객체를 생성하는 것'이었으므로, 이상할 것이 없습니다. 다만 기본 원칙과 생성자 함수에 적용되는 원칙이 다르기 때문에, 개념을 헷갈릴 수 있으므로 주의해야 합니다. 더불어, 해당 함수에서 리턴문과 함께 임의의 객체를 리턴하라고 명시하게 될 경우에는 명시한 새로운 객체를 리턴하게 되는 예외적인 작동도 가능합니다. 

 

그럼 new 연산자를 이용한 객체 생성의 예시를 보도록 하겠습니다. 

 

// 생성자 함수 Rapper
var Rapper = function(lable){
    this.lable = lable;
};

// 신규 객체 swings 선언
var swings = new Rapper('IMJMWDP');
console.log(swings.lable);

// 출력 
// IMJMWDP

 

위 예제는 다른 언어를 공부해 보신 분들이라면, 단순히 클래스를 선언한 다음 새로운 인스턴스(객체)를 생성해 내는 과정과 다를 게 없다는 생각이 드실 겁니다. 네, 기본적인 작동 원리는 비슷합니다. 다만 Javascript의 경우 클래스 동작과 정확히 맞아떨어지는 구조를 갖지는 않기 때문에 굳이 생성자 함수의 작동 방식을 설명드리는 것입니다. 

 

new 연산자를 사용했을 경우에는, (1) 새로운 객체 - 정확하지는 않지만 '빈 객체'라고 표현하겠습니다 - 를 생성하고 (2) 생성자 함수의 prototype이 가리키는 객체를 [[Prototype]]으로 링크를 연결한 다음 (3) 생성자 함수 내부의 this에 바인딩되고 (4) 해당 객체를 리턴한다. 의 순서로 프로세싱된다는 사실을 다시 한번 기억하도록 합시다.