SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Closure/scope

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Closure/scope

    Hello all,

    I'm trying to group some exisiting top-level functions inside a
    closure (to avoid polluting the global namespace) but I'm not quite
    getting it to work.

    First, all the JS works outside my anonymous function, but once I put
    it in the anonymous function I get an error of "crossfade is not
    defined". Does anyone see anything completely obvious that I am
    missing?

    I'm not quite getting why the the setInterval/crossfade works outside
    the anonymous function but not inside. Anything inside start() should
    be able to see vars/functions outside start() and it should all be
    protected in the closure created by the top-level anonymous function?
    I'm not trying to access anything *within* crossfade(), I'm just
    trying to execute it.

    Code:
    (function($) {
    
            //vars up here that internal functions can access
            //also using some jquery inside here, so using $
    
            function crossfade() {
                //body here
            }
    
            //other functions
    
            function start() {
                //body here
    
                 cInterval = setInterval('crossfade()', 5000);
            } 
    
    })(jQuery);

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got this, setInterval is being executed in the global scope so I changed it to use an anonymous function:

    cInterval = window.setInterval(function() { crossfade(); }, 5000);

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if crossfade() doesn't require any arguments to be passed to it, you could also just do
    Code:
    setInterval(crossfade, 5000);
    But if arguments are needed, using an anonymous function around it to produce a closure is the common way.
    Code:
    var time = 55;
    cInterval = window.setInterval(function() { crossfade(time); }, 5000);

  4. #4
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've written a small script here to try and illustrate how this is assigned in various contexts including in a closure.

    Code JavaScript:
    function Obj1(){
    			this.name = 'Bob Flemming',
    			this.sayName = function(){
    				alert ('this is '+(this.constructor.name || this));
    				alert ('Hi it\'s me '+this.name+' here.');
    		};
    };
     
    function Obj2(){
    			this.name = 'the 13th Duke of Wybourne';
    			this.sayName = obj1.sayName; // obj1's sayName function
    			};
     
    var obj1 = new Obj1(), obj2 = new Obj2();
     
    var caller1 = obj1.sayName;	// is just a pointer to obj1.sayName
    var caller2 = function(){obj1.sayName(); obj2.sayName()};	
     
    caller1();// called in the global context. This = window;
    caller2();// ?
    obj2.sayName(); // obj1.sayName is called in obj2's context. This = obj2;

    It does leave me with some questions though.

    It's the closure function doing the work?
    In my example am I right in saying. The closure's function scope contains pointers to the contained objects's activation objects, which in turn contain their this property/keyword?

    Cheers

    RLM

    ps. Just anther question if in Obj 2 I change

    this.sayName = obj1.sayName; to this.sayName = obj1.sayName();

    Why does it call obj1.sayName in it's own scope i.e. this = obj1?

    It seems that a reference to this is only held if it comes in the form of something().


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •