반응형
new 연산자와 생성자 함수
유사한 객체를 여러 개 만들어야 할 땐 new 연산자와 생성자 함수를 사용하면 쉽게 만들 수 있다.
생성자 함수의 관례
function User(name) {
this.name = name;
this.isAdmin = false;
}
let user = new User("보라");
alert(user.name); // 보라
alert(user.isAdmin); // false- 함수 이름의 첫 글자는 대문자로 시작한다.
- 반드시 new 연산자를 붙여 실행한다.
new User(...)의 알고리즘
function User(name) {
// this = {}; (빈 객체가 암시적으로 만들어짐)
// 새로운 프로퍼티를 this에 추가함
this.name = name;
this.isAdmin = false;
// return this; (this가 암시적으로 반환됨)
}- 빈 객체를 만들어 this에 할당한다.
- 함수 본문을 실행한다. this에 새로운 프로퍼티를 추가해 this를 수정한다.
- this를 반환한다.
let user = new User("보라")는 아래 코드를 입력한 것과 동일하게 동작한다.
let user = {
name: "보라",
isAdmin: false
};
생성자의 의의
재사용할수 있는 객체 생성 코드를 구현하는것.
모든 함수는 생성자 함수가 될 수 있고 new를 붙여 실행한다면 어떤 함수라도 위에 언급한 알고리즘이 실행된다.
첫 글자가 대문자인 함수는 new를 붙여 실행해야 한다는 점!
new.target과 생성자 함수
new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지를 알 수 있다.
function User() {
alert(new.target);
}
// 'new' 없이 호출함
User(); // undefined
// 'new'를 붙여 호출함
new User(); // function User { ... }- new와 함께 호출한 경우엔 함수 자체를 반환한다.
일반적인 방법으로 함수를 호출해도 new를 붙여 호출한 것과 같이 동작하게 만들기
function User(name) {
if (!new.target) { // new 없이 호출해도
return new User(name); // new를 붙여줍니다.
}
this.name = name;
}
let bora = User("보라"); // 'new User'를 쓴 것처럼 바꿔줍니다.
alert(bora.name); // 보라- new가 붙어있으면 새로운 객체를 만든다는 걸 누구나 알 수 있기 때문에 new를 생략해서 객체를 만드는것은 추천x
생성자와 return문
생성자 함수엔 보통 return문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에
반환문을 명시적으로 써 줄 필요가 없다. 그런데 만약 return문이 있다면 아래와 같은 간단한 규칙이 적용된다.
- 객체를 return 한다면 this 대신 객체가 반환된다.
- 원시형을 return 한다면 return문이 무시된다.
function BigUser() {
this.name = "원숭이";
return { name: "고릴라" }; // <-- this가 아닌 새로운 객체를 반환함
}
alert( new BigUser().name ); // 고릴라- 첫 번째 규칙이 적용돼 return은 this를 무시하고 객체를 반환한다.
function SmallUser() {
this.name = "원숭이";
return; // <-- this를 반환함
}
alert( new SmallUser().name ); // 원숭이- 원시형을 반환하는 경우도 마찬가지로 두 번째 규칙이 적용돼 this를 반환한다.
- return문이 있는 생성자 함수는 거의 없다.
생성자 내 메서드
this에 프로퍼티를 더해주는 예시만 살펴봤는데, 메서드를 더해주는 것도 가능하다.
function User(name) {
this.name = name;
this.sayHi = function() {
alert( "제 이름은 " + this.name + "입니다." );
};
}
let bora = new User("이보라");
bora.sayHi(); // 제 이름은 이보라입니다.
/*
bora = {
name: "이보라",
sayHi: function() { ... }
}
*/
반응형