객체지향 프로그래밍과 프로토타입, 상속

자바스크립트는 프로토타입 객체지향 프로그래밍 언어다.

 

객체지향 프로그래밍

• 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 한다.
• 객체 지향 프로그래밍은 이러한 독립적인 객체의 집합으로 프로그램을 표현한다.
• 객체의 상태를 나타내는 데이터와 상태를 조작할 수 있는 동작을 논리적 단위로 묶은 복합적 자료구조다
• 객체의 상태를 프로퍼티(property) , 동작을 메서드(method)라 부른다.

const circle = {
  radius: 5,		// 프로퍼티
  getDiameter() { 	// 메서드
    return 2 * this.radius;
  }
}

 

상속과 프로토타입

• 상속은 객체지향 프로그래밍의 핵심으로
  어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.
• 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.

 

프로토타입의 상속을 구현하여 불필요한 중복을 제거하는 예

생성자 함수는 동일한 프로퍼티/메서드 구조를 갖는 객체를 여러 개 생성할 때 유용하다.

하지만 아래의 예시는 Circle생성자 함수가 인스턴스를 생성할 때마다 getArea메서드도 중복 생성되는 문제가 발생한다.

getArea는 하나만 생성하여 모든 인스턴스가 공유해 사용하는 것이 바람직한 방법이다. 

function Circle(radius) {
  this.radius = radius;
  this.getArea = function(){
    // PI = 원주율상수
    return Math.PI * this.radius ** 2;
  }
}

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

console.log(circle1.getArea === circle2.getArea); // false

 

상속을 통해 불필요한 중복을 제거한다

circle생성자 함수가 생성한 모든 인스턴스(객체)는

자신의 프로토타입(상위 객체 = 부모)의 모든 프로퍼티와 메서드를 상속받는다.

getArea 메서드는 단 하나만 생성되어 프로토타입인 Circle.prototype의 메서드로 할당되어 있다. 따라서 circle생성자 함수가 생성한 모든 객체는 자신의 radius프로퍼티만 소유하고 내용이 동일한 getArea메서드는 상속을 통해 공유해 사용한다.

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

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

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

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

 

 

프로토타입 객체

• 프로토타입이란 객체지향 프로그래밍의 상속을 구현하기 위해 사용된다.
• 프로토타입은 어떤 객체의 부모 객체의 역할을 하는 객레초 다른 객체에 공유 프로퍼티/메서드를 제공한다. 
• 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자유롭게 사용할 수 있다