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

자바스크립트는 원래 객체지향적인 언어는 아닙니다만, prototype속성을 활용하여 상속을 구현하는 등, 객체지향 비스무리하게 사용가능합니다.

es6에서는 class도 등장해서 더더욱 객체지향적인 부분을 강화하였습니다.

객체지향 프로그래밍은 추상화를 사용하여 모델을 만드는 프로그래밍입니다.

객체지향 프로그래밍은 전통적인 프로그래밍 방식과 비교하여 서로 협력하는 관계를 형성하는 객체 모음을 가진 소프트웨어 설게로 볼 수 있습니다.

oop에서 각 객체는 메시지를 수신하고 데이터를 처리하며 메시지들을 다른 객체로 보낼 수 있습니다.

프로그래밍의 유연성과 유지 보수성을 높이기 위한 것이며 대규모 소프트웨어 프로그래밍에서 널리 사용됩니다.

객체 지향 프로그래밍의 특징은 다음 용어로 정리할 수 있습니다.

• Class - 객체 속성(Properties)을 정의합니다. ( 예: 설계 도면 )
• Object - Class의 인스턴스(Instance) 입니다. ( 예: 설계 도면을 통해 구현된 실제 제품 )
• Property - 객체의 속성을 말합니다. ( 예: color 등과 같은 명사 형태 )
• Method - 객체의 기능을 말합니다.( 예: walk() 등과 같은 동사 형태 )
• Constructor - 인스턴스 생성 순간에 호출 실행되는 메서드입니다.
• Inheritance - Class는 다른 Class로 부터 속성들을 상속받을 수 있습니다. (Super Class ⇒ Sub Class)
• Encapsulation - Class는 해당 객체의 속성, 메서드 만 정의할 수 있습니다. (외부 접근 불가)
• Abstraction - 복잡한 상속, 메서드, 객체 속성의 결합은 반드시 현실 모델을 시뮬레이션할 수 있어야 합니다.
• Polymorphism - 다른 Class 들이 같은 메서드나 속성으로 정의될 수 있습니다.

객체지향 상속 구현

먼저 Animal 생성자 함수를 만들어봅시다.

function Animal(type) { this.type = type; }

// 공통 설정

Animal.prototype.brain = true;

Animal.prototype.legs = 0;

공통 설정으로 brain과 legs prototype 속성값이 있습니다.

이제 Pet생성자 함수에 Animal을 상속받아 봅시다.

먼저, Animal constructor 속성 값들을 상속받기 위해 call메서드로 animal을 실행시킵니다.

function Pet(kind) {

// 생성자 함수 Animal 상속

Animal.call(this, '애완동물');

this.kind = kind;

}

이제 Animal의 속성값 외에 prototype 속성값도 상속받아봅시다.

// animal의 속성을 상속받음

Pet.prototype = Object.create(Animal.prototype);

Pet의 prototype이 Animal의 prototype으로 대체되었습니다. 그러나 constructor는 Pet을 가리켜야 new 생성자를 통해 Pet이 자신의 복사품을 만들 수 있겠죠.

// 현재 pet의 생성자 함수가 Animal이므로 Pet생성자로 변경

Pet.prototype.constructor = Pet;

그럼 이제 완성입니다!

이를 helper함수로 만들어 재사용가능하게 만들어봅시다.

// 상속 helper.js

function inherit(subClass, SuperClass) {

subClass.prototype = Object.create(SuperClass.prototype) ;

subClass.prototype.constructor = subClass;

}

사용은 아래 링크에서 확인

https://codepen.io/sujeong91/pen/ZVgMBw?editors=0010