Jump to content

I think I'm losing my Class/Function scope


Recommended Posts



I wrote a class that extends DisplayObjectContainer which purpose is to load one asset and then create an image - nothing fancy, should be easy but I'm having some scope troubles.


The class has two properties, the array which contains the asset to load and a loader. I add listener on the loader in order to track the progress event - the event function callback is called as expected, but when I try to access to my class properties the console return "undefined". I tried to listen the event or directly bind the onProgress property of the loader and in both cases I can't access my properties. The fact is that the "this" object seems to not be my class instance.


My code is pretty simple :

function IntroState(){	PIXI.DisplayObjectContainer.call(this);	this._assetsToLoader 	= null;	this._loader 			= null;};IntroState.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);IntroState.prototype.constructor = IntroState;IntroState.prototype.init = function(){	// create an array of assets to load	this._assetsToLoader = [ "assets/BKG.jpeg"];		// create a new loader	this._loader = new PIXI.AssetLoader(this._assetsToLoader);	// use callback	this._loader.onComplete = this.onAssetsLoaded;	//this._loader.onProgress = this.onAssetsProgress;	this._loader.addEventListener('onProgress', this.onAssetsProgress);	//begin load	this._loader.load();};IntroState.prototype.onAssetsProgress = function(){	console.log("one asset loaded");	console.log(this);  // return function	console.log(this._assetsToLoader); // return undefined	console.log("this._assetsToLoader.lenght :" + this._assetsToLoader.length);}IntroState.prototype.onAssetsLoaded = function(){	var img = PIXI.Sprite.fromImage("assets/BKG.jpeg");	this.addChild(img);};

I'm just starting with Pixi and with JS too, so I'm pretty sure I'm doing something wrong - Any idea what is it ?


Thank you

Link to comment
Share on other sites

The "this" keyword works differently in JS than in other languages, it does not automatically refer to an instance of the class when the method is called. It refers to the context that function was called in.


When you do "this._loader.addEventListener('onProgress', this.onAssetsProgress)" you are sending a funciton reference off to pixi's loader to be called on the progress event. But what you are not sending is the context to call it in, so when it calls the function later on it either calls it with no context, or some other context it wants to (like the loader instance).


If you want to ensure that your context will be used when a function is called, you can bind a context to the function:

this._loader.addEventListener('onProgress', this.onAssetsProgress.bind(this));
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...