Lebensdauer einer Variablen im EventListener...

  • Hi Leute,


    mal ne kurze Verständnisfrage bzgl. folgenden Beispielcode:

    Code
    1. window.onload = function()
    2. {
    3. var test = 200;
    4. window.addEventListener("resize",function()
    5. {
    6. //Irgendwas mit test...
    7. });
    8. }

    Ich kann die Variable "test" im Listener verändern, ausgeben und sonstiges.

    Heißt das, das alle Variablen & Objekte, die ich in der OnLoad-Funktion erstelle, die ganze Zeit im Listener nutzbar sind?

    Also ist ihre Lebensdauer auch nach Abschluss der OnLoad-Funktion noch gegeben?


    Wenn ich ein Objekt mit einigen Eigenschaften in der OnLoad erstelle, kann ich mit diesen dann "die ganze Zeit" im Listener arbeiten?

    Oder wann verlieren die ihre Gültigkeit?

    Sorry, hab mir das nur grad so vorgestellt, das Variablen in der Funktion(hier OnLoad) nach der Funktion nicht mehr existieren...


    Wäre schön, wenn mich da kurz jemand aufklären könnte, danke!

  • Danke.


    Aber die eigentlichen Unterschiede zwischen var, let und const sind mir bekannt.

    Ich frage mich eher, nachdem die Funktion bei OnLoad abgearbeitet und beendet wurde, müsste die Variable "test" bei einem Resize doch nicht ansprechbar sein?

    Wenn ich sie z.B. mit alert ausgebe?


    Oder ist es so, das beim Abarbeiten von OnLoad an der Stelle des Listeners, der Listener lediglich mit dem aktuellen Wert von "test" gespeist wird und nicht mit der

    Variable "arbeitet"?


    Hab da denke ich nen kleinen Denkfehler...

  • Gute Frage! Früher habe ich mal gelernt, dass lokale Variablen innerhalb einer Funktion nicht mehr verfügbar sind, nachdem diese durchlaufen und verlassen wurde. In diesem Fall trifft das offenbar nicht zu. Javascript merkt sich diese und sie sind auch später verfügbar, wenn der Eventlistener triggert. Der Begriff dafür lautet "closure", wenn ich mich richtig erinnere. Ein Verfallsdatum gibt es nicht, die Variable bleibt beliebig lange verfügbar.

  • var definiert eine Variable zwar global, aber innerhalb eines Listener wird der Scope nicht verlassen. Ein EventHandler wird immer bei einem bestimmten Event getriggert. Bei Ausführung eines solchen EventHandler wird der zuvor definierte Code verarbeitet.


    Der Listener kennt zwar die globalen Variablen von außen, aber der globale Scope kennt die Variablen aus dem Listener nicht.

    HTML
    1. <button id="a">HELP</button><div>Help me!!!</div>
    2. <button id="b">Force Rescue</button>

    Egal, was man klickt, die Variable _foobar kann außerhalb des EventHandler-Code nicht verändert werden!

    Wenn eine Variable mit var in einem EventHandler deklariert wird, wird sie das bei jedem Trigger aufs Neue.

  • Danke Arne.

    Allerdings ging es eher darum ob die Variablen, die ich bsw. in der OnLoad-Funktion erstelle, auch während des Triggers noch in dem

    Eventlistener vorhanden ist, oder dort nur bei der Definition des Listeners der entsprechende Wert eingespeißt wird.


    Also wenn Variablen & Listener in einer Funktion erstellt werden, kennt der Listener diese dann noch beim Auslösen? Oder arbeitet er nur mit dem Wert?

  • Ach so, sorry, dann habe ich das falsch gelesen.

    Kann man ja relativ leicht testen:

    Dadurch, dass die Methode im global scope aufgerufen wird, sollte die Variable in der Methode verfügbar sein und 201 ausgeben.

    Ich habs jetzt nicht getestet, aber das würde ich mal behaupten.


    Ach so, auf Deinen Listener bezogen, auch einfach zu testen:

    Sollte bei jedem Trigger um einen erhöht werden.

  • Ok, hab grad mal bei Codepen folgendes getestet:



    ich erhalte die korrekt Breite. Aber noch ne Frage dazu:

    Werden die Variablen dann zu globalen Variable, also kann man die dann auch im gesamten Script verwenden? Glaube nicht, oder?

    Oder werden die Variablen am leben gehalten, solange sie von den Listenern noch gebraucht werden, verwendbar allerdings nur

    innerhalb der OnLoad-Funktion?


    Oder ist es so, das im Resize-Listener garnicht die eigentliche Variable "test" angesprochen wird, sondern eine neue (und wegen fehlendem "var" globale) Variable "test" erzeugt wird, die dann im anderen Listener angesprochen werden kann?

  • Ist der OnLoad-Handler also automatisch global?

    Nein, ist ein Listener, wie jeder andere auch. Aber mit ein wenig Überlegung kannst Du Dir das selbst erklären.


    Du bindest ein JavaScript, wie dieses ein:

    JavaScript
    1. document.addEventListener('DOMContentLoaded', function() {
    2.     var _foobar = 200;
    3. });
    4. console.log(_foobar);

    Das Ergebnis ist undefined.


    Warum? Weil Du Dich nicht im Scope des Listeners befindest. Die Variable wird zwar strukturell scheinbar zuvor deklariert, aber das greift erst, wenn der Content vollständig geladen ist. Bis dahin ist aber die Konsolenausgabe bereits erzeugt worden, weil die außerhalb des Listeners und i.d.R. vor dem vollständigen Laden des Content aufgerufen wurde.


    Da aber die onload-Events i.d.R. immer genutzt werden, um das Laden des Content abzuwarten, um dann die Scriptwelle zu fahren, wirst Du fast immer im Scope des onload-Scope sein und deshalb ist dann auch die Variable verfügbar. In äußere Methoden musst Du die dann übergeben:

    Wenn Du also wirklich globale Variablen benötigst, solltest Du die auch global deklarieren:

    Das ist aber alles nichts, was Du mit ein bisschen selber testen hättest herausfinden können.