[JavaScript] ES5/ES6 방식으로 구현하는 상속 기능

 

ES5 방식

prototype, this, class와 같은 방식 외에 ES5 출시 때 나온 Object.create()라는 문법이 있습니다.

 

상속을 이용해서 오브젝트를 만들고 싶다면 이 문법을 사용하면 쉽게 구현해낼 수 있습니다.

하지만 class문법에 밀려서 인지도는 낮습니다.

 

 

 

var Parent = { name : 'Kim', age : 50 };
var Child = Object.create(Parent); // es5에 나온 상속된 오브젝트 만드는 방법

console.log(Child.age); // 50

 

위 예제에서 child를 직접 호출하면 아무런 값도 가지고 있지 않습니다. 하지만, prototype은 parent가 되어있기에 prototype으로 사용할 수 있습니다.

 

 

 

Q. child의 age를 바꾸려면 어떻게 하는가?

 

var Parent = { name:'Kim', age:50 };
var Child = Object.create(Parent);

Child.age = 20; 

console.log(Child.age) // 20

 

child의 오브젝트에 age = 20 이라는 값을 부여해주면 자식의 값에 직접 데이터가 삽입되어 호출 시 prototype보다 먼저 호출되어 출력됩니다.

 

 

 

---

ES6 방식

ES6에는 class라는 문법이 있습니다.

constructor, prototype 을 이용한 상속기능을 만들 수 있게 도와주는 문법입니다. 

기존 function부터 시작하던 문법과 기능상 차이는 크게 없고 약간 더 보기쉽게 표현 해줍니다. 

 

class Parent {
    constructor(){
        this.name = 'Kim';
    }
}

var Child = new Parent();

 

 

 

Q. 상속 가능한 함수를 추가하는 방법은 어떻게 되는가?

 

// 방법 1
class Parent {
    constructor(){
        this.name = 'Kim';
        this.say = function(){console.log('hell')};
    }
}

var Child = new Parent();

// 방법 2
class Parent {
    constructor(){
        this.name = 'Kim';
    }
    say(){
        console.log('hell')
    };
}

var Child = new Parent();

 

위 코드에서 방법 1은 직접 값을 넣기를 원할 때 사용되며, 방법2는 prototype에 추가되는 방식이다.

 

 

 

 

Q. 자식에서 부모의 prototype을 볼 수 있는 방법

var Child = new Parent();

Child.__proto__; // 방법1
Object.getPrototypeOf(Child); // 방법2