[Javascript] 생성자 함수(constructor)

nxnaxx·2021년 11월 18일
0

javascript

목록 보기
11/14
post-thumbnail

생성자 함수(constructor)

 new 연산자와 함께 호출하여 객체를 생성하는 함수를 생성자 함수(constructor)라 하며, 생성된 객체는 인스턴스(instance)라고 한다.

const favorite = new Object();

favorite.sport = 'futsal';
favorite.intro = function () {
  console.log(`My favorite sport is ${this.sport}`);
};

console.log(favorite);
favorite.intro();

[실행결과]
{ sport: 'futsal', intro: [Function (anonymous)] }
My favorite sport is futsal

객체를 생성하는 방법은 객체 리터럴을 사용하는 편이 더 나은데, 왜 Object 생성자 함수를 사용하는 것일까?

객체 리터럴 방식의 문제점

 객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하지만 단 하나의 객체만 생성하므로 동일한 프로퍼티를 갖는 객체가 여러 개일 경우에는 비효율적이다.

// The disadvantage of object literal
const circle1 = {
  radius: 2,
  circumference() {
    return 2 * 3.14 * this.radius;
  }
};

console.log(circle1.circumference());

const circle2 = {
  radius: 6,
  circumference() {
    return 2 * 3.14 * this.radius;
  }
};

console.log(circle2.circumference());

[실행결과]
12.56
37.68

위 예제에서 circle1과 circle2 객체의 circumference 메서드는 동일하다. 이렇게 객체 리터럴을 사용해 객체를 생성하는 경우 프로퍼티 구조가 비슷함에도 매번 같은 프로퍼티와 메소드를 기술해야 하므로 효율적이지 않다.


생성자 함수 방식의 장점

 생성자 함수에 의한 객체 생성 방식은 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

function Circle(radius) {
  this.radius = radius;
  this.circumference = function() {
    return 2 * 3.14 * this.radius;
  };
}

const circle3 = new Circle(2);
const circle4 = new Circle(6);

console.log(circle3.circumference());
console.log(circle4.circumference());

[실행결과]
12.56
37.68

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

1. 인스턴스 생성과 this 바인딩

 new 연산자와 함께 생성자 함수를 호출하면 먼저 암묵적으로 인스턴스(빈 객체)가 생성된다. 그리고 인스턴스는 this에 바인딩된다.

📝 바인딩(name binding)
식별자와 값을 연결하는 과정을 바인딩이라 한다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.

function Circle(radius) {
  // 1. 인스턴스 생성과 this 바인딩
  console.log(this); // Circle {}
  
  this.radius = radius;
  this.circumference = function() {
    return 2 * 3.14 * this.radius;
  };
}

2. 인스턴스 초기화

 개발자가 직접 기술하는 것으로 this에 바인딩되어 있는 인스턴스에 프로퍼티나 메소드를 추가하고 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당한다.

function Circle(radius) {
  // 1. 인스턴스 생성과 this 바인딩
  // 2. 인스턴스 초기화
  this.radius = radius;
  this.circumference = function() {
    return 2 * 3.14 * this.radius;
  };
}

3. 인스턴스 반환

 생성자 함수 내부의 모든 처리가 끝나면 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

function Circle(radius) {
  // 1. 인스턴스 생성과 this 바인딩
  // 2. 인스턴스 초기화
  this.radius = radius;
  this.circumference = function() {
    return 2 * 3.14 * this.radius;
  };
  
  // 3. 인스턴스 반환
}

0개의 댓글