본문 바로가기
프론트엔드/JavaScript

상속(확장)

by step 1 2021. 5. 28.
반응형

객체지향에서의 상속은, 속성의 상속이 아닌, 하위로 내려갈 수록 구체화 되는 것이다.

상속의 효과

  • 프로그램 구조에 대한 이해도 향상: 최상위 클래스의 구조를 보고, 하위 클래스의 동작을 이해 할 수 있다.
  • 재사용성 향상: 상속을 이용하여, 해당 클래스에 필요한 속성 및 메소드를 모두 정의 하지 않고, 상속을 받아서 사용할 수 있다.
  • 확장성 향상: 일관된 형태의 클래스 객체를 추가 할 수 있어, 간단하게 프로그램 확장이 가능하다.
  • 유지보수성 향상: 각 객체마다, 자신의 메소드를 정의 하고 있다면, 코드 수정에서 많은 작업이 필요하지만, 상속을 사용한 경우 일관된 형태로 작성이 가능하다.

특정 클래스를 상속 받는 클래스를 생성 할 수 있다

 

extends 사용

class Vehicle {
    constructor(name, wheel){
        this.name = name
        this.wheel = wheel
    }
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle)

//  확장(상속)
class Bicycle extends Vehicle {
    constructor(name, wheel){
        // Vehicle 클래스를 의미
        super(name, wheel)
    }
}
const myBicycle = new Bicycle('자전거', 2)
const daughtersBicycle = new Bicycle('세발자전거', 3)
console.log(myBicycle)
console.log(daughtersBicycle)

class Car extends Vehicle {
    constructor(name, wheel, license) {
        // Vehicle 클래스를 의미
        super(name, wheel)
        // 새로운 로직 추가
        this.license = license
    }
}
const myCar = new Car('자동차', 4, '2종')
const daughtersCar = new Car('작은자동차', 4, '2종')
console.log(myCar)
console.log(daughtersCar)

반응형

'프론트엔드 > JavaScript' 카테고리의 다른 글

JS 데이터 - 숫자(수학)  (0) 2021.05.29
JS 데이터 - 문자  (0) 2021.05.28
ES6 Class  (0) 2021.05.28
this  (0) 2021.05.28
생성자 함수 (prototype)  (0) 2021.05.27