[Following Life Coding] JavaScript Object-Oriented Programming _10. super

JavaScript Object-Oriented Programming

Life Coding class link: https://opentutorials.org/module/4047/24620 

10. super

1. Understanding the learning goal 

In the code below, for a line like ' var kim = new PersonPlus('kim',10,20,30); ' — what if we want to modify a feature that only the parent has?

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{  
    arg(){  
        return " 평균 : "+(this.first+this.second)/2;
    }
}

var kim = new PersonPlus('kim',10,20,30); // 상속받은 클래스에 있는 생성자에 인자를 추가하고 싶은 경우 

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

2. Looking for a solution

2-1) The easiest? most primitive solution

Just add and modify the constructor on the child class the same way. But if you do that, you end up with the same situation as before — as if you hadn't inherited at all. 

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){
        this.name = name,
        this.first = first,
        this.second = second,
        this.third = third
    }

    sum(){    
        return " 합계 : "+(this.first+this.second+this.third); 
    }
    arg(){  
        return " 평균 : "+(this.first+this.second+this.third)/3;
    }
}

var kim = new PersonPlus('kim',10,20,30); // 상속받은 클래스에 있는 생성자에 인자를 추가하고 싶은 경우 

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

FYI) The code above doesn't run. The error message is:

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor.

Since I'm not great at English, my rough read of this is: before the derived class's own constructor touches this or returns, you must call the parent's constructor — super — first. That's the feeling the message gives off. 

FYI X2) There's a similar topic in Java, so I'm leaving a link.

http://blog.naver.com/PostView.nhn?blogId=dho113&logNo=220569294749&parentCategoryNo=29&categoryNo=&viewDate=&isShowPopularPosts=true&from=search

2-2) A more fundamental solution

super.js)

Through the super method, you can pull in properties from the inherited parent class. This lets you minimize code duplication in the new class.

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), //super(인자들) = 부모 클래스의 constructor(인자들)
        this.third = third
    }

    sum(){    
        return " 합계 : "+(this.first+this.second+this.third);  
        //super.sum()을 쓰지않고 직접 기입한 예 
    }
    arg(){  
        return " 평균 : "+(super.sum()+this.third)/3;
        //super.sum() = 부모 클래스가 보유한 메서드 호출한 예 
        // * super.sum = 부모 클래스가 보유한 메서드 내용을 그대로 출력
    }
}

var kim = new PersonPlus('kim',10,20,30); // 상속받은 클래스에 있는 생성자에 인자를 추가하고 싶은 경우 

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

Run result:

 3. Thinking it through once more

Egoing's Question 1. The two uses of super — what's the difference between having () and not? 

-> my answer : 1) super() plays the same role as the parent class's constructor. So if the parent's constructor takes arguments a and b, you can write it as super(a,b). 2) super feels like "the parent class's version of this."  For example, if this is "my," then I think super can be read as "his/her/their." So in this example, super.sum() would mean the parent's sum() method — roughly, "their sum()."

Egoing's Question 2. What makes super convenient (i.e., how does it fix the downsides of inheritance)?

-> my answer : It's used when you inherit a parent's properties but can't just use them as-is — you need to modify part of them. Without super, even if 9 out of 10 properties are the same and only 1 is different, you'd have to recreate all 10. Kind of like: if you add your child to your father's driver insurance, it costs only a little extra... but if the child signs up fresh on their own, the cost is huge. ㅋㅋㅋ 

By the way, in this case you can't use extends. You'll hit the Must call super constructor in derived class error. It seems to be because, when you extend, the parent's constructor is called first. In other words, you end up in a situation that's effectively just declaring a new class.