ES5, ES6 상속 (객체 지향 3)

상속을 사용하는 객체지향 문법은 Object를 여러 개 만들어야 하는 경우에 사용한다. 물론 다른 이유도 있다. 그건 여러가지 개념들을 공부하면서 알게 될 것 같다. 앞선 글에서 설명한 prototype에 직접 지정하는 방식은 구 문법이다. ES5, ES6 문법에서는 새로운 방법으로 상속을 사용한다.

 

1. ES5 상속

 

var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모);
자식.age = 20; // 자식에 key 값을 추가한다. -> 50이 아닌 20을 우선 출력한다.

var 손자 = Object.create(자식); // 자식의 상속
// 손자.name = 'Kim' (부모인 '자식'의 prototype)
// 손자.age = 20 (부모인 '자식'의 prototype)

• ES5에서 부모의 상속을 받기 위해선 `Object.create()`를 사용하면 된다. ( ) 안에는 상속하는 부모의 오브젝트가 들어간다. 위 예시에서는 자식이라는 변수가 부모 오브젝트를 상속받으므로 Object.create(부모)이다.
• 물론 자식의 부모 prototype을 설정한 것이므로 실제 자식에는 name과 age가 들어있지 않다. 그러나 자식.name이나 자식.age가 출력되는건 자바스크립트가 부모의 prototype을 찾아서 출력한 것이다.
  • 자식의 age를 설정할 경우 부모의 50이 아닌 20이 출력되는 걸 확인할 수 있다. 이는 자식 변수에 age 속성을 추가한 것인데, 자바스크립트가 자식에게 있는 age 값을 먼저 찾기 때문이다.
• 마찬가지로 자식 또한 다른 이에게 상속을 할 수 있다. 여기서도 Object.create()를 사용한다.
  • 손자의 경우 name과 age는 부모인 '자식'의 prototype을 출력한 것이다.

2. ES6 상속 - Constructor(생성자) 이용

// ES6 상속 - Class , Constructor 만드는 신문법, 자바의 객체지향과 비슷
    // 객체지향 문법 : 1. object 여러개 만들어 쓰고 싶을 때
    class 부모 {
        constructor(이름){
            this.name = 이름;
            this.sayHi = function(){ console.log('hello')} // 1. 생성자에 작성하면 물려받는 자식들이 다 이 함수를 기본적으로 갖게됨.
        }
        sayHi(){
            console.log('hi'); // 2. prototype에 저장됨. 자식들이 다 갖고 있지는 않지만 내장함수로서 공유하여 사용 가능. 자식마다 구별되는 속성 값이 아닌 함수 같은건 prototype에 넣는게 좋은 것 같음. 관리도 편할듯!
        }
        sayHello(){
            console.log('hello');
        }
    }

• ES5의 상속은 생성자를 사용하여 만든 것이 아니다. ES6에서는 직접 class를 만들어 생성자를 정의할 수 있다. 마치 자바의 객체지향과 유사한 형태이다. 클래스 안에는 생성자와 prototype에 저장할 수 있는 공간이 있다. 생성자에는 파라미터를 입력받아 전달할 수 있으며, this를 사용한다.
  • 생성자에 변수나 함수를 작성할 경우 이를 통해 생성되는 자식(인스턴스)은 그 값을 모두 갖게 된다.
  • 생성자 밖에 변수나 함수를 작성할 경우 이는 부모의 prototype에 할당된 것이기에 자식에게는 주어지지 않는다.
    • 다만 자식들이 공유해서 사용할 수 있는 공간으로 함수일 경우 일종의 내장함수로 사용할 수 있다. (관리에 편함) 자식들이 공용으로 사용할 수 있는 함수가 있다면 굳이 한명 한명에게 함수를 저장시킬 필요는 없을 것 같다.

부모.prototype.sayHello = function(){
        // 함수 수정 가능
    }

var 자식 = new 부모(); // 상속 구현
// 자식.__proto__ = 부모.prototype {constructor: f, sayHi: f}
Object.getPrototypeOf(자식); // 자식의 부모 prototype을 출력

• prototype에 함수를 만든 경우 prototype을 통해 얼마든지 수정이 가능하다.
• 자식을 만드는 경우 new 를 통해 만들며, 새로운 오브젝트를 생성하는 기존의 방법과 동일하다.
• 자식의 __proto__ 값은 부모의 프로토타입을 가리키며 이는 위에서 정의한 생성자와 prototype 함수가 출력된다.
• Object의 getPrototypeOf( )을 사용하면 마찬가지로 부모의 prototype을 확인할 수 있다. (자식.__proto__와 같음. 다만 함수에 대한 설명이 잘 드러나있음.)

 

자료 출처 : https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!