생성자함수의 객체 생성

생성자 함수란?

new 연산자를 사용해 객체를 생성하는 함수를 말한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가할 수 있다

const person = new Object();

  person.name= 'soyoung';
  person.sayHello = function(){
    console.log(`Hi, my name is ${this.name}`)
  };

  console.log(person) // {name: 'soyoung', sayHello: ƒ}
  person.sayHello() // Hi, my name is soyoung

 

 

WYH, 생성자 함수를 사용하는가?

객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편한데      ( 추가내용 :  2022.09.17 - [개발공부] - 객체리터럴 )

왜 생성자 함수를 사용하는가?

 

객체 리터럴은 한번에 하나의 객체만 생성할 수 있다. 그렇기 때문에 동일한 프로퍼티 구조를 가지고 있는 객체를 여러개 생성해야 할 때, 똑같은 프로퍼티의 객체를 매번 만들어야 한다. 객체의 수가 많을수록 비효율적인 코드가 된다.

 

아래의 코드는 객체 리터럴에 의해 객체를 생성하는 경우의 예다.

프로퍼티 구조가 동일하지만 매번 같은 프로퍼티와 메서드를 작성해 함수를 실행한다. 생성자함수는 이러한 반복적인 내용의 프로퍼티 구조가 있는 경우에 사용하면 좋다. 

  const circle1 = {
    radius: 5,
    getDiameter(){
      return 2 * this.radius;
    }
  };
  console.log(circle1.getDiameter()); // 10

  const circle2 = {
    radius : 10,
    getDiameter(){
      return 2 * this.radius;
    }
  }
  console.log(circle2.getDiameter()); // 20

 

 

생성자 함수의 객체 생성 방식

생성자 함수로 객체를 만드는 방식은 템플릿처럼 구조를 만들어 놓는 것이다. 생성자 함수를 사용하면 프로퍼티 구조가 동일한 객체를 여러개 생성할 수 있다. 

• 일반 함수와 동일한 방법으로 생성자 함수를 정의한다
• new 연산자와 함께 호출해야 생성자 함수로 동작한다. new 연산자를 사용하지 않으면 일반 함수로 동작한다.

// 생성자 함수
function Circle(radius){
  this.radius = radius;
  this.getDiameter = function(){
    return 2 * this.radius;
  };
}

// 인스턴트(객체)생성
const circle1 = new Circle(5)
const circle2 = new Circle(15)

// 결과 출력
console.log(circle1.getDiameter()) // 10
console.log(circle2.getDiameter()) // 30

 

생성자 함수의 역할은

• 프로퍼티 구조가 동일한 인스턴스(객체)를 생성하기 위한 템플릿으로서 동작하는 것
• 함수가 동작하면서 인스턴스(객체)를 생성하고 생성된 인스턴스를 초기화(초기값 할당)하는 것이다

 

 

 

 

Deepdive - 생성자함수

간단하게 말하면 동일한 구조의 프로퍼티가 있는 객체를 만들어야 한다면,

리터럴객체를 사용해 만들기 보다는 생성자 함수를 통해서 프로퍼티 구조를 템플릿화 시켜놓고! 객체를 생성해라! 

음. 첫번째 읽었을 때, 두번째 읽었을 때, 정리하면서 읽을 때!ㅋㅋㅋㅋ 조금씩 더 이해가 된다. 한번에 다 이해가 되면 좋겠지만 다음번이 있으니까!