Sind Sie neu in der JS-Programmierung? Wenn ja, sind Sie möglicherweise frustriert. Alle Sprachen haben ihre Eigenheiten – aber Entwickler, die von einer serverseitigen Sprache auf Basis starker Typisierung wechseln, können verwirrt sein. So ging es mir vor ein paar Jahren, als ich gezwungen wurde, Vollzeit-JavaScript-Entwickler zu werden, und es gab viele Dinge, von denen ich wünschte, ich hätte sie gleich zu Beginn gewusst. In diesem Artikel werde ich einige meiner Macken teilen und hoffentlich kann ich einige der Erfahrungen, die mir viel Kopfzerbrechen bereitet haben, mit Ihnen teilen. Dies ist keine vollständige Liste – nur eine unvollständige Liste – aber hoffentlich öffnet sie Ihnen die Augen für die Macht dieser Sprache und für Dinge, die Sie vielleicht einmal als Hindernis angesehen haben.
Wir werden uns die folgenden Techniken ansehen:
Gleich Punkt vs. Klammern Funktionskontext -
Funktionsdeklaration vs. Funktionsausdruck
Benannte vs. anonyme Funktion Funktionsausdruck sofort ausführen typeof vs Object.prototype.toString
1.) Gleichheit
Da ich aus C# komme, bin ich mit dem Vergleichsoperator == sehr vertraut. Werttypen (oder Zeichenfolgen) sind gleich, wenn sie denselben Wert haben. Gleichheit des Referenztyps erfordert die gleiche Referenz. (Wir gehen davon aus, dass Sie den ==-Operator nicht überladen oder Ihren eigenen Gleichheitsoperator und die GetHashCode-Methode implementieren.) Ich bin überrascht, warum JavaScript zwei Gleichheitsoperatoren hat: == und ===. Anfangs verwendete der größte Teil meines Codes ==, daher hatte ich keine Ahnung, was JavaScript für mich tat, als ich Folgendes ausführte:
-
var x = 1;
if(x == "1") {
console.log("YAY! Sie sind gleich!");
-
}
Ist das dunkle Magie? Wie ist die Ganzzahl 1 gleich der Zeichenfolge „1“?
In JavaScript gibt es Gleichheit (==) und strikte Gleichheit (===). Der Gleichheitsoperator führt einen strikten Gleichheitsvergleich durch, nachdem er beide Operanden auf denselben Typ gezwungen hat. Im obigen Beispiel wird also die Zeichenfolge „1“ in die Ganzzahl 1 umgewandelt. Dieser Vorgang geschieht im Hintergrund und wird dann mit der Variablen x verglichen.
Strikte Gleichheit führt keine Typkonvertierung durch. Wenn die Operandentypen unterschiedlich sind (z. B. Ganzzahl und Zeichenfolge), sind sie nicht kongruent (streng gleich).
var x = 1;
// Strikte Gleichheit, die Typen müssen gleich sein
if(x === "1") {
console.log("Leider schreibe ich das nie auf die Konsole");
>
if(x === 1) {
console.log("YES! Strict Gleichheit FTW.") >Vielleicht denken Sie über all die Schrecken nach, die durch mögliche Besetzungen verursacht werden. Wenn Sie davon ausgehen, dass eine solche Besetzung in Ihrer Referenz vorkommt, kann es sehr schwierig sein, herauszufinden, wo das Problem liegt. Das ist nicht verwunderlich und deshalb empfehlen erfahrene JavaScript-Entwickler immer die Verwendung strikter Gleichheit.
Je nachdem, aus welcher anderen Sprache Sie kommen, haben Sie das vielleicht schon einmal so gesehen (das ist einfach Unsinn). ).
// Den FirstName-Wert des Personenobjekts abrufen
var name = person.firstName;
- Wussten Sie jedoch, dass es auch mithilfe von Klammern auf Mitglieder eines Objekts verweisen kann? Zum Beispiel:
- var name = person["firstName"];
Warum ist das nützlich? Während Sie die meiste Zeit die Punktnotation verwenden, gibt es einige Fälle von Klammern, die dazu führen können, dass bestimmte Methoden dies nicht tun. Ich werde zum Beispiel oft große Switch-Anweisungen in einen Zeitplan umgestalten, also etwa so:
Warum funktioniert das? Möglicherweise sind Sie mit der Verwendung von Punkten bereits vertrauter, es gibt jedoch einige Sonderfälle, in denen nur die Klammernotation verfügbar ist. Zum Beispiel refaktoriere ich die switch-Anweisung oft (schneller) in eine Nachschlagetabelle, die tatsächlich so aussieht:
var doSomething = function(doWhat) {
switch(doWhat) {
-
case „doThisThing“:
// mehr Code...
Pause;
// mehr Code... -
Pause;
case „doThisOtherThing“:
// mehr Code....
Pause;
🎜>
- Standard:
Pause;
}
}
可以转化为像下面这样:
var thingWeCanDo = {
doThisThing : function() { /* behaviour */ },
doThatThing : function() { /* behaviour */ },
doThisOtherThing : function() { /* behaviour */ },
default : function() { /* behaviour */ }
};
var doSomething = function(doWhat) {
var thingToDo = ThingsWeCanDo.hasOwnProperty(doWhat) ? doWhat: „default“
ThingsWeCanDo[thingToDo]();
}
使用switch并没有错误（并且在许多情况下，如果被迭代多次并且非常关注性能Schalter许你的属性延时求值.
3.) 函数上下文
已经有一些伟大的博客发表了文章,正确理解了JavaScript中的dieses上下文（在文章的结尾我会给出一些不错的链接）,但它确实的列表需要学习一组规则.不幸的是,我早起读到的许多解释只是增加了我的困惑.因此我试图简明扼要的做出解释.
第一——首先考虑全局情况（Global）
默认情况下, 直到某些原因改变了执行上下文, 否则this的值都指向全局对象.在浏览器中,那将会是window对象（或在node.js中为global）。
第二——方法中的this值
当你有一个对象,其有一个函数成员，冲父对象调用这方法, this的值将指向父对象.例如:
var marty = {
Vorname: „Marty“,
Nachname: „McFly“,
timeTravel: function(year) {
console.log(this.firstName + " " + this.lastName + " is Zeitreise bis " + Jahr);
}
}
-
marty.timeTravel(1955);
/ / Marty McFly reist durch die Zeit ins Jahr 1955
Sie wissen wahrscheinlich bereits, dass Sie auf die timeTravel-Methode eines Marty-Objekts verweisen und einen neuen Verweis darauf erstellen können ein anderes Objekt. Dies ist tatsächlich eine sehr leistungsstarke Funktion von JavaScript, die es uns ermöglicht, auf das Verhalten (Aufruffunktionen) verschiedener Instanzen zu verweisen.
var doc = {
Vorname: „Emmett ",
Nachname: „Brown“,
}
doc.timeTravel = marty.timeTravel;
Also – was passiert, wenn wir doc.timeTravel(1885) aufrufen?
doc.timeTravel(1885);
/ / Emmett Brown reist durch die Zeit ins Jahr 1885
Noch einmal – er übt dunkle Magie aus. Nun ja, nicht wirklich. Denken Sie daran: Wenn Sie eine Methode aufrufen, ist dieser Kontext das übergeordnete Objekt des übergeordneten Objekts der aufgerufenen Funktion.
Was passiert, wenn wir eine Referenz auf die marty.TimeTravel-Methode speichern und dann unsere gespeicherte Referenz aufrufen? Mal sehen:
var getBackInTime = marty.timeTravel;
getBackInTime(2014);
// undefiniert undefiniert ist eine Zeitreise ins Jahr 2014
Warum ist es „undefiniert undefiniert“? ! Statt „Matry McFly“?
Stellen wir eine Schlüsselfrage: Was ist das übergeordnete/Containerobjekt, wenn wir unsere getBackInTime-Funktion aufrufen? Wenn die Funktion getBackIntTime im Fenster vorhanden ist, rufen wir sie als Funktion und nicht als Objektmethode auf. Wenn wir eine Funktion wie diese aufrufen – ohne Containerobjekt – ist dieser Kontext das globale Objekt. David Shariff hat eine tolle Beschreibung dafür:
Immer wenn wir eine Funktion aufrufen, müssen wir sofort nach links von den Klammern schauen. Wenn sich auf der linken Seite der Klammer eine Referenz befindet, wird der an die aufrufende Funktion übergebene Wert als das Objekt bestimmt, zu dem die Referenz gehört. Andernfalls handelt es sich um ein vollständiges Objekt.
Da dieser Kontext von getBackInTime ein Fenster ist, gibt es keine Eigenschaften „firstName“ und „lastName“ – dies erklärt, warum wir „undefiniert undefiniert“ sehen.
Wir wissen also, dass der direkte Aufruf einer Funktion – ohne Containerobjekt – das Ergebnis dieses Kontexts das globale Objekt ist. Allerdings habe ich auch gesagt, dass ich bereits wusste, dass unsere getBackInTime-Funktion im Fenster vorhanden ist. Woher weiß ich das? Okay, anders als oben, wo ich getBackInTime in einen anderen Kontext eingebunden habe (wir sprachen über die sofortige Ausführung von Funktionsausdrücken), wurden alle von mir deklarierten Variablen dem Fenster hinzugefügt. Überprüfung über die Chrome-Konsole:
Es ist Zeit, den Hauptpunkt davon zu besprechen Einer der Bereiche, in denen es nützlich ist: die Verarbeitung von Abonnementereignissen.
Dritter (nur eine Erweiterung von #2) – dieser Wert beim asynchronen Aufrufen von Methoden
Stellen wir uns also vor, wir möchten unsere marty.timeTravel-Methode aufrufen wenn jemand auf eine Schaltfläche klickt:
var flux = document.getElementById("flux-capacitor");
flux.addEventListener("click", marty.timeTravel);
In Wenn der Benutzer im obigen Code auf die Schaltfläche klickt, sehen wir „undefiniert, undefiniert ist eine Zeitreise zu [Objekt MouseEvent]“. Was? OK – zunächst einmal besteht das ganz offensichtliche Problem darin, dass wir unserer timeTravel-Methode den Parameter „year“ nicht zur Verfügung gestellt haben. Stattdessen abonnieren wir diese Methode direkt als Event-Handler und der MouseEvent-Parameter wird als erstes Argument an den Event-Handler übergeben. Das lässt sich leicht beheben, aber das eigentliche Problem ist, dass wir wieder „undefiniert undefiniert“ sehen. Seien Sie nicht hoffnungslos – Sie wissen bereits, warum das passiert (auch wenn Sie es noch nicht wissen). Ändern wir unsere timeTravel-Funktion so, dass sie Folgendes ausgibt, damit wir die Fakten herausfinden können:
marty.timeTravel = function(year) {
console.log(this.firstName + " " + this.lastName + " is time travel to " + year);
console.log(this);
};
Wenn wir nun auf diese Schaltfläche klicken, wird in Ihrer Browserkonsole eine Ausgabe ähnlich der folgenden angezeigt:
Wenn die Methode aufgerufen wird, gibt das zweite console.log diesen Kontext aus – was eigentlich das Schaltflächenelement ist, das wir für das Ereignis abonniert haben. Sind Sie überrascht? Genau wie zuvor – als wir marty.timeTravel der getBackInTime-Variablen zugewiesen haben – wird der Verweis auf marty.timeTravel im Event-Handler gespeichert und aufgerufen, aber das Containerobjekt ist kein Marty-Objekt mehr. In diesem Fall wird es asynchron beim Klickereignis der Schaltflächeninstanz aufgerufen.
Also – ist es möglich, dies auf das gewünschte Ergebnis einzustellen? Absolut! In diesem Fall ist die Lösung sehr einfach. Anstatt marty.timeTravel direkt im Event-Handler zu abonnieren, verwenden Sie eine anonyme Funktion als Event-Handler und rufen Sie marty.timeTravel in der anonymen Funktion auf. Dadurch kann auch das Problem fehlender Jahresparameter behoben werden.
flux.addEventListener("click", function(e) {
marty.timeTravel(someYearValue);
});
Durch Klicken auf die Schaltfläche werden Informationen ähnlich der folgenden auf der Konsole ausgegeben:
Erfolg! Aber warum ist das in Ordnung? Überlegen Sie, wie wir die timeTravel-Methode aufrufen. In unserem ersten Beispiel eines Schaltflächenklicks haben wir einen Verweis auf die Methode selbst im Event-Handler abonniert, sodass sie nicht vom übergeordneten Marty aufgerufen wurde. Im zweiten Beispiel ist dies die anonyme Funktion des Button-Elements, und wenn wir marty.timeTravel aufrufen, rufen wir es von seinem übergeordneten Objekt marty auf, also ist dies marty.
Viertens – dieser Wert im Konstruktor
Wenn Sie den Konstruktor zum Erstellen einer Objektinstanz verwenden, ist dieser Wert innerhalb der Funktion ein neu erstelltes Objekt. Zum Beispiel:
var TimeTraveler = function(fName, lName) {
this.firstName = fName;
-
this.lastName = lName;
// Konstruktorfunktionen geben das
// neu erstelltes Objekt für uns zurück, es sei denn
// wir geben gezielt etwas anderes zurück
};
var marty = new TimeTraveler("Marty", "McFly");
console.log(marty.firstName + " " + marty.lastName);
-
// Marty McFly
Anrufen, bewerben und bindenAnruf
Sie wundern sich vielleicht, dass es im obigen Beispiel keine Sprachniveaufunktion gibt, die das ermöglicht ermöglicht es uns: Wird dieser Wert der aufrufenden Funktion zur Laufzeit angegeben? du hast Recht. Die im Funktionsprototyp vorhandenen Call- und Apply-Methoden ermöglichen es uns, die Funktion aufzurufen und diesen Wert zu übergeben.
Der erste Parameter der Aufrufmethode ist dieser, gefolgt von der Parametersequenz der aufgerufenen Funktion:
-
someFn.call(this, arg1, arg2, arg3);
Der erste Parameter von apply ist ebenfalls dieser, gefolgt von by Array der verbleibenden Parameter:
someFn.apply(this, [arg1, arg2, arg3]);
Unsere Doc- und Marty-Instanzen können alleine durch die Zeit reisen, aber Einstein (Einstein) braucht ihre Hilfe, um die Zeitreise abzuschließen. Fügen wir also unserer Doc-Instanz eine Methode hinzu, damit Doc Einstein bei seiner Zeitreise helfen kann.
doc.timeTravelFor = function(instance, year) {
-
this.timeTravel.call(instance, year);
// Wenn Sie apply verwenden, verwenden Sie die folgende Syntax
// this.timeTravel.apply(instance, [year]);
};
Jetzt kann es Einstein teleportieren:
-
var einstein = {
Vorname: „Einstein“,
Nachname: „(der Hund)“
};
doc.timeTravelFor(einstein, 1985);
// Einstein (der Hund) reist durch die Zeit 1985
Ich weiß, dass dieses Beispiel etwas weit hergeholt ist, aber es reicht aus, um Ihnen die Leistungsfähigkeit der Anwendung von Funktionen auf andere Objekte zu zeigen .
Es gibt noch eine weitere Verwendung dieser Methode, die wir noch nicht entdeckt haben. Fügen wir unserer Marty-Instanz eine goHome-Methode als Verknüpfung zu this.timeTravel(1985) hinzu.
marty.goHome = function() {
this.timeTravel(1985);
}
Wir wissen jedoch, dass, wenn wir marty.goHome als Click-Event-Handler der Schaltfläche abonnieren, der Wert davon die Schaltfläche sein wird – und leider ist dies bei Schaltflächen nicht der Fall eine timeTravel-Methode. Wir können es mit der obigen Methode lösen – verwenden Sie eine anonyme Funktion als Event-Handler und rufen Sie die obige Methode darin auf – aber wir haben eine andere Option – Bindefunktion:
flux.addEventListener("click", marty.goHome.bind(marty));
Die Bindungsfunktion gibt tatsächlich eine neue Funktion zurück und der Wert dieser neuen Funktion wird entsprechend den von Ihnen angegebenen Parametern festgelegt. Wenn Sie Browser niedrigerer Versionen unterstützen müssen (z. B. Versionen unter ie9), benötigen Sie möglicherweise den Shim der Bindefunktion (oder, wenn Sie jQuery verwenden, können Sie stattdessen $.proxy verwenden, beide Unterstriche). und lodash Provide_ .bind-Methode).
Es ist wichtig zu bedenken, dass, wenn Sie die Bindungsmethode direkt auf dem Prototyp verwenden, eine Instanzmethode erstellt wird, die die Vorteile der Prototypenmethode umgeht. Das ist kein Fehler, machen Sie es sich einfach klar. Mehr zu diesem Thema habe ich hier geschrieben.
4.) Funktionsausdruck vs. Funktionsdeklaration
Für die Funktionsdeklaration ist das Schlüsselwort var nicht erforderlich. Tatsächlich, wie Angus Croll sagte: „Es hilft, sie als Geschwister von Variablendeklarationen zu betrachten.“ Zum Beispiel:
Funktion timeTravel(year) {
console.log(this.firstName + " " + this.lastName + " ist eine Zeitreise nach " + Jahr);
} Der Funktionsname timeTravel im obigen Beispiel ist nicht nur im Bereich sichtbar, in dem er deklariert ist, sondern auch innerhalb der Funktion selbst (dies ist sehr nützlich für rekursive Funktionsaufrufe). Bei der Funktionsdeklaration handelt es sich im Wesentlichen um eine benannte Funktion. Mit anderen Worten, das Namensattribut der obigen Funktion ist timeTravel.
Ein Funktionsausdruck definiert eine Funktion und weist sie einer Variablen zu. Typische Anwendungen sind wie folgt:
var someFn = function() {
console.log("I like to express myself...");
}; 也可以对函数表达式命名——然而，不像函数声明，命名函数表达式的名字仅在它自身函数体内可访问：
var someFn = function iHazName() {
console.log("I like to express myself...");
if(needsMoreExpressing) {
iHazName(); // 函数的名字在这里可以访问
}
};
// 你可以在这里调用someFn()，但不能调用iHazName()
someFn();
Wir können nicht umhin, Funktionsausdrücke und zu erwähnen Funktionsdeklarationen „hochziehen“ – Funktions- und Variablendeklarationen werden vom Compiler an den oberen Rand des Gültigkeitsbereichs verschoben. Wir können das Heben hier nicht im Detail erklären, aber Sie können zwei tolle Erklärungen von Ben Cherry und Angus Croll lesen.
5.) Benannte vs. anonyme Funktion
Basierend auf unserer Diskussion gerade haben Sie vielleicht vermutet, dass es sich bei einer „anonymen“ Funktion tatsächlich um eine Funktion ohne a handelt Namensfunktion. Die meisten JavaScript-Entwickler werden den ersten Parameter schnell als anonyme Funktion identifizieren:
someElement.addEventListener("click", function(e) {
// I' Ich bin anonym! Ebenso ist unsere Methode marty.timeTravvel auch eine anonyme Funktion:
var marty = {
Vorname: „Marty“,
Nachname: „McFly“,
timeTravel: function(year) {
-
console.log(this.firstName + " „ + this.lastName + „ ist eine Zeitreise nach „ + Jahr);
}
6.) Sofortige Ausführung von Funktionsausdrücken
Zuerst geben wir einen Funktionsausdruck ein – aber weisen ihm keine Variable zu – und sehen, was passiert:
Syntaxfehler – Dies wird als Funktionsdeklaration betrachtet und es fehlt ein Funktionsname. Um es jedoch zu einem Ausdruck zu machen, setzen wir es einfach in Klammern:
Nachdem wir es in ein umgewandelt haben Ausdruck, die Konsole gibt uns eine anonyme Funktion zurück (denken Sie daran, dass wir ihr keinen Wert zuweisen, der Ausdruck jedoch einen Wert zurückgibt). Wir wissen also, dass „Funktionsausdruck“ Teil von „Funktionsausdruck sofort aufrufen“ ist. Für die Funktion „Auf Ausführung warten“ rufen wir den zurückgegebenen Ausdruck auf (genau wie wir andere Funktionen aufrufen), indem wir nach dem Ausdruck weitere Klammern hinzufügen:
„Aber warte, Jim! (bezieht sich auf den Autor) Ich glaube, ich habe diesen Anruf schon einmal gesehen.“ Tatsächlich haben Sie es vielleicht gesehen – dies ist die juristische Syntax (bekanntermaßen die bevorzugte Syntax von Douglas Crockford)
Beide Methoden funktionieren, aber ich empfehle Ihnen dringend, es hier zu lesen.
OK, großartig – jetzt wissen wir, was IIFE ist – und warum sollten wir es verwenden?
Es hilft uns, den Umfang zu kontrollieren – ein sehr wichtiger Teil jedes JavaScript-Tutorials! Viele der Beispiele, die wir zuvor gesehen haben, wurden im globalen Maßstab erstellt. Dies bedeutet, dass das Fensterobjekt (vorausgesetzt, die Umgebung ist ein Browser) viele Eigenschaften hat. Wenn wir alle unseren JavaScript-Code auf diese Weise schreiben würden, würden wir schnell eine Menge (übertriebene) Variablendeklarationen im globalen Bereich ansammeln und den Fenstercode verunreinigen. Selbst unter den besten Umständen ist es ein schlechter Rat, viele Details in einer globalen Variablen offenzulegen, aber was passiert, wenn der Name der Variablen mit dem Namen einer vorhandenen Fenstereigenschaft übereinstimmt? Die Fenstereigenschaft wird überschrieben!
Wenn beispielsweise Ihre Lieblingswebsite „Amelia Earhart“ eine Navigatorvariable im globalen Bereich deklariert, ist hier das Ergebnis vor und nach dem Festlegen:
Ups!
Natürlich ist es schlecht, wenn globale Variablen verschmutzt werden. JavaScript verwendet den Funktionsbereich (nicht den Blockbereich, was sehr wichtig ist, wenn Sie von C# oder Java kommen!). Die Möglichkeit, unseren Code vom globalen Bereich zu trennen, besteht also darin, einen neuen Bereich zu erstellen, was wir mit IIFE tun können Implementierung, da der Inhalt im eigenen Funktionsumfang liegt. Im folgenden Beispiel zeige ich Ihnen den Wert von window.navigator in der Konsole und erstelle dann einen IIFE (sofort ausgeführter Funktionsausdruck), um das Verhalten und die Daten von Amelia Earhart zu umschließen. Nachdem das IIFE abgeschlossen ist, wird ein Objekt als unser „Programm-Namespace“ zurückgegeben. Die Navigatorvariable, die ich im IIFE deklariere, überschreibt nicht den Wert von window.navigator.
Als zusätzlichen Bonus ist das IIFE, das wir oben erstellt haben, das Modulmuster in JavaScript der Erleuchtung. Ich werde am Ende Links zu einigen der Modulmuster einfügen, die ich untersucht habe.
7.) 'typeof'-Operator und 'Object.prototype.toString'
Irgendwann müssen Sie in einigen Fällen The überprüfen Art des an die Funktion übergebenen Arguments oder etwas Ähnliches. Die Art des Operators wäre die offensichtliche Wahl, sie ist jedoch kein Allheilmittel. Was passiert beispielsweise, wenn wir den Operator „typeof“ für ein Objekt, ein Array, eine Zeichenfolge oder einen regulären Ausdruck aufrufen?
Nicht schlecht – zumindest können wir Strings von Objekten, Arrays und regulären Ausdrücken unterscheiden, oder? Glücklicherweise können wir mit verschiedenen Methoden genauere Typinformationen erhalten. Wir werden die Methode Object.prototype.toString verwenden und die zuvor erwähnte Aufrufmethode anwenden:
Warum verwenden wir die toString-Methode für Object.prototype? Weil Bibliotheken von Drittanbietern oder Ihr eigener Code möglicherweise die toString-Methode der Instanz überschreiben. Durch Object.prototype können wir das ursprüngliche toString-Verhalten der Instanz erzwingen.
Wenn Sie wissen, welcher Typ von zurückgegeben wird, müssen Sie keine zusätzlichen Prüfungen durchführen (z. B. müssen Sie nur wissen, ob es sich um eine Zeichenfolge handelt oder nicht). In diesem Fall Die Verwendung von typeof ist sehr gut. Wenn Sie jedoch zwischen Arrays und Objekten, regulären Ausdrücken und Objekten usw. unterscheiden müssen, verwenden Sie Object.prototype.toString.
|
