object callback changes 'this'

spiderplant0 · Oct 4, 2010

Hi, I having problems using 'this' in an objects method. I have simplified the problem.

I instantiate object obj1 which inturn instantiates subObj1. subObj1 is a slave to obj1. obj1 registers a handler function called method1 with subObj1 so that subObj1 can tell obj1 when it has finished.
For example: call subObj1.subMethod2() to get the sub object to do something.
subObj1 calls subMethod1 when its finished with its task, which inturn causes method1 to be called.

If I call method1 directly from obj1 'this' refers to obj1.
However when method1 gets called by the subObj1 through the event handler mechanism,
I find that 'this' has been changed to refer to subObj1.
This is a problem as now method1 has lost all connection with its object obj1.
If I define method1 within the 'Class1' function, I can get it to work if I use the 'var me = this;' trick, but if you have lots of methods within Class1() with further nesting this can get a bit hard to read.
So, can someone tell me how to deal with 'this' changing. I.e. I want 'this' to refer to obj1 within method1.
Thanks.

Code:

<html>
<body>
<script type="text/javascript">

    function Class1(){
        this.prop1 = "prop";
        this.subObj1 = new SubClass1();           //sub-object
        this.subObj1.subMethod1 = this.method1;   //register handler
    }

    Class1.prototype.method1 = function(){
        console.log(this.prop1);
    }

    function SubClass1(){
        this.prop1 = "subObjProp";
        this.subMethod1;
        this.subMethod2 = function(){ this.subMethod1(); };
    }

    obj1 = new Class1();
    obj1.method1();                 //prints 'prop'
    obj1.subObj1.subMethod2();      //prints 'subObjProp'

</script>
</body>
</html>

BillyRayPreachersSon · Oct 4, 2010

Use either the "call" or "apply" methods of the function object, where you can pass the context for "this" as the first parameter, e.g:

Code:

someObj.someFunc.call(thisCtx, arg1, arg2);

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

tsuji · Oct 4, 2010

This is one method you can pass on the reference. Using "this" inside an anonymous function can be an exercise of uncertainty depending on the context. Let me call it a subMethodEx.
[tt]
function Class1(){
this.prop1 = "prop";
this.subObj1 = new SubClass1(); //sub-object
this.subObj1.subMethod1 = this.method1; //register handler
[blue]this.subObj1.subMethodEx=function(obj,x){
obj[x]();
}[/blue]
}
[/tt]
Then you can quite easily use in both circumstances.
[tt]
obj1 = new Class1();
obj1.method1(); //prints 'prop'
obj1.subObj1.subMethod2(); //prints 'subObjProp'

[blue]obj1.subObj1.subMethodEx(obj1, "method1"); //'prop'
obj1.subObj1.subMethodEx(obj1.subObj1, "subMethod2"); //'subObjProp'[/blue]
[/tt]

spiderplant0 · Oct 4, 2010

Dan, tsuji, thanks for your ideas.
I eventually settled on replacing this...

Code:

this.subObj1.subMethod1 = this.method1;

with this...

Code:

var me = this;
this.subObj1.subMethod1 = function(){me.method1();};

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

object callback changes 'this'

spiderplant0

Programmer

BillyRayPreachersSon

Programmer

tsuji

Technical User

spiderplant0

Programmer

Similar threads

Part and Inventory Search

Sponsor