자바스크립트에서 함수는 크게 세 가지 방식으로 호출할 수 있습니다. 첫 번째는 일반 함수로서의 호출, 두 번째는 객체의 메서드로서의 호출, 그리고 세 번째는 함수 생성자(function constructor)로서의 호출입니다.
이 세 가지 방식 중 함수 생성자를 이용한 호출은 나머지 둘과 확연히 구별되는 특징이 있습니다. 바로 상속(inheritance) 속성을 활용한다는 점입니다. 생성자 호출이 실행되면 새로운 객체가 생성되며, 이 새 객체는 자신을 만들어낸 생성자의 속성과 메서드를 그대로 물려받습니다. 반면 앞선 두 가지 호출 방식에는 상속 개념이 전혀 적용되지 않습니다.
new 키워드의 역할
함수를 생성자로 호출하려면 함수 이름 앞에 new 키워드를 붙여야 합니다. 이때 내부적으로 다음과 같은 과정이 진행됩니다.
- 빈 객체가 하나 생성됩니다.
- 생성된 객체가 곧
this로 바인딩되어, 함수 본문 안에서this는 새 객체를 가리킵니다. - 함수가 실행되면서
this에 속성과 메서드가 할당됩니다. - 함수가 명시적으로 다른 객체를 반환하지 않으면, 완성된 새 객체가 자동으로 반환됩니다.
예제
다음 예제에서는 하나의 함수를 정의한 뒤, 이를 함수 생성자로 호출합니다. 생성자를 통해 만들어진 객체는 함수가 정의한 속성(radius, height)을 상속받기 때문에, 단순히 값만 인수로 전달했음에도 불구하고 해당 속성들이 함께 실행되어 출력 결과에 나타나는 것을 확인할 수 있습니다.
<html>
<body>
<script>
function myArg(arg1, arg2) {
this.radius = arg1;
this.height = arg2;
}
var x = new myArg(1,2)
document.write(JSON.stringify(x));
</script>
</body>
</html>출력 결과
{"radius":1,"height":2}출력 결과를 보면 new myArg(1, 2) 호출로 생성된 객체 x가 생성자 함수에서 정의한 radius와 height 속성을 모두 갖고 있는 것을 알 수 있습니다. 이것이 바로 생성자 호출만이 가지는 고유한 상속 동작입니다.