어제 스터디에서 가장 압권은 this 의 정체랄까? 정말 10년 묵은 체증이 내려 가는 기분이었습니다. 정말로 10년전에 이런 내용을 고민 했었습니다. 그당시 나름 지금의 jQuery UI 같은 것을 구상 했었지요. 이름하야 Forms! 하지만 수준은 전혀 다른 세계 입니다. ㅎㅎ 뭐 여튼 그때는 어디 물어 볼 때도 없이 혼자 맨바닥에 해딩 하던 시절이라 어제 스터디를 하며 문득 그때가 떠올랐습니다. 그래서 소스를 찾아보니… 있다!!! 내 낡은 하드속의 폴더~
그때 당시에는 브라우저마다 Form 모양이 다르게 나오는게 너무 싫어서 만들었는데 지금보니 참 얼토당토 않네요. 요즘 같은 세상에 필요하신 분이 없겠지만 제 사료 아카이브를 위해 남겨 둡니다. ㅎㅎㅎ
Download
[button url=’/forms/forms.zip’ target=’_blank’ size=’large’]Forms 다운로드[/button]
– 어제의 복습 –
[js]
function Forms(i){
this.id = i;
this.formOpen = formOpen; // 호이스팅
}
function formOpen(){
console.log(this.id);
}
var f=new Forms(1);
f.formOpen(); // 1
formOpen(); //.
formOpen.call(f); //1
[/js]
위는 10년전 코드입니다. formOpen 실행 시 this 가 다른 이유는 어제 배운 내용인데… 알들말듯 @,.@ 여튼 이 경우는 사실 프로토타입을 필요로 하지 않으므로 꼭 new 키워드로 생성 할 필요는 없습니다. 아래와 같이 해도 잘 작동합니다.
[js]
Forms ={
"formOpen":formOpen
}
function formOpen(){
console.log(this.id);
}
f1 = {"id":1};
f2 = {"id":2};
Forms.formOpen.call(f1); // 1
Forms.formOpen.call(f2); // 2
[/js]
함수부와 데이터를 분리 할 수 있으니 데이터객체가 많은 경우 유용 할 수 있을 것 같습니다. 그럼 마지막으로 프로토타입을 이용하면 아래와 같습니다.
[js]
function AbstractForms(){};
AbstractForms.prototype = {
formOpen:function(){
console.log(this.id);
}
};
function Forms(){};
Forms.prototype = new AbstractForms;
forms = new Forms; // 프로토타입체인을 위해 반드시 new 를 사용해야 한다.
f1 = {"id":1};
forms.formOpen.call(f1); // 1
[/js]
헉헉헉.. 제가 제대로 이해한건지 모르겠네요. ㅎㅎㅎ 여튼 쉽지는 않지만 알아가는 재미가 있네요.