proto?

이 문법을 사용하여 손쉽게 상속을 받는 방법도 있다. 아래 소스코드를 참고해보면, subObj 객체에다가 suberObj 객체를 대입하는 것이다. 이는 상속한 것과 결과가 같으며 아래 subObj 에서 superVal 을 접근하여 출력하는 것을 보면 쉽게 파악할 수 있다.

소스코드

let superObj = {superVal:'super'};
let subObj = {subVal : 'sub'};
subObj.__proto__ = superObj;        // subObj가 superObj의 자식임을 선언
console.log('subObj.subVal => ', subObj.subVal);
console.log('subObj.superVal => ', subObj.superVal);

// 변경을 시도하지만 아래 코드는 객체를 바꾼게 아님
subObj.superVal = 'sub';
console.log('superObj.superVal => ', superObj.superVal);  // superObj.superVal => super

Object.create()?

proto 를 대체할 수 있는 객체이다. proto 문법보단 훨씬 직관적이고 작성하기도 편하므로 권장되는 방법이다.

소스 코드

let superObj = {superVal:'super'};
// let subObj = {subVal : 'sub'};
// subObj.__proto__ = superObj;        // subObj가 superObj의 자식임을 선언
let subObj = Object.create(superObj);       // __proto__ 보다 object.create가 더 좋음
subObj.subVal='sub';
console.log('subObj.subVal => ', subObj.subVal);
console.log('subObj.superVal => ', subObj.superVal);

// 변경을 시도하지만 아래 코드는 객체를 바꾼게 아님
subObj.superVal = 'sub';
console.log('superObj.superVal => ', superObj.superVal);  // superObj.superVal => super

두 문법은 같은 의미를 가진다. 하지만 본문에 작성했듯이 Object.create() 를 이용하는 것이 좋을 듯 싶다.

참고

JavaScript 객체 지향 프로그래밍