12 häufig gestellte JavaScript-Fragen beantwortet

Seite 1 von 2: 10 häufig gestellte Fragen und Antworten zu JavaScript

JavaScript ist eines der flexibelsten Webdesign-Tools herum, wie unsere Top-Beispiele für JavaScript Artikel zeigt. Aber selbst mit den größten Werkzeugen gibt es immer mehr zu lernen und zu entdecken.

Hier sind 12 Fragen (und Antworten) zu JavaScript, die viele Entwickler verblüfft haben - sogar erfahrene JavaScript-Codierer.

Auf dieser Seite werden häufig gestellte Fragen und Antworten behandelt, einschließlich der häufig gestellten Fragen und Antworten Bewerbungsgespräche . Auf der nächsten Seite werden zwei komplexere Bereiche genauer betrachtet: Verwendung von JavaScript zur Verbesserung der Website-Leistung und Verwendung von zukunftssicherem JavaScript-Code.



01. Was ist prototypische Vererbung und wie nützlich ist sie?

In JavaScript ist fast alles ein Objekt. Jedes Objekt hat einen Prototyp, von dem es Werte und Verhaltensweisen erbt. Wenn ein Objekt keine angeforderte Eigenschaft enthält, sucht JS stattdessen in seinem Prototyp danach. Es setzt die Kette der Prototypen fort, bis es eine Übereinstimmung findet oder einen Fehler zurückgibt.

Dies ist nützlich, wenn Sie Objekte erstellen, die dieselben Werte und Operationen verwenden. Da diese auf einem Prototyp gespeichert sind, muss nur eine Kopie davon vorhanden sein, wodurch der Arbeitsspeicher des Projekts effizient wird.

var parent = {inherit: true} var childA = Object.create(parent); var childB = {}; Object.setPrototypeOf(childB, parent); class childC extends parent {}

Prototypen können Objekten bei der Erstellung mit hinzugefügt werden Object.create () oder danach mit Object.setPrototypeOf () . ES2015 verfügt über ein Schlüsselwort 'class', das bei Verwendung mit 'extended' diesen Wert als Prototyp verwendet.

02. Wie kann JavaScript verwendet werden, um die Zugänglichkeit im Web zu verbessern?

Es ist üblich für moderne Web-Zugänglichkeit Tools, um mit JavaScript und dynamischen Inhalten umgehen zu können. Es kann verwendet werden, um diese Technologien zu unterstützen, solange es als Erweiterung verwendet wird und nicht zum Funktionieren erforderlich ist.

Eine übliche Möglichkeit, Benutzer zu unterstützen, besteht darin, ein nützliches Fokusmanagement bereitzustellen. Ein Kalender sollte beispielsweise in der Lage sein, Tage mit den Pfeiltasten zu durchlaufen, wobei die Auf- und Ab-Tasten jeweils eine Woche überspringen. Es geht nur darum, auf Tastaturereignisse zu warten, während der Fokus innerhalb dieser Komponente liegt.

Wichtige Datenänderungen aufgrund von JavaScript, z. B. Formular-Feedback, sollten auch für Screenreader angekündigt werden. Oft wird dies erreicht, indem ein Container als lebende Region markiert wird.

03. Was ist Ereignisblasen und wie unterscheidet es sich von der Ereigniserfassung?

Sprudelnde Grafik für Javascript-Ereignisse

Die Ereignisdelegierung ist eine Technik, die das Sprudeln von Ereignissen zu ihrem Vorteil nutzt. Durch Hinzufügen eines Listeners zu einem übergeordneten Element werden Entwickler auf Ereignisse für eines seiner untergeordneten Elemente aufmerksam gemacht

Sowohl das Erfassen als auch das Sprudeln von Ereignissen sind Teil eines Prozesses namens 'Ereignisausbreitung', bei dem Browser auf Ereignisse auf der Seite reagieren. Ältere Browser machten früher das eine oder andere, aber heute machen sie alle beides.

Die erste Phase - die Erfassungsphase - erfolgt, sobald ein Ereignis eintritt. Es beginnt auf der obersten Ebene, die je nach Ereignis entweder 'Dokument' oder 'Fenster' ist. Von dort geht es durch und was auch immer darin lebt, bis es das Element erreicht, in dem das Ereignis stattgefunden hat.

Die zweite Phase - die Blasenphase - geschieht dann. Es wiederholt den Vorgang, jedoch in umgekehrter Reihenfolge, beginnend mit dem Element, durch das das Ereignis ausgelöst wurde, und 'sprudelt' bis zum obersten Punkt Element. Beim Hinzufügen von Ereignis-Listenern ist dies die Standardeinstellung.

04. Wie verbessert die Ereignisdelegierung den Code auf Websites mit vielen interaktiven Elementen?

Websites enthalten häufig viele dynamische Inhalte, die sich regelmäßig auf der Seite ändern. Wenn diese Elemente interaktiv sein müssen, muss eine Art Ereignis-Listener diese Interaktionen erfassen. Wenn für jedes Element ein eigener Listener erforderlich wäre, würde dies den Code überladen und die Anforderungen des Browsers erhöhen.

Die Ereignisdelegierung ist eine Technik, die das Sprudeln von Ereignissen zu ihrem Vorteil nutzt. Durch Hinzufügen eines Listeners zu einem übergeordneten Element werden Entwickler auf Ereignisse für eines seiner untergeordneten Elemente aufmerksam gemacht.

parentEl.addEventListener('click', function(e) { if(e.target && e.target.nodeName == 'BUTTON') { // Button clicked } });

Innerhalb des Ereignisrückrufs ist das ursprüngliche Ziel dieses Ereignisses immer das 'Ziel', anhand dessen entschieden werden kann, was als nächstes zu tun ist. Beispielsweise könnte ein Datenattribut eine ID enthalten, um auf eine Objekteigenschaft zu verweisen.

05. Was sind Verschlüsse und wie können sie bei der Organisation von Code hilfreich sein?

Funktionen in JavaScript verwenden die sogenannte 'lexikalische Umgebung', dh sie haben Zugriff auf außerhalb definierte Variablen, auf die innerhalb definierten Variablen kann jedoch nur innerhalb zugegriffen werden.

function outer() { let x = 'Web Designer'; function shout() { alert(`I love ${x}!`); } shout(); }

Berufung äußere() zeigt 'Ich liebe Web Designer!' an, aber wenn 'Shout' oder 'x' außerhalb von referenziert werden äußere() werden beide undefiniert sein. Ein Abschluss ist eine Kombination einer Funktion neben ihrer lexikalischen Umgebung. In diesem Fall ist der Verschluss die 'äußere' Funktion.

Diese sind nützlich, wenn Sie mehrere Komponenten erstellen, da alles, was darin deklariert ist, andere nicht beeinflusst. Sie können verwendet werden, um private Funktionen und Variablen ähnlich wie in anderen objektorientierten Sprachen wie Python zu erstellen. Das Modulmuster verwendet häufig Verschlüsse, um strukturierte Interaktionsmöglichkeiten für Module bereitzustellen.

06. Was bedeutet 'strikt verwenden' am Anfang eines Codeblocks?

ES5 führte eine optionale JavaScript-Variante namens 'Strict Mode' ein. Im strengen Modus würden Macken früherer Versionen eher Fehler auslösen als zu unbeabsichtigtem Verhalten führen.

function strictFunction() { 'use strict'; myVar = 4; //ReferenceError }

Oben greifen wir auf eine Variable zu, die nicht existiert. Außerhalb des strengen Modus würde dies stattdessen myVar zum globalen Bereich hinzufügen, der, wenn wir nicht vorsichtig sind, die zuvor im Skript definierten Funktionen vollständig überschreiben könnte. Im strengen Modus löst dies einen Fehler aus und stoppt jede Zerstörung. ES2015-Module befinden sich standardmäßig im strikten Modus. In mit Funktionen erstellten Abschlüssen kann 'use strict' jedoch sowohl auf Funktionsebene als auch auf eine gesamte Datei angewendet werden.

07. Was bedeutet der Begriff 'Heben' in Bezug auf JavaScript?

JavaScript ist insofern einzigartig, als es vor der Verteilung nicht kompiliert werden muss. Ein Browser kompiliert Skripte so, wie er sie findet, und macht sich Notizen zu Funktionen und Variablen, die darin deklariert sind.

Der Browser führt dann einen zweiten Durchgang durch, um den Code auszuführen, wobei er weiß, wo diese Funktionen und Variablen gelten. Wenn ein Block ausgeführt wird, werden seine Funktions- und Variablendeklarationen an den oberen Rand des Blocks 'gehisst'.

welcome('Matt'); //'Welcome, Matt.' function welcome(name) { return `Welcome, ${name}.`; }

In diesem Beispiel können wir die Begrüßungsfunktion verwenden, wenn sie an den Anfang des Skripts angehoben wird.

08. Was ist der Unterschied zwischen einer Pfeilfunktion und einer regulären Funktion?

ES2015 lieferte viele Änderungen, und eine, die schnell Wirkung zeigte, waren Pfeilfunktionen.

function CountUp() { this.x = 0; setInterval(() => console.log(++this.x), 1000); } var a = new CountUp();

Der Hauptunterschied besteht darin, dass Pfeilfunktionen, obwohl sie kürzer zu schreiben sind, keinen eigenen Wert für 'dies' erstellen. Sie verwenden stattdessen den Wert des umschließenden Blocks. Im obigen Beispiel würde dies einmal pro Sekunde 1, 2, 3 usw. abmelden. Mit einer regulären Funktion wäre this.x undefiniert, sodass NaN protokolliert wird. Der Körper einer Pfeilfunktion wird als Rückgabewert davon angenommen. Dies macht sie nützlich für Versprechen, bei denen Werte weitergegeben werden. Reguläre Funktionen müssen explizit einen Wert zurückgeben oder geben undefiniert zurück.

09. Wo soll ich die Schlüsselwörter 'let' und 'const' anstelle von 'var' verwenden?

Eine weitere grundlegende Änderung mit ES2015 war die Einführung von 'let' und 'const' als alternative Möglichkeiten zur Definition von Variablen. Auf diese Weise deklarierte Variablen sind auf den Block beschränkt, in dem sie definiert wurden. Dies bietet mehr Sicherheit, dass Werte, die in verschiedenen Blöcken erstellt wurden, den Code außerhalb nicht beeinträchtigen.

for(let x=1; x<=3; x++) { console.log(x); // 1, 2, 3} console.log(x); // 'x is not defined'

Wenn sich der Wert der Variablen nicht ändert, verwenden Sie 'const' anstelle von 'let'. Beim Versuch, eine Konstante neu zu definieren, werden Fehler ausgegeben. Objekte und Array-Variablen können sich intern weiterhin ändern, werden jedoch nicht vollständig ersetzt.

Sowohl 'let' als auch 'const' werden nicht wie 'var' gehisst und können daher nicht referenziert werden, bevor sie initialisiert werden. Zwischen dem Beginn des Blocks und der Initialisierung wird als 'zeitliche Totzone' bezeichnet und kann häufig zu Verwirrung führen.

10. Was ist funktionale Programmierung und wie unterscheidet sie sich?

Funktionale Programmiergrafik

Funktionale Programmierung bietet eine andere Denkweise

Es ist eine alternative Möglichkeit, Programme zu erstellen, indem der Anwendungsstatus ausschließlich über Funktionen übergeben wird. Durch die Vermeidung von Nebenwirkungen ist es möglich, leicht verständlichen Code zu entwickeln.

Traditionell werden JavaScript-Projekte mit einer objektorientierten Struktur erstellt. Informationen zum aktuellen Status des Programms befinden sich in Objekten, die aktualisiert werden, wenn sich die Seite ändert.

Funktionale Programmierung bietet eine andere Denkweise. Während Sprachen wie F # es schon seit einiger Zeit verwenden, brachte ES2015 wichtige Methoden in JavaScript, die dies für das Web öffnen.

Alle Arbeiten müssen in 'reinen' Funktionen ausgeführt werden. Dies sind Funktionen, die von Daten außerhalb des Funktionsumfangs nicht betroffen sind. Mit anderen Worten, wenn der Funktion dieselben Werte zur Verfügung gestellt werden, wird immer dasselbe Ergebnis zurückgegeben.

Dies bedeutet auch, dass es keinen gemeinsamen Status zwischen Funktionen geben kann. Jeder Status innerhalb einer Anwendung, der verwendet werden muss, sollte als Parameter an eine Funktion übergeben werden, anstatt direkt von dort aus darauf zuzugreifen.

Schließlich sollte Code vermeiden, dass Werte nach ihrer Erstellung geändert werden. Beispielsweise sollte jede Änderung eines Objekts eine Kopie dieses Objekts mit dem geänderten Wert zurückgeben. Dies dient dazu, Nebenwirkungen zu vermeiden, die Fehler verursachen und das Testen von Code erschweren können.

Nächste Seite: Wie kann ich JS verwenden, um die Leistung meiner Website zu verbessern? und Wie kann ich meinen JavaScript-Code zukunftssicher machen?

  • 1
  • zwei

Aktuelle Seite: 10 häufig gestellte Fragen und Antworten zu JavaScript

Nächste Seite JavaScript: Website-Leistung und Zukunftssicherheit