ES6 verbessertes JavaScript "Defekt" -Problem

Umfang auf Blockebene

ES5 hat keinen Umfang auf Blockebene, nur den globalen Umfang und den globalen Umfang. Aus diesem Grund ist der Umfang der Variablen sehr breit, sodass Sie ihn sofort erstellen müssen, sobald Sie die Funktion eingeben. Dies verursacht den sogenannten variablen Anstieg.

Die Funktion "Variable Improvement" von ES5 verursacht häufig einen Fehler, wenn Sie nicht vorsichtig sind:

1. Die innere Variable deckt die äußere Variable ab

 var tmp = new Date (); Funktion f () {console.log (tmp); if (false) {// Führen Sie undefinedVar tmp = "Hallo Welt";}} aus.

2. Variable Lecks in globale Variablen

 var // 5

In der Vergangenheit verwenden wir oft Schließungen, um dieses Problem zu lösen (z. B. selbst exekutierte Funktionen). Basierend auf diesem Problem hat ES6 einen Umfang auf Blockebene hinzugefügt, sodass keine Funktionen für sich selbst ausgeführt werden müssen.

lass und const

ES6 ist rückwärtskompatibel, und die Aufrechterhaltung der Rückwärtskompatibilität bedeutet, dass das Verhalten des JS -Code auf der Webplattform niemals geändert wird, sodass der von VAR erstellte Variablen -Umfang weiterhin globaler Bereich und Funktionsumfang sein wird. Auf diese Weise kann es auch dann, wenn Sie über einen Block-Ebene-Bereich verfügen, das Problem der "variablen Verbesserung" von ES5 nicht lösen. Daher hat ES6 zwei neue Schlüsselwörter hinzugefügt: let und const.

1.LET

"Let ist eine perfektere Var", es hat bessere Umfangsregeln.

2.Konst

Const erklärt eine schreibgeschützte Konstante. Sobald erledigt wurde, kann der Wert der Konstante nicht geändert werden, aber das von Const deklarierte Objekt kann Eigenschaftenänderungen haben (Objekt -Freeze -Objekt.Freeze).

 const a = []; A.push ('Hallo'); // ausführbare Datei a = ['Dave']; // einen Fehler melden

Sie können auch Object verwenden.

 const foo = Object.freeze ({}); // Im normalen Modus funktioniert die folgende Zeile nicht; // Im strengen Modus meldet die Zeile einen Fehler foo.prop = 123; //

Verwenden Sie LET und const:

• Variablen sind nur innerhalb des Blockebensbereichs gültig, in dem sich die Deklaration befindet

• Eine variable Deklaration kann nur verwendet werden (temporäre Totzone)

• Variablen können nicht wiederholt definiert werden

• Die deklarierte globale Variable, Attribute, die nicht zu globalen Objekten gehören

 var a = 1; Fenster.a // 1let b = 1; Fenster.b // undefiniert

Dieses Schlüsselwort

Wir wissen, dass dies in der ES5 -Funktion auf den Umfang zeigt, in dem sich die Laufzeit befindet. Zum Beispiel

 Funktion foo () {setTimeout (function () {console.log ('id:', this.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 21

Hier erkläre ich eine Funktion foo, die intern eine Verzögerungsfunktion SetTimeout ist, die alle 100 ms druckt. Wir nennen es über foo.call ({id: 42}) und setzen den Umfang für diese Funktion. Es braucht 100 Millisekunden, um tatsächlich auszuführen. Da dies auf den Umfang zeigt, in dem sich die Laufzeit befindet, zeigt dies hier auf das globale Objektfenster, nicht auf die Funktion foo. Hier:

• Verwenden Sie den Aufruf, den Ausführungskontext von FOO so zu ändern, dass der Ausführungskontext der Funktion kein Fenster mehr ist.

• Die SetTimeout -Methode wird unter das Fensterobjekt aufgehängt, sodass dies auf den Umfang der Ausführung hinweist - das Fensterobjekt.

Der Code, der als Timeout bezeichnet wird, wird im globalen Bereich ausgeführt, so

Um dieses Problem zu lösen, besteht unsere übliche Praxis darin, dies anderen Variablen zuzuweisen:

 Funktion foo () {var that = this; setTimeout (function () {console.log ('id:', that.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42

Jetzt hat ES6 die Pfeilfunktion gestartet, um dieses Problem zu lösen.

Pfeilfunktion

Identifier => Ausdruck

 var sum = (num1, num2) => {return num1 + num2; } // äquivalent zu var sum = function (num1, num2) {return num1 + num2;};

• Wenn die Funktion nur einen Parameter hat, können Klammern weggelassen werden

• Wenn die Funktion nur eine Rückgabeanweisung hat, können Zahnspangen und Rücksendungen weggelassen werden

• Wenn die Funktion ein Objekt direkt zurückgibt, müssen Klammern außerhalb des Objekts hinzugefügt werden. (Weil ein leeres Objekt {} und ein leerer Block {} genau gleich aussehen. Sie müssen also die Objektliterale in Klammern einwickeln.)

Als Reaktion auf das Problem dieses Schlüsselworts gibt ES6 den Umfang an, in dem diese Bindung in der Pfeilfunktion definiert ist, anstatt auf den Umfang zu zeigen, in dem sich die Laufzeit befindet. Seit diesem Punkt wurde dieser Punkt festgelegt, was der Einkapselung von Rückruffunktionen förderlich ist.

 Funktion foo () {var that = this; setTimeout (() => {console.log ('id:', that.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42

Hinweis: Die Fixierung, die auf die Pfeilfunktion hinweist. Dies liegt nicht daran, dass ein Mechanismus in der Pfeilfunktion gebunden ist. Der tatsächliche Grund ist, dass die Pfeilfunktion diese überhaupt nicht hat. Die Pfeilfunktion hat diese überhaupt nicht und die interne ist dies im äußeren Codeblock. Dies führt zu:

• Kann nicht als Konstruktor verwendet werden

• Sie können CALL (), Apply (), Bind () und andere Methoden nicht verwenden, um die Richtung davon zu ändern

Klassen und Vererbung

Das traditionelle ECMAScript hat nicht das Konzept der Klassen. Es beschreibt das Konzept der Prototypketten und verwendet Prototypketten als Hauptmethode zur Implementierung der Vererbung. Die Grundidee besteht darin, Prototypen zu verwenden, damit ein Referenztyp die Eigenschaften und Methoden eines anderen Referenztyps erben. Der traditionelle Weg, dieses Verhalten zu erreichen, besteht durch den Konstruktor:

 Funktionspunkt (x, y) {this.x = x; this.y = y;} point.prototype.toString = function () {return '(' + this.x + ',' + this.y + ')';}; var p = neuer Punkt (1, 2);

Hier verfügt der Konstruktorpunkt über ein Prototypobjekt (Prototyp), das einen Zeiger auf Punkt (Konstruktor) enthält, und Instanz P enthält einen internen Zeiger auf das Prototype -Objekt (Prop). Daher wird die gesamte Erbschaft über die Prototypkette implementiert. Weitere Informationen finden Sie in diesem Artikel von My: Prototyp und Konstruktor in JavaScript

Klasse

ES6 bietet einen Schreibstil, der näher an traditionellen Sprachen liegt und das Konzept der Klasse als Vorlage für Objekte vorstellt. Durch das Schlüsselwort der Klasse können Sie eine Klasse definieren. Der Unterricht ist jedoch nur syntaktischer Zucker für das prototypbasierte objektorientierte Muster. Es gibt gemischte Kritiken über die Einführung des Unterrichts, und viele Menschen denken, dass es ein großer Fehler ist, aber für mich ist es ein guter Syntaxzucker, da mich die übliche Art der Erben von Prototypungsketten oft für eine Weile umwickeln kann.

 // Definieren Sie den Klassenklassenpunkt {Konstruktor (x, y) {this.x = x; this.y = y;} toString () {return '(' + this.x + ',' + this.y + ');}} var p = neuer Punkt (1, 2);

• In der Klasse befindet sich eine Konstruktormethode, die die Standardmethode der Klasse ist. Diese Methode wird automatisch aufgerufen, wenn eine Objektinstanz über den neuen Befehl generiert wird. Eine Klasse muss eine Konstruktormethode haben. Wenn nicht explizit definiert, wird standardmäßig eine leere Konstruktormethode hinzugefügt.

• Das dieses Schlüsselwort in der Konstruktormethode repräsentiert ein Instanzobjekt.

• Wenn Sie die Methode der "Klasse" definieren (z. B. im obigen Beispiel), müssen Sie die Schlüsselwortfunktion nicht hinzufügen. Setzen Sie einfach die Funktionsdefinition ein. Zusätzlich gibt es keine Komma -Trennung zwischen den Methoden, wenn ein Fehler angegeben wird, wenn hinzugefügt.

• Wenn Sie es verwenden, verwenden Sie auch den neuen Befehl direkt in der Klasse, der genau der Verwendung des Konstruktors entspricht.

• Alle Methoden einer Klasse sind auf der Prototyp -Eigenschaft der Klasse definiert

Vererbung der Klassen - verlängert sich

Die Vererbung zwischen der Klasse kann durch Erweiterungsschlüsselwort erreicht werden, was viel klarer und bequemer ist als die Vererbung von ES5, indem die Prototypkette geändert wird.

 Class Colorpoint erweitert Punkt {Constructor (x, y, color) {Super (x, y); // Rufen Sie den Konstruktor (x, y) der übergeordneten Klasse (x, y) this.color = color;} toString () {return this.Color + '' + Super.toString () zurück; // Rufen Sie den toString () der übergeordneten Klasse}} auf

• Das Super -Schlüsselwort repräsentiert, wenn er als Funktion (d. H. Super (... Args)) aufgerufen wird, den Konstruktor der übergeordneten Klasse; Wenn sie als Objekt aufgerufen werden (d. H. Super.Prop oder Super.Method ()), repräsentiert die übergeordnete Klasse. Hier repräsentiert es den Konstruktor der übergeordneten Klasse und wird verwendet, um dieses Objekt der übergeordneten Klasse zu erstellen.

• Die Unterklasse muss die Supermethode in der Konstruktor -Methode aufrufen, andernfalls wird ein Fehler beim Erstellen einer neuen Instanz gemeldet. Dies liegt daran, dass die Unterklasse dieses Objekt nicht selbst hat, sondern dieses Objekt der übergeordneten Klasse erbt und es dann verarbeitet. Wenn die Supermethode nicht aufgerufen wird, erhält die Unterklasse dieses Objekt nicht.

Modular

Historisch gesehen hat JavaScript noch nie ein Modulsystem gehabt, und es ist unmöglich, ein großes Programm in kleine voneinander abhängige Dateien aufzuteilen und sie dann auf einfache Weise zusammenzustellen, was ein großes Hindernis für die Entwicklung großer und komplexer Projekte geschaffen hat. Um sich an die Entwicklung großer Module anzupassen, hat die Community einige Modulbeladungslösungen wie CMD und AMD formuliert.

Modulares Schreiben von ES6:

 Import {stat, existiert, readfile} aus 'fs';

Die Essenz des obigen Code besteht darin, 3 Methoden aus dem FS -Modul zu laden, und die anderen Methoden werden nicht geladen. Diese Art der Belastung wird als "Kompilierungszeitbelastung" bezeichnet, dh ES6 kann das Laden der Modul zum Kompilierungszeit vervollständigen, was effizienter ist als die Lademethode des CommonJS-Moduls. Dies führt natürlich auch zur Unfähigkeit, das ES6 -Modul selbst zu verweisen, da es kein Objekt ist.

Die Modulfunktion besteht hauptsächlich aus zwei Befehlen:

•Export

Die externe Schnittstelle zum Angeben des Moduls und der externen Grenzfläche muss eine Eins-zu-Eins-Korrespondenzbeziehung mit den Variablen im Modul herstellen.

 // Methode schreiben Ein Export var m = 1; // Fehler exportieren 1; // Schreibmethode zwei var m = 1; exportieren {m}; // Fehler export m; // methode schreiben drei naming var n = 1; exportieren {n as m};

•Import

Wird verwendet, um die von anderen Modulen bereitgestellten Funktionen einzugeben. Es akzeptiert ein Objekt (in Klammern dargestellt), das den variablen Namen angibt, der aus anderen Modulen importiert werden soll (kann auch unter Verwendung von * insgesamt geladen werden).

String -Interpolation

In der JavaScript -Entwicklung müssen wir häufig solche Vorlagen ausgeben:

 Funktion SayShello (Name) {return "Hallo, mein Name ist"+name+"Ich bin"+getage (18);} Funktion getage (Alter) {return ay;} Sayhello ("Marke") // "Hallo, mein Name ist Marke I. IM 18"

Wir müssen + verwenden, um Zeichenfolgen und Variablen (oder Ausdrücke) zu verkettet. Die Beispiele sind relativ einfach, daher scheinen sie harmlos zu sein, aber sobald sie komplizierter sind, erscheinen sie ziemlich umständlich und unbequem, und diese Verwendung macht uns auch mühsam. In dieser Hinsicht führt ES6 Template -Zeichenfolgen ein, die JS -Werte einfach und anmutig in Zeichenfolgen einfügen können.

Vorlagenzeichenfolge

Für Vorlagenzeichenfolge: es:

• Packen Sie mit Backticks ``;

• Verwenden Sie $ {}, um Werte auszugeben;

• Der Inhalt in $ {} kann jeder JavaScript -Ausdruck sein, daher sind Funktionsaufrufe und arithmetische Operationen legal;

• Wenn ein Wert keine Zeichenfolge ist, wird er in eine Zeichenfolge konvertiert.

• Halten Sie alle Räume, Newlines und Konflikte und geben Sie sie in die Ergebniszeichenfolge aus (mehrere Linienzeichenfolgen können geschrieben werden).

• Verwenden Sie Backticks und Zahnspangen intern, um zu entkommen, und verwenden Sie Backslashes/

Für das obige Beispiel wird die Vorlagenzeichenfolge wie folgt geschrieben:

 Funktion SayShello (Name) {return `Hallo, mein Name ist $ {name} Ich bin $ {getage (18)}`;} Funktion Getage (Alter) {return ay;} Sayhello ("Marke") // "Hallo, mein Name ist Brandi Am 18"

Strenger Modus

Eines der Ziele des strengen Modus ist es, ein schnelleres Debuggen von Fehlern zu ermöglichen. Der beste Weg, um Entwicklern zu debug zu helfen, besteht darin, Fehler zu werfen, wenn bestimmte Muster auftreten, anstatt stillschweigend zu versagen oder ein seltsames Verhalten zu zeigen (häufig im Nichtstreifenmodus stattfindet). Der Code im strengen Modus bringt mehr Fehlermeldungen, die den Entwicklern helfen können, einige Probleme schnell zu bemerken, die sofort gelöst werden müssen. In ES5 ist der strenge Modus optional, aber in ES6 erfordern viele Funktionen die Verwendung des strengen Modus, was uns hilft, ein besseres JavaScript zu schreiben.

Das obige ist das "Defekt" -Problem von ES6 verbessert JavaScript, den der Editor Ihnen vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!