Forms

어제 스터디에서 가장 압권은 this 의 정체랄까? 정말 10년 묵은 체증이 내려 가는 기분이었습니다. 정말로 10년전에 이런 내용을 고민 했었습니다. 그당시 나름 지금의 jQuery UI 같은 것을 구상 했었지요. 이름하야 Forms! 하지만 수준은 전혀 다른 세계 입니다. ㅎㅎ 뭐 여튼 그때는 어디 물어 볼 때도 없이 혼자 맨바닥에 해딩 하던 시절이라 어제 스터디를 하며 문득 그때가 떠올랐습니다. 그래서 소스를 찾아보니… 있다!!! 내 낡은 하드속의 폴더~

그때 당시에는 브라우저마다 Form 모양이 다르게 나오는게 너무 싫어서 만들었는데 지금보니 참 얼토당토 않네요. 요즘 같은 세상에 필요하신 분이 없겠지만 제 사료 아카이브를 위해 남겨 둡니다. ㅎㅎㅎ

Download

[button url=’/forms/forms.zip’ target=’_blank’ size=’large’]Forms 다운로드[/button]

– 어제의 복습 –

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

위는 10년전 코드입니다. formOpen 실행 시 this 가 다른 이유는 어제 배운 내용인데… 알들말듯 @,.@ 여튼 이 경우는 사실 프로토타입을 필요로 하지 않으므로 꼭 new 키워드로 생성 할 필요는 없습니다. 아래와 같이 해도 잘 작동합니다.

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

함수부와 데이터를 분리 할 수 있으니 데이터객체가 많은 경우 유용 할 수 있을 것 같습니다. 그럼 마지막으로 프로토타입을 이용하면 아래와 같습니다.

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

헉헉헉.. 제가 제대로 이해한건지 모르겠네요. ㅎㅎㅎ 여튼 쉽지는 않지만 알아가는 재미가 있네요.