JavaScript Object Reference

Question

I've seen many questions for that context, but I still can't figure out, what exactly my Problem is. (I'm still experimenting with JavaScript, especially with objects)

Code:

function Field(val) 
{ var value = val; 
this.__defineGetter__("value", function(){ return value; });
this.__defineSetter__("value", function(val){ value = val; if(this.onchange) this.onchange.call(); });
}


function LW_makePlan()
{

    /* [...] */
    this.Filter1=new Field("");
    this.Filter2=new Field("");
    this.Filter3=new Field("");


    this.init = function() 
    {
        /* [...] */

        this.Filter1.onchange=this.getSomething;
    }

    this.getSomething = function()
    {
        arg="modus=doWhat";
        arg=arg+"&filter1=" + this.Filter1.value;
        arg=arg+"&filter2=" + this.Filter2.value;
        arg=arg+"&filter3=" + this.Filter3.value;
        request_fkt(null, true, arg , this.setSomething);
    }

    this.setSomething = function(data)
    {
        alert(data);
    }

    this.init();

};

What I'm trying:

test = new LW_makePlan();
test.Filter1.value="anything";

test.Filter1 has an "onchange"-property, that is checked in the setter of "Field". if set, the setter will also call the object given within the onchange-property.

this works so far BUT it seems, that this call creates a whole new object-instance ... no not an instance, it is, as if the function "getSomething" is copied as a stand-alone function, because the Code i called, but for example this.Filter1 within the function "getSomething" is undefined ...

Why is this happening and how can I avoid this?

PS: I don't want to use some type of event-handling-Things from 3rd Party codes, I'd like to do it myself with a little help maybe.

EDIT:

Thanks to Steffen Heil, changed to:

var scope=this;
this.Filter1.onchange=function() { scope.getSomething(); };

and it works!

Answer 1

Your call to this.onchange is in Field, so you are calling a function of Field. The assignment this.Filter1.onchanged=this.getSomething kind of copies the method getSomething from LW_makePlan to Field, where it will be called.

So inside of getSomething that is now called onchanged the reference this referes to the Field not the LW_makePlan.

Replace the assignment with this:

var source = this;
this.Filter1.onchange = function() { return source.getSomething(); };

And it will work. Most frameworks have a bindmethod that makes this more readable (hiding the extra variable in a scope).

---

In reply to the first comment:

You can explicitly call a function like this:

x.call( object, arg1, arg2, ag3 );
x.apply( object, [ arg1, arg2, arg3 ] );

These the are the same and it does not matter what x is. Inside the called function this has the value of object. x can be:

alert
window.alert
(function(){})
(alert)
(window.alert)

Normal calls to a function are shortcuts:

object.f = g;
object.f( arg1 )        =>  g.call( object, arg1 );
f( arg1 )               =>  f.call( window, arg1 );

While window is the global object in a browser; other environments may use another global object.

While the difference between these two shortcuts seems tivial, what about the following?

(object.f)( arg1 )

This is completely valid javascript, as object.f is a function and a function can be invoked using (args1). But:

object.f = g;
(object.f)( arg1 )       => g.call( window, arg1 )

So a.f = b.f; copies a member reference from a to b, but the this context, the code is executon on depends on the way f is called.

a.f(x) == a.f.call(a,x) == (a.f).call(a,x) == b.f.call(a,x) == (b.f).call(a,x)
b.f(x) == b.f.call(b,x) == (b.f).call(b,x) == a.f.call(b,x) == (a.f).call(b,x)

---

By the way, you can define your own bind very easily:

function bind( object, method ) {
  return function() {
    return object[ method ].apply( object, arguments );
  };
}

Then the original code would become:

this.Filter1.onchange = bind( this, 'getSomething' );

This would match the fix I gave above using "late binding". Most libraries prefer "early binding":

function bind( object, method ) {
  return function() {
    return method.apply( object, arguments );
  };
}

Then the original code would become:

this.Filter1.onchange = bind( this, this.getSomething );

The advantage is better performance, but the main difference is what happens, when getSomething changes after bind was called. The first implementation calls the new value, the second the old value.