JavaScript avancé : portée, fermetures et this

La portée lexicale et la chaîne de portées, la fermeture qui garde ses variables, la valeur de this selon la manière dont la fonction est appelée, et le this perdu dans un rappel.

  • 29 cartes
  • 5 thèmes
  • Gratuit

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Mises en situation
  5. Comprendre

Quelques cartes du deck

  • Portée lexicale : de quoi s'agit-il ?

    Voir la réponse

    Règle selon laquelle les noms visibles dans une fonction dépendent de l'endroit où elle est écrite dans le code, pas de l'endroit d'où on l'appelle.

    Le moteur sait donc, rien qu'en lisant le fichier, quelle variable chaque nom désigne.

  • Qu'affiche ce programme dans la console ?

    ```js
    function fabrique() {
    let n = 0;
    return () => ++n;
    }
    const c1 = fabrique();
    const c2 = fabrique();
    console.log(c1(), c1(), c2());
    `

    • 1 2 1
    • 1 2 3
    • 1 1 1
    • 0 1 0
    Voir la réponse

    1 2 1

    Chaque appel de fabrique() crée son propre n. c1 incrémente le sien (1, puis 2), c2 en a un autre qui repart de 0 et donne 1.

  • let et const ont une portée de …, alors que var a une portée de ….

    Voir la réponse

    let et const ont une portée de bloc, alors que var a une portée de fonction.

    Une variable var déclarée dans un if ou une boucle reste visible dans toute la fonction ; let disparaît à l'accolade fermante.

  • Chaîne de portées : de quoi s'agit-il ?

    Voir la réponse

    Suite des portées emboîtées explorées dans l'ordre, de la plus interne à la plus externe, jusqu'à trouver le nom cherché.

    Une variable interne de même nom en masque une externe (c'est l'ombrage) ; si aucune portée ne contient le nom, c'est un ReferenceError.

  • Dans une méthode de classe, on écrit charger().then(this.saluer). Quand la promesse se résout, la console affiche « TypeError: Cannot read properties of undefined (reading 'nom') » dans saluer, qui lit this.nom. Quelle réparation convient ?

    • Passer this.saluer() à then
    • Remplacer this.nom par nom dans saluer
    • Passer this.saluer.bind(this) à then
    • Passer saluer sans le préfixe this.
    Voir la réponse

    Passer this.saluer.bind(this) à then

    this.saluer donne la fonction seule, détachée de son objet : then l'appelle comme une fonction simple et, le code d'une classe étant en mode strict, this vaut undefined. bind(this) (ou une fonction fléchée () => this.saluer()) le garde. Écrire this.saluer() lancerait la méthode tout de suite et passerait son résultat à then.