Javascript callback question

[darcome]

Hello everyone, a little question about javascript and babylonjs

 

I have created the class GameClass

var GameClass = function () {};GameClass.prototype.canvas 			= null;GameClass.prototype.engine 			= null;GameClass.prototype.scene 			= null;// -------------------------------------------------------------------------- //GameClass.prototype.Init =function (){	console.log ("Initializing");	this.canvas 	= document.getElementById 	("renderCanvas");	this.engine 	= new BABYLON.Engine 		(this.canvas, true);	this.scene 	= new BABYLON.Scene 		(this.engine);	this.engine.runRenderLoop (this.RenderLoop);}// -------------------------------------------------------------------------- //GameClass.prototype.RenderLoop =function (){	this.scene.render ();}

that has a function called RenderLoop which I'll use for the engine.runRenderLoop.

 

But with the code above, this.scene is undefined.

 

So, my solution was to make scene a static variable of the GameClass.

 

Like this:

var GameClass = function () {};GameClass.prototype.canvas 		= null;GameClass.prototype.engine 		= null;GameClass.scene 			= null;// -------------------------------------------------------------------------- //GameClass.prototype.Init =function (){	console.log ("Initializing");	this.canvas 	= document.getElementById 	("renderCanvas");	this.engine 	= new BABYLON.Engine 		(this.canvas, true);	GameClass.scene = new BABYLON.Scene 		(this.engine);	this.engine.runRenderLoop (this.RenderLoop);}// -------------------------------------------------------------------------- //GameClass.prototype.RenderLoop =function (){	GameClass.scene.render ();}

Now everything works fine, but is there another way to solve this, without making the scene variable static?

 

Thanks in advance for your help

[RaananW]

The "this" keyword in javascript is quite an interesting concept. And it is the key and solution to your problem.

 

You are using this.scene under the assumption that the obejct that will execute the function is the GameClass object you will create. This function will be executed by the engine and the "this" won't be the GameClass object.

There are quite a lot of solutions for this. Without going to JavaScript programming (not entierly the purpose of this forum) it will be hard to explain. But look at what is beign done here - http://babylondoc.azurewebsites.net/page.php?p=21911

//create a scene object. var scene = createScene();// Register a render loop to repeatedly render the sceneengine.runRenderLoop(function () {   //use the scene variable that is accessible in this scope   scene.render();}); 

A way of achieving this would be to do that in the init function:

GameClass.prototype.Init =function (){	console.log ("Initializing");	this.canvas 	= document.getElementById 	("renderCanvas");	this.engine 	= new BABYLON.Engine 		(this.canvas, true);	GameClass.scene = new BABYLON.Scene 		(this.engine);        //the magic "that"        var that = this;	this.engine.runRenderLoop (function() {            that.scene.render();            //OR, if you want to use render loop            that.RenderLoop();        });        //OR using "bind"        this.engine.runRenderLoop (this.RenderLoop.bind(this));} 

 If you want to read more about it try here - https://blog.codecentric.de/en/2012/11/javascript-function-contexts-this-proxy/

[darcome]

thank you very much!

 

Thanks to your code, I've been able to solve my "problems"!

 

I had to use the "that" magic in one case and the bind case in another

 

Again, thank you very much!

[davrous]

This approach is named "closure" in the JavaScript world. This is the term you will have to search on search engines next time you have the same problem

It can be solved also using arrow functions in ECMAScript 6 or lambda functions in Typescript.

David