Besoin de précisions sur une leçon JavaScript. (Fonctions du constructeur)

1. C'est une fonction wrapper auto-exécutable. Il appelle automatiquement nextQuestion () pour lancer le processus
2. var n = Math.floor (Math.random () * questions.length); sélectionne une question aléatoire dans votre liste de questions
3. displayQuestion () affiche les informations du deuxième paramètre new Question () comme réponses possibles. Le troisième paramètre est la bonne réponse.
4. L'utilisateur entre sa réponse dans l'invite ("Veuillez sélectionner la bonne réponse."); et si ce n'est pas exit , puis comparez la réponse avec la valeur correcte.
5. Après avoir affiché le code de réponse, appelez keepScore (correct) pour ajouter le score au résultat final.
6. [GOTO # 2] en utilisant nextQuestion();

sc obtient sa valeur en raison de la fermeture. Chaque fois que la fonction imbriquée qui est retournée par score () et l'instruction if if (correct) est vraie, le score est incrémenté. Considérez un extrait général ci-dessous.

function score(){
  var sc = 0;
  return function(){
    sc++;
    console.log(`I am sc of score: ${sc}`);
    return sc;
  }
}

let temp = score();

function wrapper(callback){
  var sc = 0;
  console.log(`I am sc of wrapper: ${sc}`);
  callback();
}

wrapper(temp)
wrapper(temp)
wrapper(temp)
wrapper(temp)

Donc, dans l'extrait ci-dessus, la fonction externe score n'est appelée qu'une seule fois et fait deux choses:

• initialiser une variable sc qui est 0
• fonction de retour dans laquelle sc fera référence à la variable sc créée dans la portée supérieure.

Cette utilisation est juste pour empêcher la création d'une variable globale

Considérez un autre simple extrait de code.

Question.prototype.checkAnswer = function(ans, callback) {
    if (ans === this.correct) {
        console.log('Correct answer!');
        this.displayScore(callback(true));
    } else {
        console.log('Wrong answer. Try again :)');
        this.displayScore(callback(false));
    }        
}

Dans l'extrait de code ci-dessus, la portée parent est la portée globale et la portée enfant est la portée de la fonction. Maintenant, la variable count est présente dans le counter () (même si elle n'est pas déclarée dans counter () ) en raison de la fermeture.

• Maintenant, dans le premier extrait de code, la fonction score () est comme la portée globale (dans le deuxième extrait),
• Dans le premier extrait de code, la fonction renvoyée est return function (correct) {...} est exactement comme la fonction counter () imbriquée dans le deuxième extrait. >
• Et la variable sc est exactement comme la variable count .

Pourriez-vous peut-être expliquer un peu plus le prototype.checkAnswer

Cette méthode prend deux arguments. ans et callback.

Considérez la ligne dans la fonction nextQuestion()

questions[n].checkAnswer(parseInt(answer), keepScore);

Le point un peu délicat pour les non-initiés ici est que la fonction score renvoie une fonction et utilise un fermeture .

// each gets their own instance of
// that inner function with its own
// independent sc variable.
const playerOneScore = score();
const playerTwoScore = score();

playerOneScore(true); // 1
playerOneScore(true); // 2

playerTwoScore(false); // 0
playerTwoScore(true); // 1

Cette ligne:

var keepScore = score();

crée une variable pour contenir le score actuel, puis renvoie une fonction que vous pouvez appeler pour incrémenter cette variable. La variable ne peut pas être déclarée dans la fonction car elle serait recréée à chaque fois que la fonction est appelée:

function score () {
  var sc = 0; // unavailable outside this function

  // return this function to the caller and voila!
  // they now have a self-contained scorekeeper function.
  return function(correct) {
    if (correct) {
      sc++;
    }
    return sc;
  }
}

Mais vous ne voulez pas non plus que la variable soit accessible à tous, donc vous ne voulez pas faire ça non plus:

function score () {
  var sc = 0; // unavailable outside this function

  // a new function that has access to the outer function's sc variable.
  function(correct) {
    if (correct) {
      sc++;
    }
    return sc;
  }
}

Alors que pouvons-nous faire? Nous pouvons:

Premièrement: Créer la variable dans une portée de fonction, où elle est protégée des manigances extérieures:

function score () {
  var sc = 0; // unavailable outside this function
}

Deuxièmement: Créer une autre fonction à l'intérieur du premier qui peut modifier la variable:

// don't want this either.
// score shouldn't be modifiable outside of our keepScore method.
let sc = 0;

function score (correct) {
  if (correct) {
    sc++;
  }
  return sc;
}

// this approach works, but now cheaters can set
// the score outside our scorekeeping function:
sc = 999999; // oh noes! hacks!

Enfin, renvoyer la fonction interne de score () donne aux étrangers un moyen de enregistrez les bonnes réponses sans exposer la variable de score elle-même:

// can't do this. sc gets recreated and reset on every call:
function score (correct) {
  var sc = 0;
  if (correct) {
    sc++
  }
  return sc;
}

Alors maintenant, quand vous faites cela:

var sc = 0;

keepScore est cette fonction interne avec sa propre variable interne sc .

Si vous aviez une édition multijoueur, vous pourriez en obtenir une pour chaque joueur:

XXX

Je pense qu'une fois que vous aurez compris cela, le reste aura beaucoup plus de sens.

Ici, la fonction de score est une fermeture

L'état de sc à l'intérieur du score est initialisé lorsque le score est appelé.

var keepScore = score ();

Maintenant, le keepScore contient la fonction qui est retournée par la fermeture c'est-à-dire

function (correct) {           
        if (correct) {
            sc++; // it has a "closure" over it
        }
        return sc;
    }

qui accepte une valeur booléenne. C'est, keepScore (true) ou keepScore (false)

Maintenant, cette fonction keepScore est transmise pour vérifier la réponse

questions [n] .checkAnswer (parseInt (réponse), keepScore);

Dans la réponse de vérification, si la réponse est correcte, elle passera true au keepScore

callback (true) keepScore (true) code>

Si vous voulez avoir plus de clarté sur la fermeture, vous pouvez parcourir cet article

https://github.com/getify/You-Dont-Know-JS/blob/master /up%20%26%20going/ch2.md#closure