Javascript_Inheritance, Super[es6]

keynene·2022년 9월 16일
0

JavaScript

목록 보기
31/35

Inheritance

es6에서의 상속(Inheritance)은 extends로 명시하여 나타냄
기능은 es6 이전 버전의 기능과 같으나 좀 더 명시적이며 간결해짐

/* Person(부모클래스) : 모든 객체는 Person 기능을 공유 */
class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return 'prototype : '+ (this.first + this.second);
    }
}
/* PersonPlus(자식클래스) : Person기능을 공유하며 avg 함수 추가 */
class PersonPlus extends Person{
    avg(){
        return (this.first + this.second)/2;
    }
}

var noi = new PersonPlus('noi', 10, 20);
console.log('noi.sum()', noi.sum()); //30
console.log('noi.avg()', noi.avg()); //15

※ 상속하면 상기 noi처럼 PersonPlus만 호출하더라도 Person의 기능을 사용할 수 있음 (ex. sum) 즉, 자식클래스는 부모클래스의 기능을 상속받고 추가기능을 구현할 수 있음

Inheritance

  1. 상속이란
    동일한 기능을 가지는 객체를 하나의 부모class(constructor)를 통해 생성하고, 일부/전체 객체에 추가 기능(property)이 필요할 경우 자식class(constructor)로 추가기능을 부여하는 방법
  2. 상속이 없는경우 생기는 비효율
    부모class가 내가 작성한 코드가 아니거나 다른 라이브러리를 가져다 썻을 때, 위험을 무릅쓰고 수정을 진행하게 되고 오류가 생길 수 있음.
    수정이 불가능하다면 동일한 class 재선언해야하므로 유지보수에 좋지않고 메모리 효율이 떨어짐
  3. 상속받는 자식 class 구현방법
    부모class 선언 후 extends를 통해 상속하여 자식class 생성

    class 부모{부모클래스 내용}
    class 자식 extends 부모 {추가/수정기능}
    var 객체 = new 자식

Super

상기코드에서 PersonPlus클래스에 매개변수(parameter)를 추가해야 하는경우, PersonPlus클래스에서 Person클래스의 method를 수정해야 하는 경우 아래와 같이 super를 사용함

PersonPlus에 third변수 추가, sum()/avg()에 third 적용

// ※Person클래스는 변화없음
class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first + this.second;
    }
}
class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second); // Person의 초기값세팅
        this.third = third; //PuersonPlus에서 추가할 변수 선언
    }
    sum(){
        return super.sum() + this.third; //super.method()를 통해 Person의 sum()가져와서 수정
    }
    
    avg(){
        return (super.sum() + this.third) / 3;
    }
}

※ Super를 사용하면 부모클래스 접근/수정이 용이해짐

Super

  1. super(), super.method() 차이
    super() : 부모class의 생성자(constructor)를 참조하여 초기값을 세팅함
    super.method() : 부모class의 method()를 참조/실행함
  2. super의 효용
    super()를 통해 초기값 세팅이 수월해짐, super.method()를 통해 부모class method에 접근가능
    → 자식class에서 매개변수를 추가해야 하는 경우
    : super()를 통해 부모class 생성자 세팅 후 추가로 변수 선언 가능
    → 자식class에서 부모class의 method를 수정해야 하는 경우
    : super.method()를 통해 method를 호출하여 접근/수정 가능
profile
keynene

0개의 댓글