www.webdeveloper.com
Results 1 to 2 of 2

Thread: Scope of "this" in a callback

Hybrid View

  1. #1
    Join Date
    Jul 2003
    Posts
    4

    Question Scope of "this" in a callback

    I'm writing a simple image pre-loader and here are the 2 relevant functions with the simple "constructor" at top:

    Code:
    //Default constructor
    var ImagePreLoader = function()
    {
    	//Init class members
    	this._m_vImagePaths = null;
    	this._m_fpOnFinishedLoadAllImages = null;
    	this._m_nNumImagesPreLoaded = null;
    	this._m_mPathsToImages = {};
    };
    
    
    //Preloads all images passed in the 0-indexed vImagePaths string array and calls fpOnFinishedLoadAllImages when they've all finished loading
    ImagePreLoader.prototype.PreLoadImages = function(vImagePaths, fpOnFinishedLoadAllImages)
    {
    	//Shallow-copy the array of path strings.  (Cloning the strings is unnecessary since JavaScript strings are immutable.)
    	this._m_vImagePaths = vImagePaths.slice(0);
    	
    	//Save the callback
    	this._m_fpOnFinishedLoadAllImages = fpOnFinishedLoadAllImages;
    	
    	//Create images from each path, causing them to load.
    	for (var i = 0; i < this._m_vImagePaths.length; ++i)
    	{
    		//Set image to load
    		var pLoadingImage = new Image();
    		pLoadingImage.onload = this._OnImageLoad();
    		pLoadingImage.src = this._m_vImagePaths[i];
    		
    		//Save the Image object
    		this._m_mPathsToImages[this._m_vImagePaths[i]] = pLoadingImage;
    	}
    	
    	//No images have been pre-loaded yet
    	this._m_nNumImagesPreLoaded = 0;
    };
    
    
    //Internal function handling a single image pre-loading.  Invokes the callback if all have been preloaded.
    ImagePreLoader.prototype._OnImageLoad = function(value)
    {
    	this._m_nNumImagesPreLoaded++;
    	if (this._m_nNumImagesPreLoaded === this._m_vImagePaths.length && this._m_fpOnFinishedLoadAllImages !== null)
    	{
    		this._m_fpOnFinishedLoadAllImages();
    	}
    }
    I'm then calling it with:
    Code:
    //Test pre-loader
    var vImagePaths = ["textures/Ball.png", "textures/Block.png"];
    var pImagePreLoader = new ImagePreLoader();
    pImagePreLoader.PreLoadImages(vImagePaths, OnPreloadFinished);

    As written, this code works as I want it to. Specifically "this" refers to the ImagePreLoader object in _OnImageLoad.
    But what's confusing me is this line:

    Code:
    pLoadingImage.onload = this._OnImageLoad();
    If I remove the parentheses after _OnImageLoad like:
    Code:
    pLoadingImage.onload = this._OnImageLoad;
    then "this" seems to refer to the global space while in _OnImageLoad. If I'm understanding things correctly, that's because _OnImageLoad is not being called on an object whenever it gets invoked. What I *don't* understand is why putting the parentheses "fixes" it. (Or even if it's actually fixing it or just appearing to work for this case, but actually doing something dangerous.)

    Any chance I got get an explanation of exactly what's going on? Thanks for any help!
    Last edited by Quasius; 09-24-2013 at 07:04 PM.

  2. #2
    Join Date
    Jul 2003
    Posts
    4
    I think I figured it out...

    I was actually immediately calling the function with
    Code:
    pLoadingImage.onload = this._OnImageLoad();
    So that meant "this" was valid since I was actually calling it on this. (This is now super-obvious to me, but somehow I missed it.)

    The solution I found was to attach the ImagePreLoader (this) as a property to the Image object so it could be retrieved in the callback.
    Code:
    pLoadingImage._m_pPreImageLoader = this;

    Sorry for the wasted question. For some reason I convinced myself I was dealing with some quirk of JavaScript variable scope, but it was just something super-obvious. :/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles