[FE/JavaScript] 생성자 함수에 의한 객체 생성

생성자 함수에 의한 객체 생성

---

Q.생성자 함수가 뭔가요?

A. 생성자(constructor)함수는 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수!

생성자 함수에 의해 생성된 객체를 **인스턴스(instance)**라고 함.

Q.객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요?

▶객체 리터럴에 의한 객체 생성 방식의 문제점

• 객체 리터럴 방식으로 생성된 객체는 같은 형태의 객체를 재생성 불가!
• 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 할 경우 매번 같은 프로퍼티를 기술 해야함(비효율적)

▶생성자 함수를 사용한 객체 생성 방식

• 생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용해 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있음
• 즉, 여러개의 동일한 property를 가지는 객체를 생성하기 위해 사용!
• 또한, prototype을 이용해 메모리 절감을 위해 사용

+) https://mylko72.gitbooks.io/front-end-note/content/constructormd.html

https://velog.io/@minj9_6/JavaScript-생성자-함수에-의한-객체-생성

Q.생성자 함수가 객체(인스턴스)를 생성하는 과정에 대해 간략하게 설명해줄 수 있나요?

🔔요약
#new 연산자와 함께 생성자 함수를 호출 시 JavaScript 엔진은 암묵적으로 다음과 같은 과정으로
인스턴스를 생성하고 인스턴스를 초기화 한 후 암묵적으로 인스턴스를 반환

1.인스턴스 생성과 this binding (필수)
2.인스턴스 초기화 (optional)
3.인스턴스 반환
new 키워드로 빈 객체{}를 만든다

1. 생성자 함수는 빈 객체에 생성 할 property를 정의
2. 생성자 함수 바디에 코드를 실행하기 위해 this에 속성 및 메소드를 추가
3. 만든 빈 객체의 proto에 생성자 함수의 prototype을 대입
4. this를 생성자의 반환값으로 변환

+)https://doitnow-man.tistory.com/132

+)https://publizm.github.io/posts/javascript/constructor