Javascript: Encapsulation of an Object When Using setTimeout

Question

How to use such functions as setTimeout to call member functions of objects with using of this keyword inside of called functions?

Look to my source please. I simulate this by using Javascript closure variables. In my case called function has argument context that is actually this for the object o:

    var Utils = 
    {
        Caller: function( context, func )
        {
            var _context = context;
            var _func = func;

            this.call = function()
            {           
                _func( _context );
            };

            return this;
        }
    };

// example of using:

function Object()
{
    this._s = "Hello, World!";
    this.startTimer = function()
    {
        var caller = new Utils.Caller( this, this._hello );
        setTimeout( caller.call, 1000 );
    };
    this._hello = function( context )
    {
        alert( context._s );
    }
}

var o = new Object();
o.startTimer();

Is it possible to save usual declaration of _hello() function and use keyword this, but not to use context inside?

Read up on Function.apply/Function.call and Function.bind. N.B.: your custom Caller.call function will shadow the native one; be careful! — Matt Ball
– Matt Ball, Commented Oct 14, 2011 at 20:30
The name Object references the built-in Object constructor. You don't want to shadow it... — Šime Vidas
– Šime Vidas, Commented Oct 14, 2011 at 20:34
return this; inside Caller is not necessary since you're using it as a constructor anyways. — Šime Vidas
– Šime Vidas, Commented Oct 14, 2011 at 20:36
@ŠimeVidas 'return this; inside...' I am not sure. It seems to be a problem if you have several objects of Caller. Hm... May be you are right, let's test. — sergzach
– sergzach, Commented Oct 14, 2011 at 20:39
@s.zakharov When you call a function as a constructor (via new), the this value will be returned by default. Example — Šime Vidas
– Šime Vidas, Commented Oct 14, 2011 at 20:42

Ryan · Accepted Answer · 2011-10-14 20:46:23Z

If you are trying to do traditional private member hiding from classical OOP, use the following:

    function MyObj() {

        // setup private closure scope
        var that = this;  // keep reference to this in constructor closure scope
        var s = "Hello, World!";
        var hello = function() {
            alert(s);
        };

        // expose public methods  
        this.startTimer = function() {
            setTimeout(function() {
                hello();
            }, 1000);
        };
    }

    var o = new MyObj();
    o.startTimer();

Another approach:

    function MyObj() {
        var that = this;
        this._s = "Hello, World!";
        this._hello = function() {
            alert(this._s);
        };
        this.startTimer = function() {
            setTimeout(function() {
                hello.call(that);
            }, 1000);
        };
    }

Šime Vidas · Accepted Answer · 2011-10-14 20:55:41Z

1

Ok, I didn't understand the question, here is the code after some modifications:

var Utils = {
    Caller: function ( context, func ) {
        this.exec = function () {
            func.call( context );
        };
    }
};

function Obj() {
    this._s = 'Hello, World!';

    this._hello = function () {
        alert( this._s );
    }

    this.startTimer = function () {
        var caller = new Utils.Caller( this, this._hello );
        setTimeout( caller.exec, 1000 );
    };  
}

var o = new Obj();
o.startTimer();

Tell me what you think.

answered Oct 14, 2011 at 20:55

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

1 Comment

sergzach Over a year ago

OK, thank you. I think I should use Function.apply with Caller and all I need is to replace context to this.

Collectives™ on Stack Overflow

Javascript: Encapsulation of an Object When Using setTimeout

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related