[JS] Constructor Function

*freecodecamp 를 기반으로 작성하였다.

 

Constructor Function

 

컨스트럭터(Constructor)는 새로운 객체를 만드는 함수이다. 

이것은 새로운 객체에 속하는 프로퍼티나 기능을 정의한다.

 

function Bird() {
  this.name = "Albert";
  this.color = "blue";
  this.numLegs = 2;
}

let bluebird = new Bird;

위의 컨스트럭터는  Bird라는 객체를 name, color, numLegs라는 프로퍼티들로 각각 정의하였다.

 

컨스트럭터는 다음과 같은 컨벤션을 따른다.

1. 컨스트럭터는 컨스트럭터가 아닌 다른 함수와 구분하기 위해 함수 이름 첫 문자를 대문자로 정의한다.
2. 컨스트럭터는 만들어질 객체의 프로퍼티를 세팅하기 위해 this 를 사용한다. 컨스트럭터 내부에서 this는 만들어질 새로운 객체를 의미한다.
3. 컨스트럭터는 프로퍼티나 행동(behavior)를 정의한다. (다른 함수들이 값을 리턴하는 것과 달리)

 

컨스트럭터안에 있는 this는 만들어지는 객체를 가리킨다.

new 라는 오퍼레이터는 컨스트럭터를 부를 때 사용된다.

이것은 자바스크립트한테 Bird의 새로운 인스턴스인 bluebird를 만들라고 말해주는 것이다.

new가 없으면, 컨스트럭터 안의 this는 새롭게 만드러진 객체를 가리키지 못하여 예상밖의 결과를 가져올 수 있다.

 

저렇게  bird에서 만들어진 새로운 인스턴스인 bluebird는 bird 컨스트럭터가 가진 모든 프로퍼티를 가지게 된다.

 

blueBird.name;
blueBird.color;
blueBird.numLegs;

blueBird.name = 'Elvira';
blueBird.name;

//다른 객체와 같이 프로퍼티에 접근과 수정이 가능하다.

 

 그런데, 우리는 blueBird 뿐만 아니라 여러 특색을 가진 많은 새들을 만들길 원할 것이다.

그럴 때마다 Bird의 프로퍼티를 수정하려면 정말 귀찮을 것이다.

더 많은 종류의 Bird 오브젝트를 쉽게 만들기 위해선, Bird 컨스터럭터에 파라미터를 받도록 하면 된다!

 

function Bird(name, color) {
  this.name = name;
  this.color = color;
  this.numLegs = 2;
}

그러면 파라미터에 들어간 인자가 Bird 컨스턱터에서 새로운 특성을 가진 또다른 객체를 만들어낼 수 있다.

let cardinal = new Bird("Bruce", "red");

 

이렇게 언제든지 컨스터럭터는 새로운 객체를 만들 수 있고 그렇게 컨스터럭터로부터 만들어진 객체를 인스턴스(instance)라고 부른다. 

자바스크립트는 instanceof 라는 오퍼레이터를 통해 이 객체가 특정 컨스트럭터의 인스턴스인지 확인할 수 있는 기능을 제공한다!

 

function House(numBedrooms) {
  this.numBedrooms = numBedrooms;
}

// Only change code below this line

let myHouse = new House(2);
myHouse instanceof House; //true

인스턴스가 맞다면 true, 아니면 false를 리턴한다.