[디자인 패턴] 프로토타입(Prototype) 패턴

❓프로토타입 패턴이 무엇일까?

프로토타입 패턴은 생성패턴의 하나로, 프로토타입(원형)을 사용하여 객체를 생성하는 것을 말합니다.

❓프로토타입(원형)을 사용하는 이유?

프로토타입에서는 기존에 있는 객체가 있다면, 새로 생성하는 것이 아닌, 기존의 객체를 복제하여 사용합니다. 이는 새로 객체를 만드는 것 보다 자원을 절약할 수 있습니다. 즉 인스턴스화 과정을 생략함으로써 생성 로직에 소모되는 시간과 자원을 절약할 수 있다는 것!

이러한 특성 때문에 대량 생산을 할 때 적은 자원으로 많은 객체를 만들 수 있다는 장점이 있습니다!

❓자바스크립트의 예시?

사실 자바스크립트의 예시라고 할 것이 없는 것이, 프로토타입은 자바스크립트에 내장 되어 있는, JS의 특징이라 할 수 있습니다.

const Person = (function (){
	function Person(name){
		this.name = name
	}
	// 프로토타입 메서드
	Person.prototype.sayHi = function () {
		console.log(`Hi! my name is ${this.name}`)
	}
	// 정적 메서드
	Person.sayHello = function () {
		console.log(`Hello`)
	}
	return Person
}());

함수를 이용하여 생성자 함수를 만들었습니다. Person 객체의 prototype 객체로 접근하여 sayHi를 입력함으로써, Person의 프로토타입 객체에 sayHi 메서드를 할당한 것입니다. 이를 이용해 Person 객체를 복제한다면, sayHi 메서드를 프로토타입 객체에서 끌어와 바로 사용할 수 있다는 것이죠.

class Person {
	constructor (name) {
		this.name = name;
	}
	// 프로토타입 메서드
	sayHi () {
		console.log(`Hi! my name is ${this.name}`)
	}
	//정적 메서드
	static sayHello {
		console.log(`Hello`)
	}
}

위는 ES6에 도입된 JS의 Class로 만든 클래스입니다. 클래스에서는 메서드에 아무 것도 표시하지 않는다면, 자동으로 프로토타입의 메서드가 됩니다.

이렇게 JS의 특성 덕분에, new 연산자로 객체를 생성하더라도, 새로 객체가 생성되는 것이 아닌 프로토타입을 통해 객체가 복제된다는 것을 알게되었습니다! 지식이 늘었네요!