rhanziy

JS - 객체, 배열의 객체지향 문법 상속기능 class 2 본문

Html_css_js

JS - 객체, 배열의 객체지향 문법 상속기능 class 2

rhanziy 2022. 12. 22. 16:18

ES6 문법으로 상속을 구현해보자.

extends의 출현!!!

부모 class의 constructor를 상속받아서 새로운 class를 생성하기.

       class 할아버지 {
            constructor(name){
                this.성 = 'Kim';
                this.이름 = name;
            }
            sayHi(){
                console.log('할아버지예요');
            }
        }

        var 할아버지1 = new 할아버지('만수');

        class 아버지 extends 할아버지 {
            constructor(name){
                super(name); // 부모 class의 constructor
                this.나이 = 50;
            }
            sayHi(){
                console.log('아버지예요');
                super.sayHi(); // 부모 class의 prototype
            }
        }

        var 아버지1 = new 아버지();

super(파라미터); 로 부모클래스의 생성자를 가져온당.

이전 글에서 생성자 밖에서 함수를 만들면 prototype에 저장된다고 했는데,

거기서도 부모클래스의 프로토타입 함수를 가져다 쓸 수 있다.

 

아버지1.sayHi(); 를 콘솔에 찍어보면

아버지 클래스의 sayHi() 이후 할아버지 클래스의 sayHi() 실행결과가 뜬다.

 

 

오 근데 저렇게 sayHi() 를 두 클래스에 작성하는건 너무 지저분해보인다.

실행한 클래스에 맞게 한곳에 기능구현을 하고싶으면은..

        class 할아버지 {
            constructor(name){
                this.성 = 'Kim';
                this.이름 = name;
            }
            sayHi(){
            	if(this instanceof 할아버지){
                	console.log('아버지예요');
                } else {
            		console.log('할아버지예요');
                }    
            }
        }

instanceof 연산자를 통해 할아버지 class에서 이렇게 구분해줄 수 있다.

A instaneof B. A가 B로부터 생성된 오브젝트인지 아닌지를 True/False로 알려줌.

 

Comments