Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2006
    Location
    UK
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing functions as a parameter

    Hi,

    Firstly, it's my first post on here so -- hello!

    Secondly, I did try to do a search, I couldn't find anything so I apologise if it's been asked a million times before - please feel free to point me in the right direction

    Thirdly - my question:

    I'm creating a remote scripting (ajax) based address book. I'm trying to setup an 'onload' event handler, which points to a class method.

    The code is (I'm using prototype, by the way):

    Code:
    var AddressBook = Class.create();
    AddressBook.prototype = {	
    	initialize: function() {
    		// do initialisation stuff here
    	},
    	
    	load_addresses: function() {
    		// make ajax call...
    	},
    	
    	load_addresses_cb: function(results) {
    		// callback function
    	}
    };
    
    var ab = new AddressBook();
    The problem comes when I try to setup load_addresses to be the event handler, for example:

    Code:
    window.addEventListener('load', ab.load_addresses, false);
    What happens here is that the function is getting executed, but any references to "this" seem to refer to the window rather than the object it's part of.

    So, my question is, is there any way of getting "this" to work properly when you're passing functions around? Sorry if this isn't very clear, I'll post with clarification if necessary

    Thanks!

    - Phill

  • #2
    New Coder
    Join Date
    Aug 2006
    Location
    Montreal, Canada
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have not been doing javascript very long, so I don't know prototyping but hopefully i can answer your question regardless.

    I had troubles with 'this' aswell. My solution was to make a function to return the actual event listener.
    example:
    Code:
    class My_Class
    {
    //assuming this.variables have been set up and 
    // this class actually has usefull things in it
    
    function getOnLoadListener() {
    //a variable var d = this.address; //a function with a boolean return value... var func = this.load_addresses; return function() {
    //will execute this.load_addresses... // with 'this' meaning a My_Class instance. return func(d);
    }
    }
    } //to be used like so. Notice I am executing the function // 'getOnLoadListener' and it will return a pointer to the // function that I actually want to be the listener. window.addEventListener('load', ab.getOnLoadListener(), false);
    this works since the variable (pointer) 'func' will always point to your desired function because when it's initialised, 'this' means your My_Class instance, not the window.

    Hopefully this isn't overly confusing.
    I'd be happy to clarify if you still don't understand.

  • #3
    New Coder
    Join Date
    Aug 2006
    Location
    UK
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, that is a rather cunning solution!

    I'll give it a go and see what happens, thanks :thumb:

    In the meantime, if anyone who's used prototype has any pointers as well that'd be cool - I'm sure that I'm doing something wrong, I'm just not sure what

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Just do this:
    Code:
    window.addEventListener("load", function() {
        ab.load_addresses();
    }, false);

  • #5
    New Coder
    Join Date
    Aug 2006
    Location
    UK
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jkd
    Just do this:
    Code:
    window.addEventListener("load", function() {
        ab.load_addresses();
    }, false);
    Sir, I salute you

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I doubt it will work in IE.
    Why not simply JSON?
    Code:
    window['onload']=function(){
    ab.load_addresses()
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by Kor
    I doubt it will work in IE.
    Why not simply JSON?
    Code:
    window['onload']=function(){
    ab.load_addresses()
    }
    The question has nothing to do with the actual specifics of registering an event listener - it has to do with maintaining the "this" reference inside the load_addresses() method. By passing the method itself as an argument, "this" no longer refers to the particular object the method was a member of, so instead we close the ab variable in an anonymous function scope that calls its load_addresses() method and pass that to the listener registration instead.

  • #8
    New Coder
    Join Date
    Aug 2006
    Location
    UK
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've found something else that seems to work as well, which is not using prototype for creating classes:

    Code:
    var AddressBook = function() {
    	var self = this;
    
    	var load_addresses = function() {
    		// you can use "self" to refer to this
    	}
    }
    I've found this to work so far

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by jkd
    The question has nothing to do with the actual specifics of registering an event listener - it has to do with maintaining the "this" reference inside the load_addresses() method. By passing the method itself as an argument, "this" no longer refers to the particular object the method was a member of, so instead we close the ab variable in an anonymous function scope that calls its load_addresses() method and pass that to the listener registration instead.
    Oh, I see
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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