+ Reply to Thread
Results 1 to 3 of 3

Thread: Javascript Closures

  1. #1
    lemon-tree's Avatar
    lemon-tree is offline x10 Minion lemon-tree has a spectacular aura about
    Join Date
    Nov 2007
    Posts
    1,420

    Javascript Closures

    The project I am currently working on in Javascript is based around a Google Maps object. This map has multiple event handlers associated with it and I am having problems understanding how to maintain the variable scope when the handler event is called.
    Currently, I am using an assigned variable called 'calledObject', but this is both messy and I know it is not the proper way of doing it.
    I have truncated the code for simplicity to the main items:
    Code:
    var calledObject = null;
    
    function FC(){
    	calledObject = this;
    
    	this.initialiseMap = function(){
    	//Create map code truncated here
    
    	google.maps.event.addListener(map, 'click', function(event){
    		calledObject.addVertex(event.latLng.lat(), event.latLng.lng(), 0, false, false);
    		//This works but doesn't seem like the right way of doing it
    	});
    
    	this.addVertex = function(){
    		//Add vertex
    	}
    }
    What I want this to do is maintain the link to the 'this' so that I can call this.addVertex rather then calledObject.addVertex like this:
    Code:
    function FC(){
    	this.initialiseMap = function(){
    	//Create map code truncated here
    
    	google.maps.event.addListener(map, 'click', function(event){
    		this.addVertex(event.latLng.lat(), event.latLng.lng(), 0, false, false);
    		//This does not work, closure is not formed
    	});
    
    	this.addVertex = function(){
    		//Add vertex
    	}
    }
    Obviously, this does not work as when the click event is called the 'this' has changed from referencing the instance of FC().
    Basically, I am unsure as to how to form the closure on the variables within the FC object, so that when the click event is called the 'this' object is pointing to the correct thing. I have been reading multiple tutorials and seem to be getting nowhere.
    Any assistance would be greatly appreciated.

  2. #2
    essellar's Avatar
    essellar is offline Community Advocate essellar has a spectacular aura about
    Join Date
    Feb 2010
    Location
    Toronto, Ontario, CA
    Posts
    1,153

    Re: Javascript Closures

    You've been doing it more or less right (although it is conventional to use a shorter variable name). Keep in mind that "this" is the frame reference in JavaScript, so the only time it's going to refer to the object is when the object is created (using the constructor function). The rest of the time, it's going to refer to the calling context/frame, so the only way to make a sticky internal reference to the object itself is to assign "this" to a variable during construction. As for the variable name, I've most often seen __self (that's a double underscore). You probably don't want to make it global, though, since you may have more than one instance of the object floating around at any one time.
    “Beware of bugs in the above code; I have only proved it correct, not tried it.” --Donald Knuth
    "It was as if its architects were given a perfectly good hammer and gleefully replied, 'neat! With this hammer, we can build a tool that can pound in nails.'" -- Alex Papadimoulis (on TheDailyWTF.com)

  3. #3
    lemon-tree's Avatar
    lemon-tree is offline x10 Minion lemon-tree has a spectacular aura about
    Join Date
    Nov 2007
    Posts
    1,420

    Re: Javascript Closures

    OK, I think I get what you mean. Trying to form a closure on the current 'this' is impossible unless the 'this' is applied to a separate variable; that does make sense now. Being global isn't an issue as only one instance of these objects will ever exist, but it is still good practice to keep the scope enclosed I suppose. So it could be something more like this:
    Code:
    function FC(){
    	var __self = this;
    
    	this.initialiseMap = function(){
    	//Create map code truncated here
    
    	google.maps.event.addListener(map, 'click', function(event){
    		__self.addVertex(event.latLng.lat(), event.latLng.lng(), 0, false, false);
    	});
    
    	this.addVertex = function(){
    		//Add vertex
    	}
    }
    This does appear to work and when I push the creation out to a separate method the closure does appear to be formed.
    Thank you.

+ Reply to Thread

Similar Threads

  1. Javascript help
    By walidno1 in forum Programming Help
    Replies: 7
    Last Post: 05-19-2010, 07:48 AM
  2. Javascript help
    By espfutbol98 in forum Programming Help
    Replies: 16
    Last Post: 06-24-2009, 01:45 AM
  3. HELP ME!! JavaScript!!
    By willemvo in forum Programming Help
    Replies: 1
    Last Post: 08-16-2008, 04:27 PM
  4. Need some javascript help
    By Christopher in forum Programming Help
    Replies: 18
    Last Post: 07-07-2008, 08:57 AM
  5. javascript and external javascript files problem
    By delon in forum Programming Help
    Replies: 6
    Last Post: 04-27-2008, 12:41 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
x10hosting free hosting for the masses
dedicated servers