[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라는 프로퍼티들로 각각 정의하였다.
컨스트럭터는 다음과 같은 컨벤션을 따른다.
- 컨스트럭터는 컨스트럭터가 아닌 다른 함수와 구분하기 위해 함수 이름 첫 문자를 대문자로 정의한다.
- 컨스트럭터는 만들어질 객체의 프로퍼티를 세팅하기 위해 this 를 사용한다. 컨스트럭터 내부에서 this는 만들어질 새로운 객체를 의미한다.
- 컨스트럭터는 프로퍼티나 행동(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를 리턴한다.