생성자 함수

Ari·2022년 9월 7일

모던자바스크립트 Deep Dive 정리

목록 보기

1/1

Object 생성자 함수

생성자 함수 : new 연산자와 함께 호출해서 객체를 생성하는 함수
인스턴스: 생성자 함수에 의해 생성된 객체
빌트인 생성자 함수 종류 ex. String, Number, Boolean, Function, Array, Date, RegExp, Prmoise 등
Object 생성자 함수로 객체 생성하는 방법

function User(name){
	this.name = name;
}

const userName = new User('Lee')

객체 생성 방식에 대한 비교

객체

프로퍼티: 객체 고유의 상태를 표현
메서드: 프로퍼티를 참조하고 조작하는 동작을 표현
객체마다 프로퍼티 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적

따라서 객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하지만, 매번 같은 구조의 객체를 반복 기술해야된다.

생성자 함수는 마치 템플릿처럼 구조가 동일한 함수를 만들어 놓은 후 new 연산자와 함께 호출하여 생성할 수 있다.

생성자 함수의 인스턴스 생성 과정

생성자 함수의 역할은 인스턴스를 생성하고 생성된 인스턴스를 초기화 하는 것이다.

인스턴스 생성과 this 바인딩
- 암묵적으로 빈 객체가 생성되고, 이때 생성된 인스턴스는 this에 바인딩된다.
```
function User(name){
	console.log(this); // User {}
}
```
인스턴스 초기화
- this에 바인딩되어 있는 인스턴스를 초기화하고, 프로퍼티나 메서드를 추가하고 인수로 전달받은 초기값이나 고정값을 할당한다.
```
function User(name){
	this.name = name;
}
```
인스턴스 반환

내부의 모든 처리가 완료되면 완성된 인스턴스가 바인딩된 this를 암묵적으로 반환한다.
생성자 함수는 암묵적으로 this를 반환하기 때문에 return 문을 작성할 필요가 없다
- return문이 없음 → this 반환
- return문에 다른 객체가 명시되어 있음 → this 무시, 명시된 객체 반환
- return문에 원시값이 명시되어 있음 → 원시값 무시, this 반환
```
function User(name){
	this.name = name;

	// return this; 암묵적 반환 
}
```

new 연산자

constructor인 함수를 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.
일반 함수와 생성자 함수에 특별한 형식적 차이가 없으므로 생성자 함수의 첫문자는 대문자로 기술한다.

new.target

ES6에서 new 연산자 없이 생성자 함수가 호출되는 것을 방지하기 위해 지원하는 메타 프로퍼티
함수 내부에서 new.target 을 사용하면 생성자 함수를 호출할 때 new 연산자를 사용했는지 확인할 수 있다.

function User(name){
	//new 연산자가 없으므로 new.target은 undefined
	if(!new.target){
		//new 연산자와 함께 재귀 호출
		return new User(name);
	}
}

const userName = User('Lee'); //new 연산자 없이 호출

new 연산자와 함께 호출 → new.target은 함수자신을 지칭
new 연산자 없이 호출 → new.target은 undefined → 재귀호출을 통해 생성자 함수로 다시 호출 가능
대부분의 빌트인 생성자 함수는 new 연산자와 함께 호출 되었는지 확인 후 적절한 값을 반환한다.
- Object, Function 생성자 함수 → 동일하게 동작
- String, Number, Boolean 생성자 함수 → 문자열, 숫자, 불리언 값을 반환하면서 데이터 타입을 반환하기도 함

내부 메서드 [[Call]], [[Construct]]

함수 객체는 일반 객체가 가지고 있는 내부 슬록, 내부 메서드 + 함수로서 동작하기 위한 함수만을 위한 내부 슬롯과 내부 메서드를 추가로 가지고 있다.
일반 함수로 호출 → 내부 메서드 [[call]] 호출
new 연산자와 함께 생성자 함수로 호출 → 내부 메서드 [[Construct]] 호출
함수 객체는 무조건 호출 가능하므로 callable이면서, 생성자 함수로 호출할 수 있으면 constructor, 호출할 수 없을 경우 non-constructor이다.

constructor와 non-constructor의 구분

함수 객체를 생성할 때 함수 정의 방식에 따라 구분함
constructor: 함수 선언문 / 함수 표현식 / 클래스
non-constructor: 메서드 / 화살표 함수
non-constructor인 함수를 생성자 함수로서 호출하면 에러가 발생한다.

참고

모던 JavaScript 튜토리얼, new 연산자와 생성자 함수
이웅모, ⌜모던 자바스트립트 Deep Dive⌟, 17장 생성자 함수에 의한 객체 생성

Ari

프론트엔드 개발자