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：范围内构造函数功能

回答

相关问题