Jump to content
Dmitry87

Variable visibility

Recommended Posts

Hi,I'm writing some demos on JavaScript and get into some problems that can't understand how it works.I create a constructor function and define it variables and functions.But in InitBuffer function I'm calling onload image function and I'd like to be able to use this. variables but not what I did below. I create new variables image and sampTexture. Maybe I should pass that parameters in this onload function. But wasn't able to do that.

function window(objectsSource){  this.xmlsource=objectsSource;  this.indexbuffer = null;  this.texelbuffer = null;  this.initbuffer = InitBuffer;							   function InitBuffer(){	var texels = getTexelsFromXML(this.xmlsource);												this.texelbuffer = gl.createBuffer();	gl.bindBuffer(gl.ARRAY_BUFFER, this.texelbuffer);											gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texels), gl.STATIC_DRAW);	this.texelbuffer.itemSize = texels.itemSize;	this.texelbuffer.nItems = texels.nItems;	gl.vertexAttribPointer(shaderProgram.vertexTextureAttribute, this.texelbuffer.itemSize, gl.FLOAT, false, 0, 0);	this.texelbuffer.imageArray = gl.createTexture();														  	sampTexture = this.texelbuffer.imageArray;	this.texelbuffer.imageArray.image = new Image();	image = this.texelbuffer.imageArray.image;	this.texelbuffer.imageArray.image.onload = function(){																							  	try{																gl.bindTexture(gl.TEXTURE_2D, sampTexture);						gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);		gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);		gl.generateMipmap(gl.TEXTURE_2D);		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);	}	catch(e){	  alert("!!!");	}	image.src=texels.imageArray[0];

Share this post


Link to post
Share on other sites

Well first off, why are you declaring a function called window? window is already a reserved object in the browser. Second, you will probably want to create all your instance properties/variables on the object. Right now you arent setting all those properties on your InitBuffer object. Move the following into InitBuffer and invoke it with new.

 this.xmlsource=objectsSource;  this.indexbuffer = null;  this.texelbuffer = null;  this.initbuffer = InitBuffer;

Edited by big dave

Share this post


Link to post
Share on other sites

First, don't use the name "window". Javascript already has a window object, if you overwrite that it will cause problems. For passing parameters to event handlers, I prefer to use delegate functions. Add this into your global Javascript somewhere to add the createDelegate method to functions:

Function.prototype.createDelegate = function(obj, args){  var method = this;  return function() {    var callArgs = args || arguments;    return method.apply(obj || window, callArgs);  };}

Then you can do this:

this.texelbuffer.imageArray.image.onload = function(image, sampTexture){  try{    ...  }}.createDelegate(this, [image, sampTexture]);

Using createDelegate you can create a copy of a function to run in a certain scope (the first parameter, set to this), and pass an array of arguments to send to the function when it gets called.

Share this post


Link to post
Share on other sites

Thanks JSG! I like your createDelegate method. Quite clever. In this situate I always just save this in a variable called that, which I'm sure you've seen before. It is kinda ugly especially if you have to do it in multiple methods.

Share this post


Link to post
Share on other sites

In Javascript, when you evaluate a logical OR expression the value of that expression will be the first "truthy" value. So if args does not evaluate to false, then args || arguments will evaluate to args, or else it will evaluate to arguments. It's the same as doing this: if (args) callArgs = args;else callArgs = arguments;

Share this post


Link to post
Share on other sites
In Javascript, when you evaluate a logical OR expression the value of that expression will be the first "truthy" value. So if args does not evaluate to false, then args || arguments will evaluate to args, or else it will evaluate to arguments. It's the same as doing this: if (args) callArgs = args;else callArgs = arguments;
you explained it much better JSG

Share this post


Link to post
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.

Guest
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.

Loading...

×
×
  • Create New...