new 연산자와 생성자 함수
객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있습니다. 종종 유사한 객체를 여러 개 만들어야 할 때가 있습니다.
이때 new연산자와 생성자 함수를 사용하면 유사한 객체들을 쉽게 만들 수 있습니다.
생성자 함수
1. 함수 이름의 첫 글자는 대문자로 시작합니다.
2. 반드시 'new'연산자를 붙여 실행합니다.
function User(name){
this.name = name;
this.isAdmin = false;
}
var user = new User("유리")
alert(user.name) // 유리
alert(user.isAdmin) // false🎈new User(...)를 실행하면??
- 빈 객체를 만들어 this에 할당합니다.
- 함수 본문을 실행하고 this에 새로운 프로퍼티를 추가해 this를 수정합니다.
- this를 반환합니다.
이 방법을 사용하묜 new User("보라"), new User("호진")등을 이용해서 쉽게 사용자 객체를 만들 수 있습니다.
즉 생성자는 재사용할 수 있는 개체 생성 코드를 구현하는 것입니다.
모든 함수는 생성자 함수가 될 수 있습니다. new를 붙여 실핸한다면 어떤 함수라도 위에 과정으로 알고리즘이 실행됩니다.
new function(){...}
재사용할 필요가 없는 복잡한 객체를 만들어야 한다고 해봅시다. 이럴 땐 익명 생성자 함수로 감싸주는 방식을 사용할 수 있습니다.
let user = new function(){ this.name = "Jhon" this.isAdmin = false }위의 생성자 함수는 익명 함수이므로 어디에도 저장되지 않습니다. 처음 만들 때부터 단 한번만 호출할 목적으로 만들었기에 재사용이 불가능합니다.
익명 생성자 함수를 사용하면 재사용은 막고 코드를 캡슐화 할 수 있습니다.
new.target과 생성자 함수
자주 쓰이지 않는 문법입니다. 읽고만 넘어가세요.
new.target 프로퍼티를 사용하면 new와 함께 호출되었는지 아닌지를 알 수 있습니다.
일반적인 방법으로 함수를 호출했다면 new.target 은 undefined를 반환합니다. 반면 new와 함께 호출한 경우는 new.target 은 함수 자체를 반환해줍니다.
function User(){
alert(new.target)
}
User(); // undefined
new User(); // function User{...}new.target을 사용하면 해당함수가 생성자 모드인지 일반 모드인지 확인할 수 있습니다.
생성자와 return문
생성자 함수에는 보통 return문이 없습니다. 반환해야 할 것들은 모두 this에 저장되고 this가 자동으로 반환되기 때문입니다.
만약 생성자 함수에 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 ); // 원숭이return문이 있는 생성자 함수는 거의 없습니다.
괄호 생략하기
인수가 없는 생성자 함수는 괄호를 생략해 호출할 수 있습니다.let user = new User; let user = new User();하지만 좋은 습관은 아닙니다.
생성자 내 메서드
생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있습니다. this에 프로퍼티 뿐만 아니라 메서드를 더해주는 것도 가능합니다.
function User(name){
this.name = name;
this.sayHi = function(){
alert("제 이름은 "+this.name+"입니다")
}
var user = new User("이보라")
user.sayHi(); // 제 이름은 이보라입니다.정리
- 생성자 함수는 일반 함수와 동일합니다. 이를 구분하기 위해서 생성자는 함수 이름 첫 글자를 대문자로 씁니다.
- 생성자 함수는 반드시 new연산자와 함께 호출해야 합니다. new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고 마지막엔 this가 반환됩니다.
