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

Le , par vermine

0PARTAGES

4  0 


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 !

Avatar de idiallo
Membre éprouvé https://www.developpez.com
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
3  0 
Avatar de danielhagnoul
Rédacteur https://www.developpez.com
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. 
     */ 
});
1  0 
Avatar de Kaamo
Membre émérite https://www.developpez.com
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
1  0 
Avatar de lysandro
Membre averti https://www.developpez.com
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
1  0 
Avatar de wchegham
Membre habitué https://www.developpez.com
Le 14/01/2015 à 13:43
Merci Xavier pour la pub
0  0 
Avatar de SylvainPV
Rédacteur/Modérateur https://www.developpez.com
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.
0  0 
Avatar de lysandro
Membre averti https://www.developpez.com
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
0  0 
Avatar de wchegham
Membre habitué https://www.developpez.com
Le 15/01/2015 à 10:44
Merci messieurs pour vos remarques. Je vais regarder cela à tête reposée ce soir.
0  0 
Avatar de wchegham
Membre habitué https://www.developpez.com
Le 15/01/2015 à 11:59
Citation Envoyé par lysandro Voir le message
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
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.
0  0 
Avatar de wchegham
Membre habitué https://www.developpez.com
Le 15/01/2015 à 12:41
Nous sommes d'accord alors. Je vais essayer de reformuler cette nuance.
0  0 
Contacter le responsable de la rubrique JavaScript

Partenaire : Hébergement Web