JavaScript pour les Jedis

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

Le 15 janvier 2015, par vermine

0PARTAGES

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.

Une erreur dans cette actualité ? Signalez-le nous !

Votre nom :

Votre e-mail :

Décrivez l'erreur que vous souhaitez porter à notre connaissance :

17 commentaires

Poster une réponse Signaler un problème

idiallo

Membre éprouvé

Le 24/01/2015 à 16:20

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

Code :

Sélectionner tout

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

danielhagnoul

Rédacteur

Le 14/01/2015 à 22:49

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

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

Code JavaScript :

Sélectionner tout

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. 
     */ 
});

Kaamo

Membre émérite

Le 15/01/2015 à 9:46

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

lysandro

Membre averti

Le 15/01/2015 à 12:24

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

wchegham

Membre habitué

Le 14/01/2015 à 13:43

Merci Xavier pour la pub

SylvainPV

Rédacteur/Modérateur

Le 14/01/2015 à 18:56

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.

lysandro

Membre averti

Le 15/01/2015 à 9:57

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 :

Sélectionner tout

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

wchegham

Membre habitué

Le 15/01/2015 à 10:44

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

wchegham

Membre habitué

Le 15/01/2015 à 11:59

Envoyé par lysandro

Code :

Sélectionner tout

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.

wchegham

Membre habitué

Le 15/01/2015 à 12:41

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

Poster une réponse Signaler un problème

Contacter le responsable de la rubrique JavaScript

Partenaire : Hébergement Web

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

JavaScript pour les Jedis

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