[js] Code met functie aanmaken

[Dennis]

Goeiedag,

Ik heb een stuk code van internet gehaald om ballon tooltips mee te produceren, maar bij het analyseren van de code zag ik een stukje staan wat ik niet begrijp. Het gaat om deze functie:

JavaScript:

function initalizetooltip()
{
    var all_links=document.getElementsByTagName("a")

    if (enablearrowhead)
    {
        tiparrow=document.createElement("img")
        tiparrow.setAttribute("src", arrowheadimg[0])
        tiparrow.setAttribute("id", "arrowhead")
        document.body.appendChild(tiparrow)
    }
    
    for (var i=0; i<all_links.length; i++)
    {
        if (reltoelement(all_links[i]))
        {
            //if link has "rel" defined and it's the ID of an element on page
            all_links[i].onmouseover = function(e){
                var evtobj=window.event? window.event : e
                displayballoontip(this, evtobj)
            }
            all_links[i].onmouseout=delayhidemenu
        }
    }
}

Wat ik niet begrijp is het laatste stukje code. Daar staat: "all_links[i].onmouseover = function(e){" en vervolgens wordt daar een functie gemaakt. Nu begrijp ik dat je blijkbaar zomaar een functie aan kunt maken, maar ik zou denken dat dit een foutmelding zou genereren omdat een functie nu meermaals kan worden gedefinieerd.

Kan iemand mij vertellen hoe dat dan precies zit en waarom dit blijkbaar tóch goed gaat?

[b19a]

Er wordt daar een naamloze functie gedeclareerd en gekoppeld aan de mouse-over. Je zou hetzelfde kunnen doen bij timers bijvoorbeeld:

JavaScript:

window.setTimeout(function(e){ alert('Tijd is op!'); }, 5000);

Het is een vrij standaard truc om triggers te programmeren volgens mij.

[Dennis]

Is het dan niet slordig? Kun je niet beter gewoon een 'normale' functie maken en naar die functie verwijzen?

[Fuzzillogic]

Nee, dat is niet slordiger dan dat je een functievariable doorgeeft. Het ligt aan jezelf wat je handiger/mooier vindt.

[zwippie]

Dat wordt een inline function genoemd. Omdat deze functie alleen aangeroepen kan worden aangeroepen vanaf de plaats waar deze wordt gedefinieerd, in dit geval dus bij een onmousover van een element uit all_links, hoeft de functie geen naam te krijgen.
Het woordje function is in JS een reserved word, en geeft alleen aan dat er een functie volgt, het is dus niet de naam van de functie.

Of dit slordig is? Valt wel mee. Je kan er altijd een aparte functie van maken als je dat wilt.

[Dennis]

Okay . Bedankt voor jullie uitleg. Ik had het nog nooit gezien zo en vroeg me af wat het precies was. Maar nu is het me duidelijk!

[crisp]

Het is in dit voorbeeld wel degelijk slordig; de extra scope is hier overbodig en dus heeft een referentie naar een non-anonymous functie de voorkeur (memory- en performance-wise):

JavaScript:

all_links[i].onmouseover = mouseoverfunction;

//...

function mouseoverfunction(e)
{
    e = e || window.event;
    displayballoontip(this, e);
}

[ Voor 9% gewijzigd door crisp op 07-12-2006 10:50 ]

[Fuzzillogic]

crisp schreef op donderdag 07 december 2006 @ 10:46:
Het is in dit voorbeeld wel degelijk slordig; de extra scope is hier overbodig en dus heeft een referentie naar een non-anonymous functie de voorkeur (memory- en performance-wise):

Ligt aan de javascript-implementatie, lijkt me zo. Als die anonymous functie telkens opnieuw wordt "gekopieerd", ja, dan gaat het hard achteruit. Als de implementatie slim genoeg is om te zien dat het telkens dezelfde is, dan is het mogelijk sneller, omdat je een referentie minder hebt. Hoe de huidige browserimplementaties ermee omgaan weet ik niet. Daar zul je dan aan moeten meten. Wellicht heb je dat al gedaan

Ik ben best voor programmeren met performance in het achterhoofd, maar als dat niet relevant is, dan is het maar net wat handiger/mooier is. En dat is heel subjectief.

[crisp]

Fuzzillogic schreef op donderdag 07 december 2006 @ 11:41:
[...]

Ligt aan de javascript-implementatie, lijkt me zo. Als die anonymous functie telkens opnieuw wordt "gekopieerd", ja, dan gaat het hard achteruit. Als de implementatie slim genoeg is om te zien dat het telkens dezelfde is, dan is het mogelijk sneller, omdat je een referentie minder hebt. Hoe de huidige browserimplementaties ermee omgaan weet ik niet. Daar zul je dan aan moeten meten. Wellicht heb je dat al gedaan

Ik ben best voor programmeren met performance in het achterhoofd, maar als dat niet relevant is, dan is het maar net wat handiger/mooier is. En dat is heel subjectief.

Nee, dat is niet implementatie-afhankelijk, een dergelijke anonymous functie genereerd altijd een nieuwe scope waarbij de gehele scope-chain in memory blijft; dat is by design.