클래스, super, 오버라이딩

const Jedi = function(name, age){
 this.name = name;
 this.age = age;
 this.isJedi = true;
this.force = ()=>{console.log('may the force be with you')};
};


const Anakin = new Jedi('Anakin', 30);
console.log(Anakin)

class Sith {
    constructor(name, age){
        this.name = name;
        this.age = age;
        this.isJedi = false;
        
    }
    force(){
        console.log('may the force serve you')
    };
}

const DarthVader = new Sith('DarthVader', 40)
console.log(DarthVader);

차이점. 클래스로 메소드 force를 만든 Sith의 경우, 메소드가  prototype의 함수로 들어갔다.

즉, 상속이 가능할 것이다.

그러나 Jedi처럼 함수 표현식으로 한 경우는 메서드가 prototype에 기입되지 않았다.

 

Jedi.prototype.force = function(){console.log('may the force be with you')};

물론 prototype에 직접 넣어주면 된다.

 

---

class Apprentice extends Sith {
//생성자를 쓰지 않으면 아래의 내용이 사실 생략된 채로 들어가 있는 셈이다.
//constructor(...args){
//   super(...args);
//  };
//
    constructor(name, age, kind){
        super(name, age);
        this.kind = kind;
    }
    lightSaber(){
        console.log('red')
    };
    force(){
        super.force(); 
        console.log("yes, master...") // aka OverRide
    }
};
const sith1 = new Apprentice('sith1', 10, 'human');
console.log(sith1);

sith1.lightSaber(); // red
console.log(sith1.isJedi) // false
sith1.force(); //may the force serve you
                //yes, master...

 

클래스 상속을 할 때는 extends 를 쓴다.

상속한 클래스를 정의할 때, super는 부모 클래스의 프로퍼티에 접근하는 키워드이다.

 

위 예제의 경우, ightSaber라는 새로운 함수와 kind 라는 새로운 속성을 추가했다. 

그런데, 새로운 함수 추가는 마음대로 할 수 있지만 속성은 그렇지 않다.

생성자 안에서 super 없이 속성을 추가하고자 하면 이런 에러가 나온다.

 

this(지금의 자식 클래스)로 뭘 하려하기 전에 super로 부모 클래스의 생성자를 호출해야 한다.

 

그러나 메서드의 경우는 양상이 조금 다르다.

super를 부르지 않고, 부모 클래스에 있던 메서드를 새롭게 덮어쓸 수도 있다.

class Apprentice extends Sith {
//생성자를 쓰지 않으면 아래의 내용이 사실 생략된 채로 들어가 있는 셈이다.
//constructor(...args){
//   super(...args);
//  };
//
    constructor(name, age, kind){
        super(name, age);
        this.kind = kind;
    }
    lightSaber(){
        console.log('red')
    };
    force(){
        console.log("Die, master...") // aka OverRide
    }
};
const sith1 = new Apprentice('sith1', 10, 'human');
console.log(sith1);

sith1.lightSaber(); // red
console.log(sith1.isJedi) // false
sith1.force();  //Die, master...

Sith 클래스의 함수 force를 

자식 class인 Apprentice에서 새롭게 덮어씌웠다. 

흔히 Java 에서 오버라이딩이라고 표현하던 방식이다.

하여튼 역시 시스는 제자와 스승이 서로 죽이는 관계인 모양이다.

 

 

물론, super를 활용할 수도 있다.

class Sith {
    constructor(name, age){
        this.name = name;
        this.age = age;
        this.isJedi = false;
        
    }
    force(){
        console.log('may the force serve you')
    };
}

const DarthVader = new Sith('DarthVader', 40)
console.log(DarthVader);


class Apprentice extends Sith {
//생성자를 쓰지 않으면 아래의 내용이 사실 생략된 채로 들어가 있는 셈이다.
//constructor(...args){
//   super(...args);
//  };
//
    constructor(name, age, kind){
        super(name, age);
        this.kind = kind;
    }
    lightSaber(){
        console.log('red')
    };
    force(){
        super.force(); 
        console.log("yes, master...") // aka OverRide
    }
};
const sith1 = new Apprentice('sith1', 10, 'human');
console.log(sith1);

sith1.lightSaber(); // red
console.log(sith1.isJedi) // false
sith1.force(); //may the force serve you
                //yes, master...

force 메서드에 대해, super로 부모 클래스의 기능을 불러온 이후 자신의 기능을 추가한 셈이다.

역시 음흉한 시스답게 대사가 순종적인 뉘앙스로 바뀌었다.

 

super의 경우, 함수가 길어질 수록 매우 요긴할 수 있다.

부모 클래스에서 썼던 코드를 그대로 불러오는 셈이기 때문이다.