[Javascript ES6] 기초 문법 9-2. <JS의 상속> - prototype 을 class로 만들기

 

 

Class

 

자바와 같은 객체 지향 언어처럼, class 키워드를 사용하여 부모-자식간의 상속을 만들어 줄 수 있다. 

class 부모이름 {  constructor() { } } 의 형식으로 사용하며, 오직 constructor() { 이곳에 작성한 내용들만 } 자식에게 상속된다. 자식은 new 키워드를 사용하여 부모를 호출해 상속받는다. 이 때 전달된 파라미터는  constructor(파라미터) 의 '파라미터'에서 전달받아 사용할 수 있다.

 

또한 자식의 프로토타입을 알아내기 위해 자식.__proto__ 와 같은 역할을 수행하는, Object.getPrototypeOf(자식) 을 사용할 수도 있다.

<script>  

    class mother {
        constructor(파라미터) {
            this.cat = "chali"
            this.params = 파라미터
            this.sayHi = function() {
                console.log('hello')
            }
        }
        protoFunction() {
            console.log('오직 부모의 프로토타입일 뿐, 상속되지는 않습니다.')
        }
    }

    let me = new mother('파라미터 전송')
    console.log('me :',me)

    console.log('me.__proto__ : ',me.__proto__, 'Object.getPrototypeOf(me):',Object.getPrototypeOf(me))


</script>

 

extends 를 통해 기존에 만든 class를, 다른 class에 상속해 줄 수 있다. class 자식 extends 부모 { constructor() {...} } 의 형태로 사용한다.

super은 'extends를 통해 물려받은 부모가 가지고 있는 constructor' 을 가리킨다.

<script>  

    class 조상님 {
        constructor(성씨) {
            this.성 = 성씨
            this.고양이 = 'chali'
        }
    }

    class 엄마 extends 조상님 {
        constructor(성씨) {
            // super() == 물려받는 class의 constructor 이라는 뜻
            super(성씨)
            this.성별 = '여자'
        }
    }

    let 어머니 = new 엄마('김');
    console.log(어머니)

</script>

 

또한 super에는 다른 용도가 있다. 만일 super가 부모를 물려받은 자식의 constructor 속에서 사용되었다면, 상속받은 부모 class의 constructor를 의미한다.

그러나 super이 자식 constructor의 바깥에서 사용되었을 때에는, 부모 class가 가진 prototype을 의미한다.

<script>  

    class 조상님 {
        constructor(성씨) {
            this.성 = 성씨
            this.고양이 = 'chali'
        }
        함수() {
            console.log('조상님의 프로토타입')
        }
    }

    class 엄마 extends 조상님 {
        constructor(성씨) {
            // constructor 안에서 호출된 super은
            // 물려받는 class의 constructor 이라는 뜻이다.
            // 따라서 조상님의 constructor를 가리킨다.
            super(성씨)
            super.함수()
            this.성별 = '여자'
        }
        함수() {
            console.log('엄마가 가진 함수');
            // 조상님이 가진 프로토타입의 함수()를 가리킨다.
            // 즉, 조상님.prototype.함수() = super.함수()
            super.함수()
        }
    }

    let 어머니 = new 엄마('김');
    console.log(어머니)
    console.log(어머니.함수())

</script>