Question

我是OOP的新手，我正在尝试将一个简单的JS函数重写为对象文字，然后作为构造函数。我成功地编写了对象文字版本，但我在anon函数中明显有一个范围问题，它处理onclick事件（在我的构造函数中）。请让我知道如何使onclick事件发挥作用。

对象文字版本有效：

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。我知道我应该使用DOM API事件处理程序而不是HTML-DOM。我一次只处理一件事。

Answer 1

函数内的

this不一定与构造函数中的this相同，它取决于你如何调用该函数。例如，如果您通过f调用函数f()，然后调用this === window，如果它是对象x.f()上的方法，则this === x。另请参阅Function:call和Function:apply。

解决此问题的最简单方法是在构造函数中使用局部变量（如var me = this;），然后在内部函数中使用me而不是this，因为这不会是重写的。

如果您想了解更多内容，请阅读词法范围和闭包。

JS：范围内部构造函数

1 个答案: