[JS]생성자 함수

Mincho·2023년 6월 10일

JavaScript 딥다이브 리터럴 객체 생성자 함수

JS

목록 보기

8/8

🔴 함수 생성 하는 방식

함수는 객체이다. 객체를 생성하는 방식에는 단순히 객체 리터럴로 생성하는 것이 단순하고 쉽다. 하지만 생성자 함수를 사용하여 객체를 생성하는 방식이 있다. 기존의 리터럴 방식과 어떠한 차이가 있는지 알아보자.

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

생성자 함수란 new연산자와 함께 호출하여 인스턴스(객체)를 생성하는 함수를 의미한다.

const str = new String('Choi');
console.log(typeof str); //object
console.log(str); // String{"Lee"}

const func = new Function('x', 'return x*x');
console.log(typeof func); // function

단순히 이렇게 생성자 함수로 객체를 생성하는 것은 유용해 보이지 않는다. 하지만 매번 같은 객체를 여러개 생성해야 하는 경우 객체 리터럴을 사용하는 것보다 생성자 함수로 생성하는 것이 더 효율적이다.

const cal1 = {
 num : 3,
 sum(){
 	return 10 + this.num
 }
}

const cal2 = {
 num : 10,
 sum(){
 	return 10 + this.num
 }
}

console.log(cal1.sum()) //13

이 처럼 객체 리터럴에 의해 객체를 생성하는 경우 매번 같은 프로퍼티와 메서드를 기술해야 한다.

function Cal(num){
 	this.num = num;
  	this.sum = () =>{
      return 10 + this.num;
    };
}

const cal1 = new Cal(3);
const cal2 = new Cal(10);

console.log(cal1.sum(),cal2.sum()) // 13 20

위와 같이 new연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작하게 된다.

this
자기 참조 변수이다. this 바인딩은 함수 호출 방식에 따라 다르다.

함수의 호출 방식 this의 바인딩
일반 함수로 호출 전역 객체
객체의 매서드로 호출 메서를 호출한 객체
생성자 함수로 호출 생성자 함수가 생성할 인스턴스

함수의 호출 방식	this의 바인딩
일반 함수로 호출	전역 객체
객체의 매서드로 호출	메서를 호출한 객체
생성자 함수로 호출	생성자 함수가 생성할 인스턴스

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

생성자 함수는 인스턴스 생성과 인스턴스를 초기화하는 것이다. 자바스크립트 엔진은 암묵적인 처리를 통해 인스턴스를 생성하고 반환한다. 암묵적으로 인스턴스를 생성하고 인스턴스를 초기화 한 후 반환하는 것이다.

일반적으로 빈 객체가 생성된다. 이 빈 객체가 생성자 함수가 생성한 인스턴스이다.

function Cal(num){
  
	console.log(this)	// Cal{} 빈 객체생성
  
  this.num = num;
  this.sum = () =>{
      return 10 + this.num;
    };
}

생성자 함수의 코드가 한 줄 씩 실행되다 this에 바인딩되어 있는 인스턴스를 초기화하여 값을 할당해준다.

또한 생성자 함수의 내부 로직이 끝나면 암묵적으로 this가 반환된다. 하지만 this가 아닌 다른 객체를 return하면 return한 객체가 반환되고 원시 값을 반환하면 원시 값은 무시되고 암묵적으로 this가 반환된다.

function Cal(num){
  
  this.num = num;
  this.sum = () =>{
      return 10 + this.num;
    };
  
  return {}; 
}
const calculate = new Cal(1)
console.log(calculate) // {}

////

function Cal(num){
  
  this.num = num;
  this.sum = () =>{
      return 10 + this.num;
    };
  
  return 100 
}
const calculate = new Cal(1)
console.log(calculate) // Cal{num : 1, sum : f}