es3, es5, es6로 프로토타입 상속 구현하기

서재원 • Jul 13, 2016 • javascript

ecma스크립트의 버젼별 프로토타입 상속법 정리

ecma스크립트의 버젼별 프로토타입 상속법 정리
자바스크립트의 상속 메커니즘이 프로토타입 상속이라는 것에는 변함이 없지만,
버젼별로 추가된 문법요소가 조금씩 다릅니다.
레거시를 포용하기 위한 조치이긴 하겠지만..
다양한 코드 작성 스타일이 조금 혼란스럽군요.

es3의 경우

var Parent = function() {
	this.firstname = 'seo';
};

var Children = function() {
	this.position = '딸';
	Parent.call(this);
};

var me = new Children();

es5의 경우

var Parent = function() {
	this.firstname = 'seo';
};

var Children = function() {
	this.position = '딸';
};

Children.prototype = Object.create(Parent.prototype);

var me = new Children();

es6의 경우

class Parent {
	constructor() {
		this.firstname = 'seo'
	}
}

class Children extends Parent {
	constructor() {
		// 부모의 생성자 함수를 실행시키지 않으면, this 오브젝트가 생성되지 않으니 주의할것
		super();
		this.position = '딸';
	}
}

const me = new Children();

결론(나름)

이제 상속 정도는 언어 차원에서 지원해 주어야 하지 않겠습니까?
왠만하면 es6문법을 사용하는 것이..