Discussion :

[Chafiq Qassim]

Bonjour, j'ai repris JS depuis peu et je bloque sur les closures c'est encore vague.
Voilà ce que j'ai compris: chaque variable déclarée ou paramètre d'une fonction mère pourront être utilisées dans les fonctions filles mais j'aimerais comprendre avec les contextes d'exécutions, le cheminement des variables... Voilà 2 fonctions pour faire la traditionnelle todoList içi todo et index sont récupéré via les closures par createTodoElement
Merci d'avance pour les éclaircissements

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
const displayTodo = () => {
  const todosNode = todos.map((todo, index) => {
    if (todo.editMode) {
      return createTodoEditElement(todo, index);
    } else {
      return createTodoElement(todo, index);
    }
  });
  ul.innerHTML = "";
  ul.append(...todosNode);
};

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
const createTodoElement = (todo, index) => {
  const li = document.createElement("li");
  const buttonDelete = document.createElement("button");
  buttonDelete.innerHTML = "Supprimer";
  const buttonEdit = document.createElement("button");
  buttonEdit.innerHTML = "Editer";
  buttonDelete.addEventListener("click", (event) => {
    event.stopPropagation();
    deleteTodo(index);
  });
  buttonEdit.addEventListener("click", (event) => {
    event.stopPropagation();
    toggleEditMode(index);
  });
  li.innerHTML = `
        <span class="todo ${todo.done ? " done" : ""}"></span>
        <p>${todo.text}</p>
        <button>Supprimer<button>
    `;
  li.addEventListener("click", (event) => {
    toggleTodo(index);
  });
  li.append(buttonEdit, buttonDelete);
  return li;
};

[Gobble]

Je vais me risquer a expliquer les closures même si je crois que vu ton exemple tu as saisi, chaque fonction enfant appelée hérite du contexte de fonction parent au moment de son execution.
exemple trivial :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var name = 'jean eude';  // context objet global
 
 
function test( ){
    // contexte function a accès au contexte parent
 
        console.log(name)
}
 
test(); // console log 'jean eude'

exemple de capture de variable du contexte parent pour utilisation a posteriori :

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
 
function coucou(prenom){
 
var text = 'coucou'+prenom; // variable locale capturée 
 
var sayCoucou = function(){
 
console.log(text); 
}
 
return sayCoucou;
 
}
 
var mafonc = coucou('bob');
mafonc(); // console log coucou bob car la var text locale est dans la closure

Ici Sexe et Message sont des closures mais pas name.

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
function Human( name ){
 
    var sexe = "male"; // variable locale capturée 
    this.getSexe = function(){
        return sexe;
    }
    this.getName = function(){
        return name;
    }
    this.message =  `${name} est de sexe ${sexe}`; // variable locale capturée 
 
    this.getMessage = function(){
 
        return this.message;
    }
 
 
}
 
var bob = new Human('Bob'); // appel au constructeur
 
 
bob.getSexe() // acces par une closure car var sexe est dans la portée de la fonction Human au moment de l'execution
bob.getName(); // ce n'est pas une closure car name est passé en param, il n'est pas dans la portée au moment de l'execution
console.log(bob.getMessage()) // acces par une closure car var message est defini dans la portée lors de l'execution.

Dans des cas pratique, on peut imaginer un traitement en JS sur le DOM, on voudrait faire une fonction qui crée une animation sur des divs mais de manière indépendante :

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
function animateThisDiv(elementID){
 
    var elem = document.getElementById(elementID);
    var loop = 0;
 
    var timer = setInterval(function( ){
 
        if(loop < 50){
            // traitement sur la div
            loop++
        }else{
            clearInterval(timer);
 
            //on accède à loop via une closure, loop est defini dans la portée parente et est donc indépendant. 
            // on accède à timer également  via une closure
        }
 
    }, 10)
 
}
 
animateThisDiv("idDIv1"); // l'animation sur la DIV 1 est indépendante car les variables loop et timer sont définis au moment ou la fonction est appelée, autrement dit a chaque appel de la fonction ,une nouvelle closure est crée 
animateThisDiv("idDIv2"); // l'animation sur la DIV 2 est indépendante