객체를 만드는 두 가지 방법
- 객체 리터럴을 이용한 방법
- 생성자 함수를 이용하는 방법
생성자 함수
생성자 함수란,
new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다.
생성자 함수를 사용하는 이유는 객체를 재사용하기 위함이다.
- 관례상 함수 이름의 첫 글자는 대문자로 시작한다.
- 함수 호출 시 ‘new’ 연산자를 붙여서 실행한다.
- 함수 앞에 new를 붙일 경우
1) 빈 객체를 만들어 this를 할당한다.
2) 함수를 실행한다.
3) this를 반환한다.
function User(name) {
// this = {}; (빈 객체가 암시적으로 만들어짐)
// 새로운 프로퍼티를 this에 추가함
this.name = name;
this.isAdmin = false;
// return this; (this가 암시적으로 반환됨)
}new function() {…}
재사용할 필요가 없는 복잡한 객체를 만들어야 할 경우, 아래와 같이 익명 생성자 함수로 감싸줄 수 있다.
익명함수이기 때문에 어디에도 저장되지 않는다. 또한, 재사용도 불가능하다.
이렇게 익명 생성자 함수를 이용하면 재사용은 막으면서 코드 캡슐화가 가능하다.
let user = new function() {
this.name = "John";
this.isAdmin = false;
// 사용자 객체를 만들기 위한 여러 코드.
// 지역 변수, 복잡한 로직, 구문 등의
// 다양한 코드가 여기에 들어갑니다.
};new.target과 생성자 함수
new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지를 알 수 있다.
일반적인 방법으로 함수를 호출했다면 new.target은 undefined를 반환한다. 반면 new와 함께 호출한 경우엔 new.target은 함수 자체를 반환해준다.
function User() {
alert(new.target);
}
// 'new' 없이 호출함
User(); // undefined
// 'new'를 붙여 호출함
new User(); // function User { ... }생성자와 return문
생성자 함수엔 보통 return문이 없다.
명시적으로 return문을 사용할 경우 다음과 같은 값을 반환한다.
- 객체를 return 한다면 this 대신 객체가 반환된다.
function BigUser() {
this.name = "원숭이";
return { name: "고릴라" }; // <-- this가 아닌 새로운 객체를 반환함
}
alert( new BigUser().name ); // 고릴라- 원시형을 return 한다면 return문이 무시된다.
function SmallUser() {
this.name = "원숭이";
return; // <-- this를 반환함
}
alert( new SmallUser().name ); // 원숭이생성자 내 메서드
생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다.
아래와 같이 메서드를 더해주는 것도 가능하다.
function User(name) {
this.name = name;
this.sayHi = function() {
alert( "제 이름은 " + this.name + "입니다." );
};
}
let bora = new User("이보라");
bora.sayHi(); // 내 이름은 이보라입니다.
/*
bora = {
name: "이보라",
sayHi: function() { ... }
}
*/정리
-
생성자 함수는 일반 함수이다. 다만, 일반 함수와의 구분을 위해 이름 첫 글자를 대문자로 쓴다.
-
생성자 함수는 반드시 new 연산자와 함께 호출해야 한다. new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환된다.
-
생성자의 의의는 재사용할 수 있는 객체 생성 코드를 구현하는 것이다.
뚜벅뚜벅