[생활코딩 따라가기] javascript 객체 지향 프로그래밍_09. class 상속

javascript 객체 지향 프로그래밍

생코 수업 Link : https://opentutorials.org/module/4047/24619 

class 상속 - JavaScript 객체 지향 프로그래밍

 

09. class 상속 inheritance

1. 학습 목표 이해하기 

1-1) 기존의 코드를 수정하거나 새로운 기능을 추가하는 경우

해당 객체 내부에서 직접 추가/삭제/수정을 하는 경우 다양한 문제들을 발생 시킬 수 있어  기능은 동작하지만 유지보수가 불편할 수 있다.

inheritance.js) 

class Person{
    constructor(name,first,second){
        this.name = name,
        this.first = first,
        this.second = second
    }
    sum(){    
        return " 합계 : "+(this.first+this.second); 
    }
    arg(){  // 추가된 기능
        return " 평균 : "+(this.first+this.second)/2;
    }
}

var kim = new Person('kim',10,20);

console.log(kim.name, " 's sum : ",kim.sum());   
console.log(kim.name, " 's sum : ",kim.arg());   

실행 결과)

 

1-2) 유지보수를 고려해 새로운 클래스 생성 

새로운 클래스를 만들어 이전 코드와의 충돌을 미연에 방지함으로써 유지보수에는 문제가 없지만 중복된 코드가 많아졌다. 

inheritance.js) 

class Person{
    constructor(name,first,second){
        this.name = name,
        this.first = first,
        this.second = second
    }
    sum(){    
        return " 합계 : "+(this.first+this.second); 
    }
    // arg(){  // 이슈1. 유지 보수 불편 
    //     return " 평균 : "+(this.first+this.second)/2;
    // }
}

// 이슈1. 해결 방안: 유지보수를 위해 새로운 class 선언  
class PersonPlus{  // 새로운 이슈2. 중복발생 
    constructor(name,first,second){
        this.name = name,
        this.first = first,
        this.second = second
    }
    sum(){    
        return " 합계 : "+(this.first+this.second); 
    }
    arg(){  
        return " 평균 : "+(this.first+this.second)/2;
    }
}

var kim = new PersonPlus('kim',10,20);

console.log(kim.name, " 's sum : ",kim.sum());   
console.log(kim.name, " 's arg : ",kim.arg());   

실행 결과) - 상동 

 

2. 해결, 상속을 통해 위 두가지 이슈를 해결 

inheritance.js) 

class Person{
    constructor(name,first,second){
        this.name = name,
        this.first = first,
        this.second = second
    }
    sum(){    
        return " 합계 : "+(this.first+this.second); 
    }
}

// 이슈1,2. 해결 방안:상속
class PersonPlus extends Person{  
    arg(){  
        return " 평균 : "+(this.first+this.second)/2;
    }
}

var kim = new PersonPlus('kim',10,20);

console.log(kim.name, " 's sum : ",kim.sum());   
console.log(kim.name, " 's arg : ",kim.arg());  

실행 결과) - 상동 

 

3. 한번 더 생각해보기

egoing의 질문1. 상속이 없으면 무엇이 불편하나요 

-> my : 기 작성된 코드를 수정하는 등의 유지보수를 하는 과정에서 이전 코드를 직접 수정/삭제하는 경우 다양한 후속 이슈를 발생시킬 수 있다. 이를 방지하기 위해 개별 클래스들을 계속해서 생성하는 경우 동일한 기능을 수행하는 코드들의 중복이 증가하여 코드의 효율성?이 낮아질 수 있다.

 

egoing의 질문2. 상속을 하는 경우, 자식 클래스는 어떻게 만들면 되나요

-> my : 상속받을 예정인 클래스에 없는 새로운 변수 또는 함수를 작성한 클래스의 이름 뒤에 extends 대상클래스의 이름을 추가한다. 만약 동일한 변수 또는 함수가 있으면? 아마 뒤 수업에 있지 않을까? 한다...^^