JS : 스코프 내부 생성자 함수

Question

저는 OOP에 익숙하지 않고 간단한 JS 함수를 개체 리터럴로 다시 작성하려고 시도하고 있으며 생성자 함수로 다시 작성하려고합니다. 나는 리터럴 버전의 객체를 작성하는데 성공했지만, (생성자 함수 내에서) onclick 이벤트를 처리하는 anon 함수 내에서 범위 문제가 발생했습니다. onclick 이벤트를 작동시키는 방법을 알려주십시오.

WORKS

객체 리터럴 버전 :

var submit = { 
    form_id : "", 
    submit_button_id : "", 
    submit_form: function(){ 
     var button = document.getElementById(submit.submit_button_id); 
     var form = document.getElementById(submit.form_id);  
     button.onclick = function(){ 
      form.submit(); 
      return false; 
     } 
    } 
} 

addLoadEvent(function(){ 
    submit.form_id = "form_vars"; 
    submit.submit_button_id = "but_submit"; 
    submit.submit_form(); 
}); 

생성자 함수 버전 어떤이 작동하지 않습니다

function SubmitForm(button_id, form_id){ 
    this.submit_button = document.getElementById(button_id); 
    this.form = document.getElementById(form_id); 
    this.submit_form = function(){ 
     // problem function below 
     this.submit_button.onclick = function(){ 
      this.form.submit(); 
     } 
    } 
} 

addLoadEvent(function(){ 
    var form_to_submit = new SubmitForm("but_submit", "form_vars"); 
    form_to_submit.submit_form(); 
}); 

P.S. 나는 HTML-DOM 대신에 DOM API 이벤트 핸들러를 사용해야한다는 것을 알고있다. 나는 한 번에 한 가지만 다루고 있습니다.

Answer 1

this은 생성자에서 this과 반드시 ​​같을 필요는 없지만 해당 함수를 호출하는 방법에 따라 결정됩니다. 예를 들어 f()을 수행하여 f 함수를 호출 한 경우 x.f()의 메소드 인 경우 인 경우 this === x입니다. Function:call 및 Function:apply도 참조하십시오. 즉 무시되지 않기 때문에이 문제를 해결하기

가장 간단한 방법은, (같은 var me = this;) 생성자 로컬 변수를 다음 내부 함수 me 대신 this을 사용하는 것이다.

자세히 알아 보려면 어휘 범위 및 클로저를 읽으십시오.