[javascript] 객체지향 프로그래밍, 상속

객체지향 프로그래밍, 상속

✅  개념 

1. 객체지향 프로그래밍

- 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다.

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

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

 

2. 상속과 프로토타입

- 상속은 객체 지향 프로그래밍의 핵심 개념으로,

- 어떤 객체의 프로퍼티 또는 메소드를 다른 객체가 상속받아 그래도 사용할 수 있는 것을 말한다.

- 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.

- 중복을 제거하는 방법은 기존의 코드를 적극적으로 재사용하는 것이다.

✅  왜 만들었을까?

- 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다.

- 실체는 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있다.

 

- 예를 들어, 사람은 이름, 주소, 성별, 나이, 신장, 체중, 학력, 성격, 직업 등 다양한 속성을 갖는다.

- 각 속성을 구체적으로 표현하면 특정한 사람을 다른 사람과 구분할 수 있다.

- 이것을 프로그래밍에 접목시킨다.

- 프로그래밍에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고 한다.

✅  왜 배워야 할까?

- 재사용성

- 불필요한 메모리 관리

✅  기존에 있던 것과 차이점

- 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점을 가지고 있었다.

출처: https://url.kr/wn7qj3

✅  간단하게 만들어 보기

- 위에 그림과 같인 코드 구현

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

const circle1 = new Circle(1);

const circle1 = new Circle(2);

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

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

- 위의 예시의 경우 생성자 함수가 생성될때마다 새로운 radius와 새로운 getArea 메소드를 갖는다.

- 그렇기 비교를 한다면 false가 나오고, 서로 다른 메모리를 차지하게 되어 불필요하게 낭비하게 된다.

 

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

- 이러한 문제를 해결하기위해 동일한 메소드를 중복 소유하게 할 수 있다.

 

- 위에 그림 처럼 코드 구현

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

// Circle이라는 생성자 함수 프로토타입 안에 getArea 메소드를 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function() {
// Math.PI는 원주율을 나타내는 상수이다.
    return Math.PI * this.radius ** 2;
  }
}

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

// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// Circle.prototype으로부터 getArea 메소드를 상속받는다.
// 그렇기에 하나의 메소드만으로 공유가 가능하다.
console.log(circle1.getArea === circle2.getArea); // true

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

 

✅  마무리

- 생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메서드를 프로토타입에 미리 구현해 두면 생성자 함수가 생성할 모든 인스턴스는 별도의 구현없이 상위 객체인 프로토타입의 자산을 공유하여 사용할 수 있다.

- 객체지향 프로그래밍의 중요 개념인 상속과 프로토타입을 활용한다면, 재사용성이 높은 코드와 불필요한 메모리를 만들지 않을 수 있다.

 

 

 

 

출처:

모던 자바스크립트 19장