[JavaScript] 생성자 함수
Lpla
·2020. 7. 27. 22:05
반응형
자바스크립트 코드를 짜다 보면 비슷한 객체를 여러개 만들어야 하는 경우가 많다.
이 때 new 연산자와 생성자 함수를 이용할 수 있다.
생성자 함수는 일반 함수와 기술적으로 차이가 없기 때문에 이를 구별하기 위해 다음과 같은 규칙을 정해두고 있다.
- 함수의 첫 글자는 대문자
- new와 함께 호출
function Member(name) {
this.name = name;
this.age = 29;
}
let member = new Member("Jin");
alert(member.name); // Jin
alert(member.age); // 29
위 코드의 작동 원리는 다음과 같다.
function Member(name) {
// this = {}; 빈 객체가 임시로 만들어진다.
// 새로운 프로퍼티를 this에 추가한다.
this.name = name;
this.age = 29;
// return this; this가 임시로 반환된다.
}
let member = new Member("Jin"); // 아래 코드와 같다.
// let member = {
// name: 'Jin',
// age: 29
// };
alert(member.name); // Jin
alert(member.age); // 29
재사용할 목적이 아니라면 new Member(...); 대신 new function(){...} 을 사용할 수 있다.
let member = new function() {
this.name = 'Jin',
this.age = 29
}
alert(member.name); // Jin
alert(member.age) // 29
일반적인 생성자 함수는 return문이 없다. 반환할 값은 모두 this에 저장되고, this는 자동으로 반환되기 때문이다.
그럼에도 return문을 사용하면 아래와 같은 결과가 나온다.
function Member() {
this.name = "Jin";
return {name: "bad Guy"};
}
alert( new Member().name ); // bad Guy
return문에 아무것도 반환하지 않으면 다음과 같다.
function Member() {
this.name = "Jin";
return;
}
alert( new Member().name ); // Jin
그러므로 대부분의 경우 return을 작성할 필요가 없다.
반응형