Question

I am new to OOP and I am trying to rewrite a simple JS function as an object literal and then as a constructor function. I succeeded in writing the object literal version, but I clearly have a scope problem inside the anon function which handles the onclick event (inside my constructor function). Please let me know how to make the onclick event work.

Object Literal Version Which 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();
});

Constructor Function Version Which DOESN’T WORK:

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. I am aware that I should be using DOM API event handlers instead of HTML-DOM ones. I am just tackling one thing at a time.

Answer 1

this inside your function will not necessarily be the same as this in the constructor, it is decided by how you call that function. For instance, if you call a function f by doing f(), then this === window, if it is a method on an object x.f() then this === x. Also see Function:call and Function:apply.

Simplest way to solve this is to have a local variable in the constructor (like var me = this;) and then use me instead of this in the inner function, since that will not be overridden.

Read up on lexical scoping and closures if you want to learn more.