JS：範圍內構造函數功能

我是OOP的新手，我試圖重寫一個簡單的JS函數作爲對象文字，然後作爲構造函數。我成功地編寫了對象文字版本，但是我在anon函數內部顯然有一個範圍問題，它處理onclick事件（在我的構造函數中）。請讓我知道如何使onclick事件工作。JS：範圍內構造函數功能

對象文本版本，它的工作原理：

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(); 
});

附：我知道我應該使用DOM API事件處理程序而不是HTML DOM。我一次只處理一件事。

來源

2011-04-22 svdsvd

你有沒有考慮過像dojo或jquery這樣的庫？它們簡化了面向對象編程，並通過基本的JavaScript提供改進的事件處理。 – ewh 2011-04-22 23:40:38

this你的函數內部不一定會和構造函數中的this一樣，它是由你如何調用該函數決定的。例如，如果您通過執行f()，然後this === window調用函數f，如果它是對象x.f()然後this === x的方法。另請參閱Function:call和Function:apply。

最簡單的方式來解決，這是具有在構造（像var me = this;）的局部變量，然後在內部函數使用me代替this，因爲這將不被覆蓋。

如果您想了解更多信息，請閱讀詞彙範圍和關閉。

來源

2011-04-22 23:28:00

美麗！謝謝。我會閱讀關於詞彙範圍和關閉的內容。 – svdsvd 2011-04-22 23:36:19

奇特的解釋：常量變量靜態解析，'this'動態解析:-) – 2011-04-22 23:44:42

謝謝！這很有幫助。我沒有接受過程序員的培訓，因此我現在將閱讀動態和靜態解析之間的區別。這是否意味着「this」使用動態範圍界限，或者動態範圍界定和動態解決事件是無關的？順便說一句，我讀了關於閉包（和詞彙範圍界定），因爲你的原始迴應，我終於明白什麼封閉做。 – svdsvd 2011-04-23 17:13:01

JS：範圍內構造函數功能

回答

相關問題