I think I'm losing my Class/Function scope

[bali33]

Hello,

 

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

[xerver]

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));

[bali33]

Thank you - it works perfectly !