(JS) 객체 지향 프로그래밍 : 생성자 함수와 프로토타입 비교

객체 지향 관점에서, 어떤 상위 대상이 하위 대상을 포함하는 것이라면

그 공통점을 한데 묶어 주형처럼 객체를 찍어내는 것은 프로그래밍을 함에 있어서 상당한 시간 단축을 이뤄줄 수 있다.

이는 생성자 함수로 실현시킬 수 있다.

 

하지만 객체를 주형으로 찍어내면서도, 공통적으로 가지고 있으면 좋을법한 것은

굳이 새로이 찍어지는 객체에 추가하지않고, 상위 대상이 가진 것을 그대로 공유하여 쓰게할 수 있다.

이는 자바스크립트에서 지향하는 프로그래밍 방법이며 이를 상속(inheritance)이라고 한다.

 

이를 할 수 있게 하는 자바스크립트의 방법 중 가장 잘 알려져있는 것 중

프로토타입이 있다.

 

---

일단 생성자 함수부터 보자.

//생성자 함수
function Circle(radius) {
    this.radius = radius;
    this.getArea = function () {
        // Math.PI == 원주율을 나타내는 상수
        return Math.PI * this.radius ** 2;
    };
}

Circle 생성자함수는 원의 반지름이라는 프로퍼티와 넓이를 구하는 메서드를 포함한 객체를 함수이다.

효과적인 방법으로 보일 수 있으나, 여기서 객체를 찍어냈을때는 메모리의 관점에서 다소 낭비적인 구석이 있다.

 

const circle1 = new Circle(2);
const circle2 = new Circle(4)

console.log(circle1.getArea === circle2.getArea); // 다르다

console.log(circle1.getArea());
console.log(circle2.getArea());

 

위 객체의 원 넓이를 구하는 메서드의 경우에는 두 객체 모두 똑같은 계산식을 가졌음에도 불구하고

각각 메서드를 가지고있게 된다. 따라서 메모리 관점에서는 좋은 방법은 아니다.

이를 제어하기 위해 프로토타입 기반으로 상속을 구현할 수 있다.

 

---

아래는 생성자 함수에 프로토타입 함수를 추가한 것이다.

//생성자 함수
function Circle(radius) {
    this.radius = radius;
};

//프로토타입 함수
Circle.prototype.getArea = function () {
    return Math.PI * this.radius ** 2;
};

위에서 선언된

생성자 함수는 this.radius를 통해 해당 로컬의 인수를 받아 키 : 값으로 넣는 프로퍼티를 주형으로 한다.

 

프로토타입 함수는

Circle 생성자 함수 속에서 프로토타입으로 존재하게 되었다.

이 prototype은 getArea를 메서드로 가지게 된다.

 

이를 통해 앞으로 Circle을 통해 생성되는 객체들은

자바스크립트의 기능으로 인해 prototype으로 구분되는 getArea 메서드를 상속받아(공유하여) 사용하게 될 것이다.

const circle1 = new Circle(2);
const circle2 = new Circle(4);

console.log(circle1.getArea === circle2.getArea);
console.log(circle1.radius === circle2.radius);

console.log(circle1.getArea());
console.log(circle2.getArea());

두 객체의 속성이 같은가에 대해서

getArea는 서로 같은 prototype을 공유하므로 true가 출력되고

radius라는 프로퍼티에 대해서는 각자의 값을 사용하므로 false가 출력된다.

 

---

이를 통해

객체 지향적 방법을 통해 객체를 많이 생산하더라도

메모리 낭비를 확연히 줄여 소프트웨어의 성능향상에 크게 기여할 수 있다.