목차
객체는 객체 리터럴 이외에도 다양한 방법으로 생성 가능함!
new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환함.
빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있음.
생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수,
생성자 함수에 의해 생성된 객체를 인스턴스라 함.
자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공함.
객체 리터럴에 의해 객체를 생성하는 경우 프로퍼티 구조가 동일함에도 불구하고 매번 같은 프로퍼티와 메서드를 기술해야 함.
→ 객체가 한두 개라면 넘어갈 수도 있겠지만 만약 수십 개의 객체를 생성해야 한다면 문제가 큼.
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
생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러개를 간편하게 생성할 수 있음
//생성자 함수
function Circle(radius){
//생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴.
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
//인스턴스의 생성
const circle1 = new Circle(5); //반지름이 5인 Circle 객체를 생성
const circle2 = new Circle(10); //반지름이 10인 Circle 객체를 생성
console.log(circle1.getDiameter()); //10
console.log(circle2.getDiameter()); //20
<aside> 💡 this : 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수임. this가 가리키는 값(즉 this 바인딩)은 함수 호출 방식에 따라 동적으로 결정됨
</aside>