Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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! :-)

like image 417
haemse Avatar asked Feb 19 '26 07:02

haemse


2 Answers

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);
like image 97
Eldar Djafarov Avatar answered Feb 21 '26 21:02

Eldar Djafarov


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

like image 27
Tobbe Brolin Avatar answered Feb 21 '26 21:02

Tobbe Brolin



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!