Zusammenfassung und Antworten auf Fragen zum JS-Konzept

Dieses Mal werde ich Ihnen eine Zusammenfassung und Fragen und Antworten zu JS-Konzeptfragen geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von JS-Konzeptfragen?

F: Beschreiben Sie die Vererbung und die Prototypenkette in JavaScript und geben Sie Beispiele.

JavaScript ist eine prototypbasierte objektorientierte Sprache und verfügt über kein traditionelles klassenbasiertes Vererbungssystem.

In JS verweist jedes Objekt intern auf ein Objekt namens Prototyp, und dieses Prototypobjekt selbst verweist auch auf sein eigenes Prototypobjekt und so weiter. Dies bildet eine Prototyp-Referenzkette, und das Ende dieser Kette ist ein Objekt mit Null als Prototyp. JS implementiert die Vererbung über die Prototypenkette. Wenn ein Objekt auf eine Eigenschaft verweist, die nicht zu ihm selbst gehört, wird die Prototypenkette durchlaufen, bis die referenzierte Eigenschaft gefunden wird (oder direkt am Ende der Kette gefunden wird, in diesem Fall ist die Eigenschaft). keine Definition).

Ein einfaches Beispiel:

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"

F: Was wird im folgenden Codeausschnitt angezeigt? Bitte erläutern Sie Ihre Antwort.

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??

Hier erscheint eine Warnmeldung. Das JS-Objekt ist im Wesentlichen eine Schlüsselwert-Hash-Tabelle, wobei der Schlüssel immer String ist. Wenn ein anderes Objekt als ein String als Schlüssel verwendet wird, tritt tatsächlich kein Fehler auf, der es implizit in einen String konvertiert und diesen Wert als Schlüssel verwendet.

Wenn also das Kartenobjekt im obigen Code das Foo-Objekt als Schlüssel verwendet, ruft es automatisch die toString()-Methode des Foo-Objekts auf und seine Standardimplementierung wird hier aufgerufen. Sie erhalten die Zeichenfolge „[object Object]“. Schauen Sie sich dann den obigen Code an und erklären Sie ihn wie folgt:

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! ;-)

F: Bitte erläutern Sie Abschlüsse in JavaScript. Was ist eine Schließung? Welche einzigartigen Eigenschaften haben sie? Wie und warum verwenden Sie sie? Bitte geben Sie ein Beispiel.

Ein Abschluss ist eine Funktion, die alle Variablen oder andere Funktionen enthält, die sich beim Erstellen des Abschlusses im Gültigkeitsbereich befinden. In JavaScript werden Abschlüsse in Form von „inneren Funktionen“ implementiert, bei denen es sich um Funktionen handelt, die im Hauptteil einer anderen Funktion definiert sind. Hier ist ein einfaches Beispiel:

(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);

Ein wichtiges Merkmal von Abschlüssen ist, dass die innere Funktion auch nach der Rückkehr der äußeren Funktion noch auf die Variablen der äußeren Funktion zugreifen kann. Dies liegt daran, dass Funktionen in JavaScript bei der Ausführung immer noch den Gültigkeitsbereich verwenden, der zum Zeitpunkt der Erstellung der Funktion gültig war.

Allerdings kann es zu Verwirrung kommen, wenn die innere Funktion beim Aufruf (und nicht beim Erstellen) auf den Wert der äußeren Funktionsvariablen zugreift. Um zu testen, ob der Kandidat diese Nuance versteht, verwenden Sie den folgenden Codeausschnitt, der dynamisch fünf Schaltflächen erstellt und den Kandidaten fragt, was angezeigt wird, wenn der Benutzer auf die dritte Schaltfläche klickt:

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); };

Viele Leute werden das falsch beantworten Wenn der Benutzer auf die dritte Schaltfläche klickt, wird „Schaltfläche 3 angeklickt“ angezeigt. Tatsächlich enthält der obige Code einen Fehler (basierend auf einem Missverständnis des Schließens), der „Schaltfläche 6 angeklickt“ anzeigt, wenn der Benutzer auf eine der fünf Schaltflächen klickt. Dies liegt daran, dass zum Zeitpunkt des Aufrufs der onclick-Methode (für eine beliebige Schaltfläche) die for-Schleife abgeschlossen ist und der Wert der Variablen i bereits 5 beträgt.
Als Nächstes können Sie den Kandidaten fragen, wie er den Fehler im obigen Code beheben kann, damit er das erwartete Verhalten erzeugt (d. h. wenn Sie auf Button n klicken, wird „Button n angeklickt“ angezeigt). Wenn der Kandidat die richtige Antwort geben kann, bedeutet das, dass er weiß, wie man Verschlüsse richtig verwendet, wie unten gezeigt:

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); };

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen Bitte achten Sie auf andere verwandte Themen im Artikel über die chinesische PHP-Website!

Empfohlene Lektüre:

Wie man li zum horizontalen Anordnen verwendet

Wie man die Seite, den visuellen Bereich und bedient Bildschirmbreite Hohe Attribute

Das obige ist der detaillierte Inhalt vonZusammenfassung und Antworten auf Fragen zum JS-Konzept. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!