Dmitry87 Posted September 28, 2012 Share Posted September 28, 2012 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]; Link to comment Share on other sites More sharing options...
skaterdav85 Posted September 28, 2012 Share Posted September 28, 2012 (edited) 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 September 28, 2012 by big dave Link to comment Share on other sites More sharing options...
justsomeguy Posted September 28, 2012 Share Posted September 28, 2012 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 28, 2012 Share Posted September 28, 2012 Happy birthday there, Dave. Link to comment Share on other sites More sharing options...
skaterdav85 Posted September 28, 2012 Share Posted September 28, 2012 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. Link to comment Share on other sites More sharing options...
Dmitry87 Posted September 29, 2012 Author Share Posted September 29, 2012 Thanks. All work great. I just din't understand part with. args || arguments; and obj || window Is "||" logical or? What it does in those parts? Link to comment Share on other sites More sharing options...
skaterdav85 Posted September 30, 2012 Share Posted September 30, 2012 Yes, it is a logical OR. If args returns false, that expression will return arguments. If args returns true, args will be returned. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 1, 2012 Share Posted October 1, 2012 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; Link to comment Share on other sites More sharing options...
skaterdav85 Posted October 1, 2012 Share Posted October 1, 2012 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now