17.1 Object 생성자 함수

<aside> 💡 new 연산자로 호출하여 객체 생성

</aside>

const person = new Object();

person.name = 'Lee';
person.sayHello = function () {
	console.log('Hi! My name is ' + this.name);
};

console.log(person);
person.sayHello();

생성자 함수에 의해 생성된 객체를 인스턴스라 한다.

JS는 Obejct 생성자 함수 외에도 String Number Boolean Function Array Date RegExp Promise 등 빌트인 생성자 함수 제공

// String 생성자 함수에 의한 String 객체 생성
const strObj = new String('Lee');
console.log(typeof strObj); // object
console.log(strObj); // String {"Lee"}

// Number 생성자 함수에 의한 Number 객체 생성
const numObj = new Number(123);
console.log(typeof numObj); // object
console.log(numObj); // Number {123}

// Boolean 생성자 함수에 의한 Boolean 객체 생성
const boolObj= new Boolean(true);
console.log(typeof boolObj); // object
console.log(boolObj); // Boolean {true}

// Function 생성자 함수에 의한 Function 객체(함수) 생성
const func = new Function('x', 'return x * x');
console.log(typeof func); // function
console.dir(func); // ƒ anonymous(x)

// Array 생성자 함수에 의한 Array 객체(배열) 생성
const arr = new Array(1, 2, 3);
console.log(typeof arr); // object
console.log(arr); // [1, 2, 3]

// RegExp 생성자 함수에 의한 RegExp 객체(정규 표현식) 생성
const regExp = new RegExp(/ab+c/i);
console.log(typeof regExp); // object
console.log(regExp); // /ab+c/i

// Date 생성자 함수에 의한 Date 객체 생성
const date = new Date();
console.log(typeof date); // object
console.log(date); // Mon May 04 2020 08:36:33 GMT+0900 (대한민국 표준시)

Object 생성자 함수를 사용해 객체를 생성하는 방식은 특별한 이유가 없다면 그다지 유용해 보이지 않는다.

17.2 생성자 함수

<aside> 💡

객체 리터럴로 생성할 경우 직관적이고 간편하지만, 동일한 프로퍼티를 갖는 객체를 여러 개 생성할 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.

</aside>

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

circle1과 circle2의 property 구조는 동일하지만, 상태 데이터가 다르다.

값의 변경을 위해 동일한 구조의 객체를 생성해야 하는 단점이 있다.

<aside> 💡 생성자 함수로 생성할 경우 동일한 객체를 여러 개 만들 수 있다.

</aside>

// 생성자 함수
function Circle(radius) {
	// 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
	this.radius = radius;
	this.getDiameter = function () {
		return 2 * this.radius;
	}
}

// 인스턴스 생성
const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

<aside> 💡 this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수다. this바인딩은 함수 호출 방식에 따라 동적으로 결정된다.

</aside>