Deep Dive - 17.생성자 함수

🔶생성자 함수를 사용하여 객체를 생성하는 법

const person = new Object(); // 1.생성자 함수 사용 - 빈 객체를 생성하여 반환함.

person.name = "Lee"; // 2.그 객체에 프로퍼티 또는 메서드를 추가할 수 있음.
person.sayHello = function(){console.log("Hello")};

console.log(person); // 3.결과 { name:"Lee", sayHello:function(){} }

🔶생성자 함수에 의한 객체 생성 방식의 장점

:생성자 함수를 사용하면 프로퍼티 구조가 동일한 객체를 간편하게 반복하여 생성할 수 있음.

// ☆생성자 함수에서의 this : new연산자로 인해 생성된 "인스턴스 객체"
function Circle(num){
  this.radius = num;
  this.getDiameter = function(){
  	return 2*this.radius; 
  };
}

const c1 = new Circle(5); // {radius:5, getDiameter:fn}
const c2 =new Circle(10); // {radius:5, getDiameter:fn}

c1.getDiameter(); // 10
c2.getDiameter(); // 20

🔶생성자 함수의 인스턴스 생성 과정

 function Circle(num){
   //1.암묵적으로 인스턴스 객체가 생성되고, 
   console.log(this); // Circle{} //2.this가 바인딩 됨.
   // 3.초기화 됨.
  this.radius = num;
  this.getDiameter = function(){
  	return 2*this.radius; 
  };
}

const c1 = new Circle(5); // 4.완성된 인스턴스를 반환함. {radius:5, getDiameter:fn}

new 연산자와 함께 생성자 함수를 호출하면

< 런타임 이전에 >
1.암묵적으로 인스턴스를 생성함
:암묵적으로 빈 객체(인스턴스)가 생성 됨.

2.this바인딩 됨 :생성자 함수 내부의 this와 인스턴스 객체가 연결됨
:생성자 함수 내부의 this와 this가 가리킬 객체인 인스턴스 객체가 연결됨.

< 런타임 중 >
3.인스턴스를 초기화 한 후 (초기화: 인스턴스 프로퍼티 추가, 초기값 할당하는 것)
:인스턴스에 프로퍼티나 메서드를 추가함.
:생성자 함수가 인수로 전달받은 초기값을 프로퍼티에 할당함.

4.암묵적으로 인스턴스를 반환함.
: 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환됨.
1)그러나 명시적으로 객체를 반환하면 this반환이 무시되고, 명시적으로 반환한 객체가 반환됨.

function Circle(num){
  this.radius = num;
	
  return {a:"1"}; // 명시적으로 객체를 반환함.
}

const c1 = new Circle(5); 
console.log(circle); // {a:"1"}

2)그러나 명시적으로 원시 값을 반환하면 원시 값 반환은 무시되고, 암묵적으로 this가 반환됨.

function Circle(num){
  this.radius = num;
	
  return 1; // 원시값을 반환함. 이는 무시됨.
}

const c1 = new Circle(5); 
console.log(circle); // {radius : 5}

🔶생성자 함수 내부에서 명시적으로 다른 값을 return하는 것은 생성자 함수의 기본 동작을 훼손함. 따라서 생성자 함수에서 return문은 반드시 생략해야 한다!

🔶new연산자

• 일반 함수와 생성자 함수에는 특별한 차이가 없음.
  일반 함수에 new를 붙이면 그게 생성자 함수가 되는 것임.
• 그래서 일반함수와 구별하기 위한 노력으로 생성자 함수는 첫 문자를 대문자로 하게 됨.