[javascript] 생성자 함수는 어떤 과정으로 인스턴스를 생성할까?

 

생성자 함수는 인스턴스를 생성하기 위한 '템플릿'처럼 동작한다.
즉 인스턴스를 생성하고, 이 인스턴스에 프로퍼티를 추가하고 초기값을 할당하여 초기화 하는 것이다.

 

아래와 같은 생성자 함수 정의를 보면, 인스턴스를 초기화하는(값 할당) 부분은 있지만 인스턴스를 생성하고 반환하는 코드가 없다. 

(그래서 아래 Language를 일반 함수처럼 호출하면 반환값이 undefined이기도 하다. - 참고)

function Language(name) {
    this.name = name;
    this.getName = function() {
    	return 'my name: ' + this.name ; 
    }
};

 

그런데 어떻게 생성자 함수를 호출하면 객체(인스턴스)가 생성되어 반환되는 것일까? 

 

new 연산자와 함께 생성자 함수를 호출할 때 발생하는 일 (e.g.  new Language() )

1. 빈 객체(인스턴스)가 생성되고, this에 바인딩된다

 

생성자 함수를 new연산자와 함께 호출하면 암묵적으로 빈 객체(인스턴스)가 생성되고, 이 객체가 this에 바인딩된다. 이 작업은 런타임 이전에 실행된다. 즉 Language 함수 몸체가 실행될 때 함수 몸체의 this는 이미 인스턴스를 가리키고 있다! 

💡 new 연산자로 생성자 함수 호출시 this가 생성할 인스턴스를 가르키게 되는 이유
-  이미 인스턴스가 생성되어 this 바인딩되는 작업이 이미 런타임 이전에 발생하였기 때문!

 

2. 인스턴스 초기화

 

생성자 함수 몸체의 코드가 실행되며 this에 바인딩된 인스턴스에 프로퍼티나 메서드를 추가하고, 인수로 받은 값을 인스턴스에 할당하여 초기화 한다. 

 

3. 인스턴스 반환

 

인스턴스가 바인딩된 this를 암묵적으로 반환한다. '암묵적'으로 반환한다는 의미에 주목하자.

만약 생성자 함수 내에서 명시적으로 다른 객체를 반환하는 경우 this가 반환되지 않고 명시적으로 반환한 객체가 반환되고, 명시적으로 원시값을 반환하는 경우 이는 무시되고 this가 반환된다.

 

결국 생성자 함수 내에서 명시적으로 반환하는 것은 함수의 기본동작을 훼손하는 행위이므로 생성자 함수 내에서는 return 문을 반드시 생략해야 한다.