[Javascript, NodeJS] 모듈(Class) 과 상속 (Inheritance) 구현하기 : 생성자, 함수 오버라이딩 포함 Javascript

<시작하기전에..>

NodeJS를 사용하면서 자바스크립트로 OOP를 하고싶은가?

Java 와 같은 객체지향 언어로의 프로그래밍에 익숙한 개발자들은 javascript를 처음 접했을때,
너무나 Java에서는 당연하고 쉽기만 했던 모듈화와 상속이 왜이렇게 까다로운건지 싶을 수 있다.

자, 이 포스팅에서는 당신에게 그것에 해결책을 제시해주고자 한다.

하지만 일에도 순서가 있는법!!!

지금부터 설명하고자 하는 코드를 복.붙. 하여 분명 모듈과 상속을 구현할수는 있을것이나,
왜 이렇게 코딩해야하는지 이해하기 위해 당신이 이미 알고있어야 하는 기본지식들이 있으니,
잠시 그 리스트를 한번 살펴보자.

- 자바스크립트의 Object와 프로토타입 
- 자바스크립트의 apply 와 call 
- module.exports 와 require

※ 관련 내용을 공부하고 싶으시면 맨 아래의 Reference 페이지를 참고 or 직접 검색 ^^ ※

자 위의 것들은 기본중의 기본이므로 반.드.시. 숙지하고 다음 내용을 살펴보길 권한다.

<모듈화, 상속, Override 예제 코드>

다음의 예제는 Duck 이라는 부모모듈이 존재할때,
MallardDuck, RedDuck이라는 자식모듈을 Duck의 Prototype을 이용하여 상속받아 제작하여,

main.js 에서 사용하는 예제코드이다.

========================================================================
Duck.js - 부모 모듈

- Constructor 에서 name 과 nums 를 입력받도록 해두었으며,
- public method 3개를 만들어 두었다.

// 부모클래스
var Duck = function( name, nums ){
this.name = name;
this.nums = nums; // 배열
};

Duck.prototype = {
swim : function() {
console.log("swim!!");
},
getName : function(){
return this.name;
},
getNumList : function(){
return this.nums;
}
};

module.exports = Duck;
========================================================================
RedDuck.js - 자식모듈 1

- Duck에서와 같이 Constructor 에서 name 과 nums 를 입력받도록 해두었으며,
- 그 인자값들을 Duck 생성자로 넘기기 위해 call()를 사용하였다
var Duck = require('./Duck');

var RedDuck = function(name, nums){
Duck.call( this, name, nums );
};


RedDuck.prototype = new Duck();
RedDuck.prototype.constructor = RedDuck;

module.exports = RedDuck;
========================================================================
MallardDuck.js - 자식모듈 2

- 역시, Duck에서와 같이 Constructor 에서 name 과 nums 를 입력받도록 해두었으며,
- 그 인자값들을 Duck 생성자로 넘기기 위해 apply()를 사용하였다
- argument 는 해당 함수의 인자값이 자동으로 Object로 매핑되는 built-in 변수이다. 이것을 apply()에 이용할 수 있다.
- 함수 swim() 을 override 하였다.

var Duck = require('./Duck');

var MallardDuck = function(name, nums){
console.log(arguments);
Duck.apply( this, arguments );
};

MallardDuck.prototype = new Duck();
// 함수 Override
MallardDuck.prototype.swim = function () {
console.log("MallardDuck swim!!!")
};

MallardDuck.prototype.constructor = MallardDuck;

module.exports = MallardDuck;
========================================================================
main.js - 제작한 모듈을 사용해보자.

- 지금까지 제작한 모든 파일들은 같은 폴더안에 존재한다.
- main.js를 다 만들고 나면, node main.js 로 파일을 실행시켜보자.
var Duck = require('./Duck');

var RedDuck = require('./RedDuck');
var MallardDuck = require('./MallardDuck');

var a = new MallardDuck("mallard",[1,1,1]);

a.swim();
console.log(a.getName());
console.log(a.getNumList());


var b = new RedDuck("red",[2,2,2]);

b.swim();
console.log(b.getName());
console.log(b.getNumList());
========================================================================
어떤가? 어느정도 이해가 되었는가?

사실 나도 원래는 Java 개발을 주로 하던 개발자로서 Javascript 의 언어적 속성에 의한 OOP 개발형식이 매우낯설었다.

하지만, 뭐.. 원래 프로그래밍이 다 이런걸 .. 어쩌겟누... ㅋㅋ

그 누군가에게는 도움이 되셨길 바라며... 이만 포스팅을 끝낸다. 질문은 댓글로... ! ㅎ
========================================================================

<Reference>

call() 과 apply()

require과 module.exports

JS prototype

JS 상속



통계 위젯 (블랙)

1736
564
182770

GoogleAdsenseResponsive

Cluster map