[자바스크립트] new 연산자, 생성자 함수

 

new 연산자와 생성자 함수

• 개발을 하다 보면 유사한 객체를 여러 개를 만들어야 할 때가 생긴다.
• 이때 new연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다.

 

 

생성자

• 생성자는 객체를 만드는 역할을 하는 함수이다.
• 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.
• 함수에 new를 붙이면 그 리턴 값은 객체가 된다.

function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
    return 'My name is '+this.name; 
}
document.write(p1.introduce()+"<br />");

var p2 = new Person();
p2.name = 'leezche';
p2.introduce = function(){
    return 'My name is '+this.name; 
}
document.write(p2.introduce());

• 리팩토링

function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is '+this.name; 
    }   
}
var p1 = new Person('egoing'); //생성자, 생성자 함수가 다 실행된 객체가 p1에 저장되는 것
document.write(p1.introduce()+"<br />");

var p2 = new Person('leezche');
document.write(p2.introduce());

• 생성자 내에서 이 객체의 프로퍼티를 정의하고 있다. 이러한 작업을 초기화라고 한다. 이를 통해서 코드의 재사용성이 대폭 높아졌다.

 

 

생성자 함수

1. 함수의 이름의 첫 글자는 대문자로 시작
2. 반드시 new연산자를 붙여 실행한다.

• 이름의 '첫 글자가 대문자’인 함수는 new를 붙여 실행해야 한다는 기억 하자!!

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

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

 

동작 원리

1. 빈 객체를 만들어 this에 할당
2. 함수 본문 실행. this에 새로운 프로퍼티를 추가해 this를 수정
3. this를 반환

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

• let user = new User("보라")는 아래 코드를 입력한 것과 동일하게 동작

let user = {
  name: "보라",
  isAdmin: false
};

 

 

new function() { … }

• 익명 함수는 어디에도 저장되지 않는다.
• 단 한 번만 호출할 목적으로 만들었기 때문에 재사용이 불가능하다.
• 익명 생성자 함수를 이용하면 재사용을 막으면서 코드를 캡슐화할 수 있다.

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

 

 

📌 참고

• 모던 JavaScript 튜토리얼