Discussion :

[manserk]

bonjour, je suis en train d'apprendre javascript plus en profondeur et actuellement il n'y a rien qui n'echappe a google

mais voila il y a une syntaxe que je n'arrive pas a définir

exemple :

Code :

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

1
2
3
4
5
var cookie = (function () {
 
// code
 
})();

quand est ce que le bloc de code sera exécuté et a quoi sert en général cette syntaxe ?

évidement la recherche de function javascript sur google retourne rien donc si vous avez des documents la dessus ce serrait super


ok je vient de tester et donc la fonction s'execute seule ! dans ce cas, quelle est la difference entre

Code :

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

1
2
3
4
5
var f = (function(){
 
// code
 
})();

et

Code :

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

1
2
3
4
5
6
7
function f(){
 
// code
 
}
 
f();

[NoSmoking]

Bonjour,
- dans le cas de la syntaxe var f = (function(){...} tu pourras prototyper f
- dans le cas de la syntaxe function f(){...} tu ne fais qu'un simple nommage de fonction.
cas #1 :

Code :

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

1
2
3
4
5
6
7
8
var test = function(){
  // le code
};
test.prototype.show = function(){
  alert('a.prototype.show Yes!');
};
var a = new( test);
a.show();

dans le cas #2 tu ne peux pas...

edit 1 : j'admets cela reste léger comme explication...
edit 2 : biffage de l'ânerie !

[Invité]

bonjour,

lorsque tu déclares

Code :

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

function g(){}

il y a une pré compilation ou le moteur va rendre la fonction accessible dans le scope ou elle a été définie. genre

Code :

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

1
2
function g(){} //g est accessible partout
function f(){function g(){}}//f est accessible partout, mais g est accessible que dans f

De fait, tu peux écrire

Code :

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

1
2
g('toto');
function g(str) {alert('toto');}

bien que g est définie 'après', elle est accessible lors de l'exécution du code au sein du scope ou elle a été définie (ici l'objet globale window).

Lorsque tu écris

Code :

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

var f=(function(){})();

tu définis f au moment du mot clé var.

Donc si tu écris

Code :

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

1
2
f('toto');
var f=(function(){return function(str){alert(str);}})()

ca va merder.

la syntaxe de la dernière sert à créer une fonction anonyme.
Par exemple tu ne peux pas écrire

Code :

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

function test(){}();//pour appeler test directement.

si tu as des variables avec lesquelles tu ne veux pas polluer ton scope tu crees une fonction anonyme

Code :

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

1
2
3
(function(){
 var toutCeQueJeVEuxOnSenFout='lol';
})();

et tu fais ton stuff dedans

Enfin attention, on peut prototyper une fonction qqsoit le cas.

[Eric2a]

Salut,

Un petit code où nous pouvons voir qu'il est bien entendu possible de passer des arguments à la fonction.

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
27
// Déclaration de l'objet global "myObject" et éxecution avec argument
var myObject=(function(lang){
	// Déclaration de la variable privée "language"
	var language;
 
	// Déclaration de la fonction privée "setLng" et éxecution avec argument
	(function setLng(lang){
		language=(lang=='fr')?'fr':'en';
	})(lang); // Une pierre, deux coups
 
	// Retourne un objet
	return{
		// Déclaration des méthodes publiques
		setLanguage:function(lang){
			setLng(lang);
		},
		showWelcome:function(){
			alert((language=='fr')?'Salut et bienvenue':'Hello and welcome');
		}
	}
})('fr'); // Langue "fr" par défaut
 
// Tests...
myObject.showWelcome(); // Salut...
 
myObject.setLanguage('en');
myObject.showWelcome(); // Hello...

[NoSmoking]

Enfin attention, on peut prototyper une fonction qqsoit le cas.

oùla! je vais me faire descendre à écrire des âneries...
...on peut effectivement prototyper une fonction nommée.

Revenons juste à la différence

Code :

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

1
2
3
var fct = function(){
  // code 
};

fct est une variable qui fait référence à la fonction.

Code :

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

1
2
3
function fct(){
  // code 
};

fct est le nom de la fonction.

et le cas dont nous parle manserk

Code :

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

1
2
3
var fct = (function(){
 // code
})();

fct est le résultat retourné par la fonction anonyme après exécution

[Invité]

Code :

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

1
2
3
4
// Déclaration de la fonction privée "setLng" et éxecution avec argument
(function setLng(lang){
	language=(lang=='fr')?'fr':'en';
})(lang); // Une pierre, deux coups

setLng n'est pas disponible dans le scope de myObject.
Autrement dit ,

Code :

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

1
2
3
setLanguage:function(lang){
	setLng(lang);
},

provoque une erreur sur l'appel de setLng.

[NoSmoking]

NoSmoking 1 : galerien69 1

setLng n'est pas disponible dans le scope de myObject.

la fonction est bel et bien disponible...à preuve le code fourni par Eric2a tourne...

l'écriture

Code :

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

1
2
3
(function setLng(lang){
	language=(lang=='fr')?'fr':'en';
})(lang); // Une pierre, deux coups

indique qu'une fois la fonction définie celle ci est exécutée

nota : je pense qu'il va falloir acheter/lire JavaScript : Gardez le meilleur !

[Invité]

lol le 1-1
attention, il va peut-etre se transformer en décisif!

Code :

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

(function test(){console.log('lol')})(); test();

tourne la première pas la seconde...

[Watilin]

Chez moi j'ai une erreur :

Erreur : setLng is not defined

Alors pour dissiper le mystère je vais tout de suite donner le nom de cette chose : c'est une fermeture lexicale. On utilise aussi le terme anglais, closure.

Pour creuser un peu dans la structure du langage, faut regarder les parenthèses :

Code JS :

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

(function() { … })();

Les parenthèses vertes encadrent la déclaration de notre fonction, ce qui forme un ensemble parenthèses + fonction, que l'interpréteur va considérer comme une expression. Ceci a pour effet intéressant de provoquer l'interprétation immédiate de la fonction.

En rouge, nous avons les parenthèses habituelles qui servent à appeler une fonction. Ainsi, la fonction qui vient d'être interprétée est à présent exécutée. Ensuite, comme elle faisait partie d'une expression, elle n'est pas gardée en mémoire, peu importe qu'elle ait été nommée ou non.

Comme l'a dit galerien69, les closures permettent de protéger ses variables. En effet, les variables locales déclarées dans la fonction sont inaccessibles depuis l'extérieur. Du moins… En théorie ! Car un phénomène étrange se produit parfois :

Code JS :

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

1
2
3
4
5
6
7
var f = (function() {
	var x = 0;
	function addX( y ) {
		x += y;
	}
	return addX;
})();

Là, nous avons une fonction locale, addX, qui a réussi à s'échapper du contexte local de la fonction anonyme. Elle est à présent référencée par la variable f. Voyons ce qui se passe :

Code JS :

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

1
2
3
f(3); // 3
f(4); // 7
f(2) // 9

La variable locale x est toujours vivante ! En fait, quand une fonction sort d'une closure, l'interpréteur garde dans un coin une référence sur l'ensemble des variables locales, pour pouvoir les réutiliser. Et ces variables restent en mémoire tant que la fonction n'est pas détruite.

Moi je trouve que ça ressemble à un objet avec des variables privées, mais chacun voit ce qu'il veut

[Eric2a]

"Une pierre, deux coups !"

Tu parles

Je donne la pierre pour me faire lapider et donne le baton pour reçevoir les coups

J'aurais codé ça...

Code :

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

1
2
3
(function UglyFunc(data){
	document.write( eval( data ) );
})(dataFromExternalWebSite);

C'était pareil


<justification type="tentative" status="honteux" cause="IE notamment">

En fait, quand j'ai vu que le (désormais pseudo-) code ci-dessous fonctionnait, je me suis dit "Tiens ?! Ca marche !"

Code :

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

1
2
3
(function setLng(lang){
	language=(lang=='fr')?'fr':'en';
})(lang); // Une pierre, deux coups

J'aurais du spécifier que je n'ai testé que sur IE8.

</justification>

Opera (et je présume tous les autres aussi) réagit comme il faut en renvoyant une erreur.

[manserk]

Merci c'est plus clair pour moi maintenant

même si a la premiere lecture ça l'était pas

[Bovino]

@watilin

Code :

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

1
2
3
4
5
6
7
var f = (function() {
	var x = 0;
	function addX( y ) {
		x += y;
	}
	return addX;
})();

Ici, la variable globale f va recevoir le résultat renvoyé par

Code :

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

1
2
3
4
5
6
7
(function() {
	var x = 0;
	function addX( y ) {
		x += y;
	}
	return addX;
})();

à savoir la fonction addX elle-même. Or la fonction addX contient dans son scope la variable x dont elle a besoin pour s'exécuter, donc le garbage collector doit préserver x, mais qui ne sera accessible que par f

[Watilin]

Certes !
Mais le garbage-collector ne peut pas savoir quelles variables sont susceptibles de se trouver dans le scope de la fonction, notamment à cause de l'existence d'eval, ou encore si la closure contient des objets qui se référencent les uns les autres. Du coup il doit garder toutes les variables.

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
var f = (function() {
	var x = 3;
	var y = 'mca';
	var reponse = 42;
	function surprise( nomVar ) {
		return eval(nomVar);
	}
	return surprise;
})();
 
alert(f('reponse'));

[Sharcoux]

Chez moi j'ai une erreur :

Code :

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

1
2
3
4
5
6
7
var f = (function() {
	var x = 0;
	function addX( y ) {
		x += y;
	}
	return addX;
})();

t'es sûr que ça marcherait pas mieux avec :

Code :

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

1
2
3
4
5
6
7
var f = (function() {
	var x = 0;
	function addX( y ) {
		return x += y;
	}
	return addX;
})();

[NoSmoking]

J'aurais du spécifier que je n'ai testé que sur IE8.

j'ai également testé avec le navigateur que j'avais sous la main, à savoir IE7, et aucun doute il n'y a qu'avec IE que cela fonctionne.

Il semblerait que nous soyons en présence d'une fuite de mémoire et que la référence soit maintenue.

[Watilin]

Attention, tant qu'il reste une référence, ce n'est pas une fuite !

[Invité]

De toute façon, IE est une référence

[Eric2a]

Ayant WinXP, je ne peux pas tester IE9. Je voudrais savoir par curiosité si ce dernier renvoie aussi function comme ses prédécesseurs au lieu de undefined.

Code :

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

1
2
3
4
(function test(){
	return;
})();
alert('typeof test = ' + typeof test);

Merci

[NoSmoking]

cette fuite de mémoire reste bien inférieure à la mienne

Attention, tant qu'il reste une référence, ce n'est pas une fuite !

c'est une façon de voir les choses, mais attendu qu'une fonction expression, "ne survit pas", voir ce qu'en dit la "spécification"...
...IE dans ce cas ne libère pas la mémoire, néanmoins il est capable de se resservir de l'objet crée, et c'est en quoi effectivement on peut ne pas parler de réelle fuite de mémoire.

edit to Eric2A, navré pas de IE9 pour moi non plus...

[RomainVALERI]

Merci à tous pour cette intéressante discussion, mais j'avoue que j'ai eu un léger choc en lisant ce détail dans le post initial...

évidement la recherche de function javascript sur google retourne rien

Recherche : function javascript

Environ 145 000 000 résultats (0,10 secondes)

Mais bon ça n'a plus d'importance...