모듈패턴 Ⅰ
Javascript 2012. 1. 28. 17:18
이번 포스트 부터는 자바스크립트에서의 모듈패턴에 대해 알아 보도록 하겠습니다.
우선 생성자 함수 모듈패턴의 기본 구조인 "객체 생성"과 관련된 내용에 대해서는 이전 포스트를 참고 하시길 바랍니다.
이번 포스트에서는 모듈패턴에 관한 내용만 설명해 드리도록 하겠습니다.
먼저 생성자 함수를 사용하여 객체를 생성하면 인스턴스 맴버 와 프로토타입 맴버라는 그룹을
가지게 됩니다.
먼저 인스턴스 맴버에 대해 설명하면, 기본 구조는 생성된 빈 객체(this)에 포함되는 맴버 그룹이며, 각 객체 생성 시마다 새로운 맴버그룹이 생성(맴버 초기화)됩니다.
프로토타입 맴버는 함수객체 속성인 "prototype" 객체속성을 사용하여 생성할 수 있는 맴버 그룹이며, 인스턴스 맴버와는 달리 함수 생성 시에만 생성(맴버 초기화)됩니다.
이와 같은 이유로 인스턴스는 맴버는 각 객체에 종속된 맴버를 가져야 할 때 사용되며, 프로토타입 맴버는 그 종속된 맴버들을 재 사용하기 위한 메소드들을 포함합니다.
또한, 이렇게 작성하는 것이 모듈패턴에 대한 최적화 문법이기도 합니다.
-
function constructor_fn()
-
{
-
this.instance_memeber1 = 'instance_memeber1';
-
this.instance_memeber2 = 'instance_memeber2';
-
};
-
-
constructor_fn.prototype.prototype_memeber1 = function()
-
{
-
return this.instance_memeber1;
-
};
-
-
constructor_fn.prototype.prototype_memeber2 = function()
-
{
-
// 함수 내부의 "this" 는 자신을 호출한 객체가 되며, 또 객체로 인한 호출이 아닌 경우 window 전역객체가 된다.
-
-
// 여기서 "this"는 "constructor_fn.prototype" 객체속성이 된다.
-
if (this === constructor_fn.prototype){
-
return 'constructor_fn.prototype';
-
// true
-
};
-
-
// 여기서 "this"는 "constructor_fn.prototype" 객체속성이 된다.
-
if (this === obj){
-
return this.instance_memeber2;
-
};
-
};
-
-
// constructor_fn.prototype 객체 속성으로 호출한다.
-
alert(constructor_fn.prototype.prototype_memeber2()); // constructor_fn.prototype
-
-
-
var obj = new constructor_fn();
-
// 객체의 인스턴스 맴버에 접근한다.
-
alert(obj.instance_memeber1); // instance_memeber1
-
// 객체의 프로토타입 맴버에 접근한다.
-
alert(obj.prototype_memeber2()); // instance_memeber2
-
-
-
// 즉시 실행 함수 패턴을 응용한 생성자 함수 모듈패턴
-
// 일단은 이런식의 구현이 가능하다는 것만 알아두도록 하자!!!
-
var constructor_fn = (function(doc, win){
-
return (function()
-
{
-
function init(){
-
this.instance_memeber1 = 'instance_memeber1';
-
this.instance_memeber2 = 'instance_memeber2';
-
};
-
-
init.prototype = {
-
prototype_memeber1: function(){
-
return this.instance_memeber1;
-
},
-
prototype_memeber2: function(){
-
return this.instance_memeber2;
-
}
-
};
-
-
return new init();
-
})();
-
})(document, window);
-
-
alert(constructor_fn.prototype_memeber1()); // instance_memeber1
-
alert(constructor_fn.prototype_memeber2()); // instance_memeber2
