JavaScript pour les Jedis

épisode I : au cœur des fonctions, par Wassim Chegham

Le 2015-01-14 12:33:09, par vermine, Expert éminent sénior

Wassim Chegham est un fervent défenseur des technologies Web front et suit de près les versions ECMAScript. Aujourd'hui, il nous propose un article sur les fonctions JavaScript et leurs aspects parfois complexes.

Cet article parle de la boucle d'événements, du callback, des fonctions anonymes, etc.

JavaScript pour les Jedis, épisode I : au cœur des fonctions

N'hésitez pas à lui faire part de vos remarques et commentaires.

Discussion forum

17 commentaires

idiallo

Membre éprouvé

Dans le VIII-E, cas #2, le commentaire devrait être "//=> this === foo" non ?

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var Foo = function() {
 this.counter = 0;
 this.inc = function() {
 this.counter += 1;
 console.log(this);
 };
};

var foo = new Foo();
var element = document.querySelector('#foo');

// cas #1
element.addEventListener('click', foo.inc); //=> this === element

// cas #2
element.addEventListener('click', function(){ foo.inc(); }); //=> this === element

// cas #3
element.addEventListener('click', foo.inc.bind(foo)); //=> this === foo

le 24/01/2015 à 16:20

danielhagnoul

Rédacteur

VIII-D-4. Invocation via apply() ou call()

Je trouve que "l'exemple plus intéressant" requiert une meilleure présentation.

Code JavaScript :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function forevery( list, callback ) { 
    var i = 0, 
        n = list.length; 
  
    for ( i = 0; i < n; i++ ) { 
  
        /* 
         * Exécute fonction( index ) dans le 
         * contexte de l'objet list. 
         * argument : i 
         */  
        callback.call( list, i );  
    }; 
} 
  
forevery( [ 'a', 42, false, {} ], function( index ) { 
  
    // console, touche F12 
  
    console.log( "index = ", index ); 
    console.log( "this = ", this ); 
    console.log( "this[ index ] = ", this[ index ] ); 
    console.log( "this[ index + 1 ] = ", this[ index + 1 ] ); 
    console.log( "this[ index - 1 ] = ", this[ index - 1 ] ); 
  
    /* 
     *  index =  0 
     *  this =  ["a", 42, false, Object] 
     *  this[ index ] =  a 
     *  this[ index + 1 ] =  42 
     *  this[ index - 1 ] =  undefined 
     *   
     *  index =  1 
     *  this =  ["a", 42, false, Object] 
     *  this[ index ] =  42 
     *  this[ index + 1 ] =  false 
     *  this[ index - 1 ] =  a 
     *   
     *  etc. 
     */ 
});

le 14/01/2015 à 22:49

Kaamo
Membre émérite

Point VII. :

la portée d'une variable existe depuis sa déclaration*, et ce jusqu'à la fin de la fonction dans laquelle elle a été déclarée, peu importe l'imbrication des blocs (variables declaration hoisting) ;

Peut-être préciser/insister * avec le mot clé var.

Beau boulot en tout cas. Par contre, je pense que ça permet de devenir un padawan pour le moment. Jedi quand assimilé les closures, tu auras

le 15/01/2015 à 9:46
lysandro
Membre averti

Bien sur, il ne s'agit pas du tout de recommander cette écriture. Mais d'éviter les incompréhensions que vous cherchez justement à lever et par là ne pas faire de différences entre variables et fonctions dans votre article en ce qui concerne la portée et la déclaration puisqu'il n'y en a pas

le 15/01/2015 à 12:24
wchegham
Membre habitué

Merci Xavier pour la pub

le 14/01/2015 à 13:43
SylvainPV
Rédacteur/Modérateur

Merci à toi pour l'article Wassim

Quand vous aurez tout lu attentivement, vérifiez vos connaissances avec le quiz sur les fonctions sorti récemment.

le 14/01/2015 à 18:56

lysandro

Membre averti

Il me semble que c'est inexact. Une variable est utilisable dans sa portée de déclaration comme une fonction. C'est à dire même avant l'apparition de 'var' dans le source (variable declaration hoisting).

Code :

1
2
3
4
5
6
7
function foo () {
	a = 1; // ne crée pas de variable globale
	       // parce que 'a' est déclaré dans la portée (la fonction)
	var a; // déclaration de 'a'
}
foo();
// ici la variable 'a' n'existe pas

le 15/01/2015 à 9:57

wchegham
Membre habitué

Merci messieurs pour vos remarques. Je vais regarder cela à tête reposée ce soir.

le 15/01/2015 à 10:44

wchegham

Membre habitué

Envoyé par lysandro

Code :

1
2
3
4
5
6
7
function foo () {
	a = 1; // ne crée pas de variable globale
	       // parce que 'a' est déclaré dans la portée (la fonction)
	var a; // déclaration de 'a'
}
foo();
// ici la variable 'a' n'existe pas

Cet exemple reste valide mais personnellement je ne recommande pas cette façon de faire.
Si je dois manipuler une variable locale (à une fonction) je la déclare en haut de la fonction. De toute façon c'est ce que fait l'interrupteur JavaScript.

le 15/01/2015 à 11:59

wchegham
Membre habitué

Nous sommes d'accord alors. Je vais essayer de reformuler cette nuance.

le 15/01/2015 à 12:41

Poster une réponse