Discussion :

[guy777]

Bonjour à tous,

Une question qui concerne la syntaxe JavaScript et je voudrais être sûr de bien comprendre...

Dans un programme que j'ai récupéré, je rencontre le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
// premiere ligne
(function(window, undefined) {
   /* code (peu importe) */
}) (window);
// derniere ligne

Si j'ai bien lu les docs sur internet, il s'agit d'une fonction anonyme. Questions:

• Quel est l'intérêt d'une fonction anonyme ?
• Comment y faire appel ?
• Pourquoi une fonction avec comme 2e paramètre un undefined ?
• pourquoi à la fin mettre (window) ?

Merci d'avance

[sekaijin]

Il s'agit d'une "Closure"

le principe est le suivant définir et appeler un fonction anonyme pour isoler du code du reste.

l'intérêt est d'isoler les définition dans un espace clos et de ne pas interférer avec le reste sauf à le faire explicitement.
un exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
//définition des variables toto et titi dans le contexte courant
toto = 45;
titi = 99;
//on va définir un nouveau contexte qui aura ses propres variables
(function() {
  //ici on a un nouveau contexte
  alert('variable toto du contexte principal '+toto);
  // définition d'une variable titi locale au contexte
  var titi = -1;
  alert('variable titi du contexte local '+titi);
})()
// affichage des variables toto et titi du contexte courant
alert(toto+' '+titi);

dans le contexte courant on a toto qui vaut 45 et titi 99
on entre dans le nouveau contexte et on utilise toto du contexte principal mais on redéfini titi à -1
on sort du contexte local et on affiche toto et titi
qui valent toujours 45 et 99

la syntaxe est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function(params...) {
  //code de la closure
})(paramsValues...)

le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function(params...) {
  //code de la closure
}

définit un fonction anonyme
le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(
  //anonymousFunctionDefiition
)()

appelle la fonction anonyme contenue dans les première ()

on peut s'en servir pour définir un singleton avec des membres privés.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
singleton = (function(){
 var privateVar = 45;
 return {
    publicMember : 15;
    getInternalValue : function () {
       return privateVar;
    }
 };
})()

ici la variable privateVar n'est définie que dans le contexte de la closure.
le code JS ne peut y accéder hors de ce contexte
mais le singleton est lui défini dans ce contexte il peut donc y accéder

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
alert(privateVar); //error undefined
alert(singleton.publicMember); // ok 15
alert(singleton.getInternalValue()); // ok 45

A+JYT

[guy777]

Merci de ta réponse rapide, sekaijin.
Avant de la lire, j'étais en train de lire un doc sur les fermetures (en anglais), comme quoi j'étais sur la bonne piste !

Si je comprends bien tout, car ce n'est pas simple au premier abord, cela peut permettre de créer des applications javascript qui "n'empiètent pas" sur le contexte général, et ainsi éviter (par exemple) d'écraser une variable par la réutilisation accidentelle d'un nom de variable déjà défini ...

Une dernière petite question : dans le code que je fourni le (window) permet d'appeler la fonction anonyme en lui passant l'objet window comme premier paramètre et en ignorant le deuxième (undefined sera donc null) ?

J'espère me faire bien comprendre !!!

[sekaijin]

windows est un objet global
il n'est pas nécessaire le passer en paramètre

mais pour que les choses soient claire certain développeurs le passe en paramètres
ainsi on vois clairement que la closure utilise l'objet en question.

effectivement undefined vaudra null dans ton cas.
c'est une façon étrange de faire.
en général on ne le redéfini pas.

le redéfinir de la sorte peut à mon avis poser des pbs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if(undefined == myVar) {
  alert("myVar n'est pas définie");
}else if (null == myVar) {
  alert("myVar est nulle");
} else {
  alert(myVar);
}

si undefined vaut null ce code risque de posé pb

A+JYT

[Loceka]

Une dernière petite question : dans le code que je fourni le (window) permet d'appeler la fonction anonyme en lui passant l'objet window comme premier paramètre et en ignorant le deuxième (undefined sera donc null) ?

Tout à fait.

En Javascript, contrairement à Java et d'autres langages, les fonctions sont uniquement déterminées par leur noms. Le nombre d'argument n'est absolument pas pris en considération.
Ainsi, une fonction avec la signature function test(a, b, c) "répondra" aux appels suivants :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
test();
test("a");
test("a", "b", "c", "d");

Une variable non affectée est alors vue comme "undefined". Une variable supplémentaire peut être accédée via l'attribut arguments. La 4ième variable "d" peut donc être récupérée via test.arguments[3].

EDIT (en complément de sekaijin) :
Lorsqu'on ne passe pas l'argument, il est exactement "undefined" mais peut être vu comme "null" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function test(a) {
	if (a === undefined) {
		alert("totalement undefined");
	} else if (a == undefined) {
		alert("vu comme undefined");
	} else {
		alert("pas undefined");
	}
	if (a === null) {
		alert("totalement null");
	} else if (a == null) {
		alert("vu comme null");
	} else {
		alert("pas null");
	}
	if (a) {
		alert(a);
	} else {
		alert("pas a");
	}
}
 
test("valeur"); // test avec valeur
test(); // test sans valeur
test(null); // test avec valeur null
test(undefined); // test avec valeur undefined

[guy777]

Merci à tous pour vos réponses précises...