Résumé et réponses aux questions sur le concept JS

Cette fois, je vais vous apporter un résumé et des questions-réponses sur les questions conceptuelles JS. Quelles sont les précautions lors de l'utilisation des questions conceptuelles JS. Voici des cas pratiques, jetons un coup d'œil.

Q : Décrivez l'héritage et la chaîne de prototypes en JavaScript et donnez des exemples.

JavaScript est un langage orienté objet basé sur un prototype et ne dispose pas d'un système d'héritage traditionnel basé sur les classes.

En JS, chaque objet fait référence en interne à un objet appelé prototype, et cet objet prototype lui-même fait également référence à son propre objet prototype, et ainsi de suite. Cela forme une chaîne de référence prototype, et la fin de cette chaîne est un objet avec null comme prototype. JS implémente l'héritage via la chaîne de prototypes Lorsqu'un objet fait référence à une propriété qui ne lui appartient pas, la chaîne de prototypes sera parcourue jusqu'à ce que la propriété référencée soit trouvée (ou directement trouvée à la fin de la chaîne, auquel cas la propriété est trouvée. pas de définition).

Un exemple simple :

function Animal() { this.eatsVeggies = true; this.eatsMeat = false; }function Herbivore() {}
Herbivore.prototype = new Animal();function Carnivore() { this.eatsMeat = true; }
Carnivore.prototype = new Animal();var rabbit = new Herbivore();var bear = new Carnivore();console.log(rabbit.eatsMeat);   // logs "false"console.log(bear.eatsMeat);     // logs "true"

Q : Dans l'extrait de code suivant, qu'est-ce qui affichera l'alerte ? Veuillez expliquer votre réponse.

var foo = new Object();var bar = new Object();var map = new Object();
map[foo] = "foo";
map[bar] = "bar";
alert(map[foo]);  // what will this display??

Ici, l'alerte apparaîtra dans la barre. L'objet JS est essentiellement une table de hachage clé-valeur, où la clé est toujours chaîne. En fait, lorsqu'un objet autre qu'une chaîne est utilisé comme clé, aucune erreur ne se produit. JS le convertira implicitement en chaîne et utilisera cette valeur comme clé.

Ainsi, lorsque l'objet map dans le code ci-dessus utilise l'objet foo comme clé, il appellera automatiquement la méthode toString() de l'objet foo, et son implémentation par défaut sera appelée ici. Vous obtiendrez la chaîne "[object Object]". Ensuite, regardez le code ci-dessus et expliquez-le comme suit :

var foo = new Object();
var bar = new Object();
var map = new Object();
map[foo] = "foo";    // --> map["[Object object]"] = "foo";
map[bar] = "bar";    // --> map["[Object object]"] = "bar";                     // NOTE: second mapping REPLACES first mapping!
alert(map[foo]);     // --> alert(map["[Object object]"]);                     // and since map["[Object object]"] = "bar",                     // this will alert "bar", not "foo"!!                     //    SURPRISE! ;-)

Q : Veuillez expliquer les fermetures en JavaScript. Qu'est-ce qu'une fermeture ? Quelles propriétés uniques ont-ils ? Comment et pourquoi les utilisez-vous ? Veuillez donner un exemple.

Une fermeture est une fonction qui contient toutes les variables ou autres fonctions qui sont dans la portée lorsque la fermeture est créée. En JavaScript, les fermetures sont implémentées sous la forme de "fonctions internes", qui sont des fonctions définies dans le corps d'une autre fonction. Voici un exemple simple :

(function outerFunc(outerArg) {  var outerVar = 3;
  (function middleFunc(middleArg) {    var middleVar = 4;
    (function innerFunc(innerArg) {      var innerVar = 5;      // EXAMPLE OF SCOPE IN CLOSURE:
      // Variables from innerFunc, middleFunc, and outerFunc,
      // as well as the global namespace, are ALL in scope here.
      console.log("outerArg="+outerArg+                  " middleArg="+middleArg+                  " innerArg="+innerArg+"\n"+                  " outerVar="+outerVar+                  " middleVar="+middleVar+                  " innerVar="+innerVar);      // --------------- THIS WILL LOG: ---------------
      //    outerArg=123 middleArg=456 innerArg=789
      //    outerVar=3 middleVar=4 innerVar=5
    })(789);
  })(456);
})(123);

Une caractéristique importante des fermetures est que la fonction interne peut toujours accéder aux variables de la fonction externe même après le retour de la fonction externe. En effet, en JavaScript, lorsque les fonctions sont exécutées, elles utilisent toujours la portée qui était en vigueur lors de la création de la fonction.

Cependant, une confusion peut résulter si la fonction interne accède à la valeur de la variable de fonction externe lorsqu'elle est appelée (plutôt que lorsqu'elle est créée). Pour tester la compréhension de cette nuance par le candidat, utilisez l'extrait de code suivant, qui créera dynamiquement cinq boutons et demandera au candidat ce qui sera affiché lorsque l'utilisateur cliquera sur le troisième bouton :

function addButtons(numButtons) {  for (var i = 0; i < numButtons; i++) {    var button = document.createElement(&#39;input&#39;);
    button.type = &#39;button&#39;;
    button.value = &#39;Button &#39; + (i + 1);
    button.onclick = function() {
      alert(&#39;Button &#39; + (i + 1) + &#39; clicked&#39;);
    };    document.body.appendChild(button);    document.body.appendChild(document.createElement(&#39;br&#39;));
  }
}window.onload = function() { addButtons(5); };

Beaucoup de personnes répondront à tort que lorsque l'utilisateur clique sur le troisième bouton, il affichera "Bouton 3 cliqué". En fait, le code ci-dessus contient un bug (basé sur une mauvaise compréhension de la fermeture) qui affichera « Bouton 6 cliqué » lorsque l'utilisateur clique sur l'un des cinq boutons. En effet, au moment où la méthode onclick est appelée (pour n'importe quel bouton), la boucle for est terminée et la valeur de la variable i est déjà 5.
Il peut ensuite être demandé au candidat comment corriger l'erreur dans le code ci-dessus afin qu'il produise le comportement attendu (c'est-à-dire que cliquer sur le bouton n affichera « Bouton n cliqué »). Si le candidat peut donner la bonne réponse, cela signifie qu'il sait utiliser correctement les fermetures, comme indiqué ci-dessous :

function addButtons(numButtons) {  for (var i = 0; i < numButtons; i++) {    var button = document.createElement(&#39;input&#39;);
    button.type = &#39;button&#39;;
    button.value = &#39;Button &#39; + (i + 1);    // HERE&#39;S THE FIX:
    // Employ the Immediately-Invoked Function Expression (IIFE)
    // pattern to achieve the desired behavior:
    button.onclick = function(buttonIndex) {      return function() {
        alert(&#39;Button &#39; + (buttonIndex + 1) + &#39; clicked&#39;);
      };
    }(i);    document.body.appendChild(button);    document.body.appendChild(document.createElement(&#39;br&#39;));
  }
}window.onload = function() { addButtons(5); };

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. des choses passionnantes, veuillez faire attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment utiliser li pour organiser horizontalement

Comment utiliser la page, la zone visuelle et largeur d'écran Attributs élevés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!