CODEWITHSUNDEEP
javascriptscope
haemse
haemse

Reputation: 4263

question of basic understanding: objects scope

when i instance 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's DIV (ie: try alert(curslide.innerHTML)
            //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
        }
    });
}

From my understandig, the created object "mygallery" is an instance of "simpleGallery". Because the object "mygallery" is declared in the function setGallery it is a local object which will be lost after the function is finished. But simpleGallery binds events, that interact with settings, which are properties of simpleGallery ... how comes those properties are still alive when thos events are triggered?

However, how long does such an instance live and why?

  1. Qestion: How can i access a property of this instance from an other function than setGallery? Like when i want to get the value of mygallery.setting.imagearray.length ...

Thanks for your helping me understand! :-)

Upvotes: 3

Views: 168

Answers (3)

Tobbe Brolin
Tobbe Brolin

Reputation: 455

Javascript has function scope, all variables inside a function (declared with var) are only visible in and anywhere in that function.

A function is an object and the lifetime of that object does not necessarily end when you leave the function body. For example setGallery will 'live' because mygallery continues to 'live', but access to mygallery is lost (i'm sure there will be a lot of suggestions of solutions in other posts).

Upvotes: 2

Naren Sisodiya
Naren Sisodiya

Reputation: 7288

setting is the public membe of simpleGallery so you can access the setting on its object. Now you need to manage simpleGallery object(myGallary) to access setting, possible ways for this can be one of following:

1) Return mygallery object from setGallery then you can call it in following way

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

2) Make setGallary a class like simpleGallery and define myGallary as public member 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 an global variable to hold the myGallary object and assign it in the setGallary function and use it anywhere.

Upvotes: 1

Eldar Djafarov
Eldar Djafarov

Reputation: 24685

In this case local variable is not destroyed after function ends because simpleGallery sets bind events on DOM I suppose. You see If javascript sees that some objects are referenced by something outside it holds those in memory.
This object will live in memory up to the finish of program or all references will be cleared.
To get imagearray.length you need some event to be fired in scope of the object. To achieve this you need to change simpleGallery class to set up event and the callback function to be fired in scope of this
If you add example below to simpleGallery constructor than onclick event on domElement will fire a function someYourFunction within scope of 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);

Upvotes: 3

Related Questions