자바스크립트) 생성자 함수

0. 생성자 함수

생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다. 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.

 

아래 예제는 Object 생성자 함수로 객체를 생성하는 방법이다.

const obj = new Object();

// 동적 프로퍼티 추가
obj.id = 'leo';
obj.velog = function () {
  console.log('Hello Velog');
}

console.log(obj);
// { id: 'Leo', velog: [Function (anonymous)] }

생성자 함수는 객체를 생성하기 위해 사용되므로, 반드시 Object 생성자 함수를 사용해 객체를 생성해야 하는 것은 아니다. (객체 리터럴을 통해서도 만들 수 있기 때문)

1. 객체 리터럴{} 로 객체 만들면 되지 생성자 함수 왜 사용함?

- 객체 리터럴 { ... } 을 사용하면 객체를 쉽게 만들 수 있다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생긴다. 이때 new 연산자와 생성자 함수를 사용하면 유사한 객체를 여러 개 쉽게 만들 수 있다.

-  object를 마구 복사하고 싶을 때 사용. object를 막 찍어내고 싶을 때 사용한다. 

위 예제처럼 사람이라는 객체를 엄청나게 찍어내고 싶은데 위에처럼 하면 안된다. 

아래 예제처럼 값을 복사해도 안된다. 왜냐 참조타입이기에 얕은 복사를 할시 원본데이터가 변경되니까(즉, 원본 값을 공유하니까!)

 

그럼 어떻게 해? 그래서 나온것이 생성자함수

 

2. 생성자 함수 만드는 법

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

🔸 아래 예제처럼 parameter 값을 뚫어서 다양한 value값이 있는 object를 만들 수 있음

 

🔸생성자 함수의 this 는 자기 자신으로 생성자 함수를 호출한 객체를 의미한다.

function UserInfo() {
  this.name = 'Bob';
}

let user = new User();

3. 생성자 함수가 객체를 생성하는 과정

1. 빈객체 생성 및 this 바인딩

2. 인스턴스 초기화

3. this(인스턴스 반환)

 

1️⃣빈 객체 생성 및 this 바인딩

//0-1). 생성자 함수 선언
function Circle(radius) {
// 1. 암묵적으로 빈 객체가 생성되고 생성된 인스턴스는 this 에 바인딩 된다.
  console.log(this) // Circle{}
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}
// 0-2) 인스턴스 생성
const circle1 = new Circle(5);

생성자 함수를 new 키워드와 함께호출 시 가장 먼저 빈 객체가 생성된다.  그리고 생성된 빈 객체(인스턴스) 는 this에 바인딩 된다. 즉, this는 빈객체를 가리킨다. 

console.log(this) 콘솔 출력문을 사용해 Circle 생성자 함수 내부에서 this를 출력해보니 Circle{} 빈 객체가 출력됨을 확인할 수 있다. 

 

2️⃣인스턴스 초기화

//0-1). 생성자 함수 선언
function Circle(radius) {
// 1. 암묵적으로 빈 객체가 생성되고 생성된 인스턴스는 this 에 바인딩 된다.
  console.log(this) // Circle{}
  // 2. 인스턴스 초기화
  // 생성자 함수 내부에 기술되어 있는 코드를 한 줄씩 실행해 인스턴스를 초기화한다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}
// 0-2) 인스턴스 생성
const circle1 = new Circle(5);

빈 객체가 생성되었다면 다음으로 인스턴스 초기화가 수행된다. 생성자 함수 내부에 기술되어 있는 코드를 한 줄씩 실행해 나가며 생성한 빈 객체(인스턴스)를 초기화 한다.(=객체의 프로퍼티를 할당하고 초기값을 설정한다) 

 

3️⃣this 반환

//0-1). 생성자 함수 선언
function Circle(radius) {
// 1. 암묵적으로 빈 객체가 생성되고 생성된 인스턴스는 this 에 바인딩 된다.
  console.log(this) // Circle{}
  // 2. 인스턴스 초기화
  // 생성자 함수 내부에 기술되어 있는 코드를 한 줄씩 실행해 인스턴스를 초기화한다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
  // 3. this 반환
}
// 0-2) 인스턴스 생성
const circle1 = new Circle(5); // Circle{radius:10,getDiameter:f}

인스턴스 초기화를 끝마치면 마지막으로 this 바인딩 값, 즉 인스턴스를 리턴한다. 

---

참고자료

https://developer-talk.tistory.com/281

[JavaScript]생성자 함수(Constructor Function)

https://developer-talk.tistory.com/538

[JavaScript]생성자 함수와 this(Constructor Function and this)

https://novlog.tistory.com/entry/JavaScirpt-%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1

[JavaScript] 생성자 함수를 이용한 객체 생성