Un modo mai visto di inizializzare un listener

[American]

Salve, cercando su internet un esempio di implementazione dell'API google maps mi sono imbattuto in questo codice

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));

se togliamo il corpo della funzione che crea casino, si può notare come la dichiarazione sia fatta in questo modo

google.maps.event.addListener(marker, 'click', (function() {} ) (marker, i) );

Sono due cose che non riesco a capire: 1) che senso hanno questi parametri racchiusi tra parentesi tonde?
2) perchè tra function e (marker, i) non c'è nessuna virgola?


Questo il sito dove ho trovato il codice (che cmq funziona quindi è semanticamente esatto)
http://wrightshq.com/playground/plac...p-using-api-3/

[Al_katraz984]

si chiamano "self-executing anonimous function"

come vedi la funzione accetta 2 argomenti, marker e i, (function(marker, i){})(marker, i) <---- questo passa marker e i alla funzione anonima

[American]

Scusa, marker e i non vengono già passati nella parte che ho evidenziato in blu?

(function(marker, i){})(marker, i)

[Al_katraz984]

e invece si

il costrutto delle self-executing function è:

(function() { })()

se vuoi passare dei parametri

(function(par) { })(par)

[Al_katraz984]

lo stack di inizializzazione delle funzioni per il listener che hai postato è un po' complesso da capire, forse è quello che ti frega:

questo

google.maps.event.addListener(marker, 'click', (function anonimousF(marker, i) {
            return function Closure() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

genera:

// settaggio variabili
var marker = google.maps.Marker;
var i = contatore;

// la self-executing function si carica prima di qualsiasi cosa
anonimousF(marker, i);

// al completamento dell'onload della pagina

// setto l'evento click alla mappa una volta caricato il DOM
google.maps.event.addListener(marker, 'click', function Closure() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            } );

//quando l'utente clicca richiama
Closure();

solo per capire i passaggi

[American]

Grazie per la spiegazione, ma continuo a ritenerlo un discreto casino

Per fare un po' di chiarezza, la sintassi per la self exec func è propria del linguaggio? Cioè, così come si dichiarano funzioni scrivendo function qwerty(){} così si dichiarano self exec func scrivendo (function(par) { })(par) ?

[mxa]

Immagino che il listener sia definito in un ciclo for, quindi ti serve creare una clousure per racchiudere il valore di i, altrimenti il contenuto della info Window sarà sempre quello corrispondente all'ultimo valore di i indipendentemente da che marker cliccki.

[American]

Immagino che il listener sia definito in un ciclo for, quindi ti serve creare una clousure per racchiudere il valore di i, altrimenti il contenuto della info Window sarà sempre quello corrispondente all'ultimo valore di i indipendentemente da che marker cliccki.

esattamente, infatti facendo alcune prove è proprio così.
Quello che mi chiedo tuttavia è, questo modo di inizializzare la funzione per generare la clousure
(function(par) { })(par)

è stata creata appositamente dagli ingegneri javascript, oppure è un semplice escamotage ricavato su quel già di buono offrono i metodi standard del linguaggio?

Ho creato un codice più semplice da capire

<div id="uno">uno</div>
<div id="due">due</div>
<div id="tre">tre</div>

<script>

function prova(a)
{alert(a)}

for (var i=1; i<4; i++)
{
  if (i==1)
  {
     $('#uno').bind("click", function(){prova(i)} ) //restituisce 4 che è il valore che la variabile globale i ha assunto alla fine del ciclo
  }
  else if (i==2)
  {
      $('#due').bind("click", function(i){return function(){prova(i)}}(i) ) //restituisce correttamente 2 in quanto genero una clousure con la variabile i
  }
   else if (i==3)
  {
      $('#tre').bind("click", function(i){return function(){prova(i)}}(i) ) //restituisce correttamente 3 in quanto genero una clousure con la variabile i
  }
}

</script> 

Ora a ben vedere function(i){return function(){prova(i)}}(i) potrebbe essere visto in questo modo:
la prima function anonima genera (ritorna) un'ulteriore function anonima, seguita poi da ulteriori parentesi tonde con incluso un argomento.
ciò che ne risulta a conti fatti è la dichiarazione di una funzione
function(i) {prova(i)}

Se così fosse, è appunto questo che intendo per escamtoage

[Al_katraz984]

http://www.crockford.com/javascript/private.html prova a vedere se questo ti aiuta...

Non parla delle self-executing ma chiarisce alcuni concetti basilari sulle funzioni.

Il costrutto

( function() { } )()

non è un workaround, è un costrutto che permette di inizializzare la funzione (in questo caso anonima) prima di qualsiasi altra cosa..

[American]

Ok quindi è un costrutto insito del linguaggio
ma non potevano fare in modo che avesse una sintassi del genere

( function(params) { } )
anziché
( function() { } )(params)

??