프로토타입, 프로퍼티와 메서드

 

 

객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다.

객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다.

이때 객체의 상태 데이터를 프로퍼티, 동작을 메서드라 부른다.

반지름은 원의 상태를 나타내는 상태 데이터(프로퍼티)이며

원의 지름, 둘레, 넓이를 구하는 것은 동작(메서드)이다.

 

 

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

// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);

// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea === circle2.getArea); //false

console.log(circle1.getArea()); //3.141592653589793
console.log(circle2.getArea()); //12.566370614359172

Circle 생성자 함수는 인스턴스를 생성할 때마다 getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.

이와 같은 동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메서드를 중복 소유하는 것은 메모리를 불필요하게 낭비한다.

또한 인스턴스를 생성할 때마다 메서드를 생성하므로 퍼포먼스에도 악영향을 준다.

만약 10개의 인스턴스를 생성하면 내용이 동일한 메서드도 10개 생성된다.

그래서 다음과 같이 상속을 통해 불필요한 중복을 제거해서 코드를 구현할 수 있다.

자바스크립트는 프로토타입을 기반으로 상속을 구현한다.

function Circle(radius) {
    this.radius = radius;
}

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function() {
    return Math.PI * this.radius ** 2;
};

// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);

// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는 
// 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea ===circle2.getArea); //true

console.log(circle1.getArea()); //3.141592653589793
console.log(circle2.getArea()); //12.566370614359172