[Following Life-Coding] JavaScript OOP_09. Class Inheritance

JavaScript Object-Oriented Programming

Life-Coding class Link: https://opentutorials.org/module/4047/24619 

 

Class Inheritance - JavaScript Object-Oriented Programming

Class intro: introduces how to create a subclass by inheriting a class in JavaScript.  Lecture code: class.js (changes)  class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum(){ return this.first+this.second; } } class PersonPlus extends Pers

opentutorials.org

 

09. Class Inheritance inheritance

1. Understanding the learning goal 

1-1) When modifying existing code or adding new features

Doing add/delete/modify directly inside the object can cause various problems —  the feature works, but maintenance is inconvenient.

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());   

Result)

 

1-2) Creating a new class with maintainability in mind 

Making a new class avoids collisions with the old code, so there's no maintenance issue — but duplicated code increases. 

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());   

Result — same as above 

 

2. Solution: resolving both issues via inheritance 

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());  

Result — same as above 

 

3. Thinking about it once more

egoing's question 1. What's inconvenient without inheritance? 

-> my answer : When maintaining previously written code by directly modifying/deleting the old code, various follow-up issues can arise. If you avoid this by generating individual classes over and over, duplicate code that performs the same function increases, which can lower code efficiency.

 

egoing's question 2. When inheriting, how do you create the child class?

-> my answer : For the class that will inherit, write new variables or functions, and after the class name add "extends" and the name of the target class. What if identical variables or functions exist? Probably covered in a later class, I'd guess... ^^