The question of basic understanding: the scope of objects

Question

when I instantiate an object ( simplegallery ) in a normal function like this:

function setGallery(imgs){ var galleryArray = new Array(); for(var i=0; i<imgs.length; i++){ galleryArray.push([imgs[i].imgpath + imgs[i].imghash + imgs[i].thumb + '.' + imgs[i].ext, "", "", ""]); } var mygallery=new simpleGallery({ navpanelheight: 40, wrapperid: "fbImg", //ID of main gallery container, dimensions: [80, 60], //width/height of gallery in pixels. Should reflect dimensions of the images exactly imagearray: galleryArray, autoplay: [false, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //transition duration (milliseconds) oninit:function(){ //event that fires when gallery has initialized/ ready to run //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause")) }, onslide:function(curslide, i){ //event that fires after each slide is shown //Keyword "this": references current gallery instance //curslide: returns DOM reference to current slide DIV (ie: try alert(curslide.innerHTML) //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) } }); } 

From my understanding, the created object "mygallery" is an instance of "simpleGallery". Since the "mygallery" object is declared in the setGallery function, it is a local object that will be lost after the function completes. But simpleGallery binds events that interact with settings that are simpleGallery properties ... how are these properties still alive when these events fire?

However, how long does this specimen live and why?

• Qestion: How can I access the property of this instance from a function other than setGallery? For example, when I want to get the value mygallery.setting.imagearray.length ...

Thank you for helping me understand! :-)

Answer 1

Javascript has the scope of the function, all the variables inside the function (declared with var) are visible only in the function.

A function is an object , and the lifetime of this object does not necessarily end when you leave the body of the function. For example, setGallery will “live” because mygallery continues to “live”, but access to mygallery lost (I am sure there will be many suggestions for solutions in other posts).

Answer 2

In this case, the local variable is not destroyed after the function completes, because simpleGallery sets event bindings on the DOM, I suppose. You see that if javascript sees that some objects are referenced by something outside of it, they are stored in memory.
This object will live in memory until the end of the program or all links will be cleared.
To get imagearray.length , you need some kind of event that needs to be fired in the area of ​​the object. To do this, you need to change the simpleGallery class to configure the event and the callback function that will be launched in the this
If you add an example lower to the simpleGallery constructor than the onclick event in domElement , it will run the someYourFunction function in the scope of the simpleGallery instance. So in this function you will have access to this.imagearray.length

 var self=this; domElement.addEventListener( "click", function(event) {someYourFunction.apply(self, event)}, false); 

Answer 3

customization is the public membe of a simple Gallery so you can access customization at your facility. Now you need to manage the simpleGallery (myGallary) object to access the settings, possible ways to do this may be as follows:

1) Return the mygallery object from setGallery, then you can call it like this

  setGallery(img).setting.imagearray.length.. or var gallary = setGallery(img); gallary.setting.imagearray.length.... 

2) Make setGallary a class as simpleGallery and define myGallary as an open item using this

  var setGallery = function(img){ ................ this.myGallary = new simpleGallery( .. .. .. } then access it as var gallary = new setGallary(img); gallary.myGallary.setting.imagearray.length 

3) the dirty way, create a global variable to store the myGallary object and assign it to the setGallary function and use it anywhere.