Share
Es ist eine großartige Zeit für JavaScript. Es wird nicht nur zu einer viel angeseheneren Sprache, sondern es wächst auch sprunghaft - sowohl in Bezug auf Beliebtheit als auch auf Merkmale. Je mehr Browser mit der Implementierung der Funktionen des Standards ECMAScript 5th Edition beginnen, wird JavaScript zu einer noch leistungsfähigeren Plattform, auf der Sie entwickeln können. In diesem Tutorial sprechen wir über die neuen Methoden, die Ihnen zur Verfügung stehen.
ECMAScript ist der offizielle Name von JavaScript. Das heißt nicht, dass wir falsch liegen. Es ist nur so, dass der Name "JavaScript" eine Marke von Oracle ist. Deshalb verwendet Ecma International (ursprünglich die European Computer Manufacturers Association - daher ECMA) den Begriff "ECMAScript", um auf den Standard von JavaScript zu verweisen. Die neueste Version dieses Standards ist die fünfte Ausgabe und wurde vor etwas mehr als einem Jahr (am 3. Dezember 2009) genehmigt. Es umfasst eine große Auswahl an großartigen Ergänzungen, und einige davon werden in Browsern angezeigt. Die Implementierungen von ECMAScript 5 heißen JavaScript 1.8.5.
In diesem Tutorial werden wir uns die JavaScript 1.8.5-Funktionen anschauen, die uns in den Firefox 4-Betas zur Verfügung stehen. Sie werden froh feststellen, dass die meisten der neuesten Versionen anderer Browser auch diese haben ... bis auf eine. Diesmal ist es Opera, da im IE9 viele davon enthalten sind.
Diese Methode ist sehr wichtig. es reinigt wirklich die prototypische Vererbung. Früher (in ECMAScript 3rd Edition) würden Sie zum Erstellen eines Objekts und zum Festlegen seines Prototyps Folgendes tun:
Funktion Cat (Name) this.name = Name; this.paws = 4; this.hungry = falsch; this.eaten = []; Cat.prototype = Konstruktor: Cat, play: function () this.hungry = true; Rückkehr "spielen!"; , feed: function (Nahrung) this.eaten.push (Nahrung); this.hungry = falsch; , speak: function () return "Meow";
Bin ich der Einzige, der den Prototyp für seltsam hält? draußen die Konstruktorfunktion? Und das Erben wird noch unübersichtlicher. Mit Object.create, Dinge werden viel einfacher. Das Obige könnte folgendermaßen codiert werden:
var dog = name: "dog", Pfoten: 4, hungrig: falsch, gegessen: null, play: function () this.hungry = true; Rückkehr "spielen!"; , feed: function (food) if (! this.eaten) this.eaten = []; this.eaten.push (Essen); this.hungry = falsch; , sprechen: function () return "Woof!" ; var my_dog = Object.create (Hund);
Was hier los ist, ist folgendes: Ich rufe an object.create, Übergeben Sie ein Objekt, das als Prototyp des neuen Objekts verwendet werden soll Object.create kehrt zurück. Beim Benutzen Object.create, Ich muss mich nicht darum kümmern, den Prototyp separat zu definieren. In der Tat habe ich viel mehr Flexibilität, um zu entscheiden, wie ich Objekte erstellen und erben sollte. Zum Beispiel kann ich das nicht setzen gegessen Array im Prototyp, da ein Array ein Referenzwert ist, also jedes Objekt, aus dem erstellt wird Hund wird das Array teilen. Ich habe mich entschieden, es zu überprüfen, bevor ich es hier verwende, aber ob ich es wickeln wollte Object.create (Hund) in einem make_dog Funktion, ich könnte es da genauso leicht zuordnen.
Das ist es, was großartig ist Object.create; Sie können wählen, wie es geht.
Es gibt einen zweiten Parameter Object.create nimmt; Es ist ein Eigenschaftendeskriptorobjekt. Es ist ein bisschen kompliziert, aber es ist auch ein Teil der nächsten Funktion, die wir uns ansehen werden, also schauen wir uns das an.
Wenn Sie ein Objekt haben, für das Sie eine Eigenschaft definieren möchten, gehen Sie wahrscheinlich folgendermaßen vor:
my_dog.age = 2;
Dies funktioniert in ES5 immer noch einwandfrei, aber wenn Sie eine feinere Steuerung wünschen, können Sie dies mit haben Object.defineProperty. Der erste Parameter ist das Objekt, dem Sie die Eigenschaft zuweisen. Der zweite Parameter ist der Name der Eigenschaft als String. Die letzte Eigenschaft ist das Deskriptorobjekt. So funktioniert das. Es ist (offensichtlich) ein Objekt und kann eine Kombination der folgenden Eigenschaften haben, die alle die hinzugefügte Eigenschaft beschreiben:
Accentsconagua
nicht definiert.wahr. Standardeinstellung bis falsch.wahr. Standardeinstellung bis falsch.falsch.nicht definiert.nicht definiert.Beachten Sie, dass die Standardeinstellungen für die oben genannten booleschen Optionen die umgekehrten sind obj.prop = val Standards. Wissen Sie auch, dass Sie nicht definieren können Wert oder schreibbar wann erhalten oder einstellen definiert sind und umgekehrt.
Also, wie würdest du das benutzen? Versuche dies:
// nimm my_dog von oben Object.defineProperty (my_dog, "age", set: function (age) this.human_years = age * 7;, get: function () return this.human_years / 7;, Enumerable : wahr ); my_dog.age = 2; my_dog.human_years; // 14
Abgesehen von der Tatsache, dass Hundejahre nicht wirklich 7 menschliche Jahre sind, sollten Sie feststellen, dass wir nicht gesetzt haben Wert oder schreibbar hier, weil wir verwenden erhalten und einstellen. Auf diese Funktionen wird nie direkt zugegriffen. Sie werden „magisch“ hinter den Kulissen ausgeführt, wenn Sie eine Eigenschaft zuweisen oder anfordern. In diesem Beispiel verwende ich diese Funktionen, um sie zu behalten Alter und menschliche_jahre in "sync". Wenn Sie nicht möchten, dass der Wert für "other" verfügbar ist, können Sie ihn mit einer anonymen, selbstaufrufenden Funktion ausblenden, indem Sie ihn schließen:
Object.defineProperty (my_dog, "age", (function () var human_years; return set: function (age) human_years = age * 7;, erhalten: function () return human_years / 7;, Aufzählung: wahr ; ()));
Natürlich hindert Sie nichts daran, etwas Dummes zu tun erhalten oder einstellen, Verwenden Sie es also weise.
Sie können eine Form des Eigenschaftsdeskriptorobjekts verwenden, um Objekte mit Objekten Eigenschaften hinzuzufügen Object.create. Tun Sie es wie folgt:
var your_dog = Object.create (Hund, age: get: function () / *… * /, set: function () / *… * /, Aufzählungszeichen: true, gender: value: " weiblich ");
Verwenden Sie einfach den Eigenschaftsnamen als eine Eigenschaft des Deskriptorobjekts. Legen Sie dann die Attribute über ein Objekt im Wert fest.
Wenn Sie mehrere Eigenschaften gleichzeitig definieren möchten, können Sie ein Eigenschaftsbeschreibungsobjekt genauso wie mit verwenden Object.create um sie zu definieren, verwenden Sie Object.defineProperties.
Object.defineProperties (my_dog, age: get: function () / *… * /, set: function () / *… * /, Enumerable: true, gender: value: "female" );
Für den seltenen Fall, in dem Sie kein Objektliteral als zweiten Parameter verwenden, sollten Sie beachten, dass nur die aufzählbaren Eigenschaften des Eigenschaftenobjekts verwendet werden.
Wenn Sie die Besonderheiten einer Eigenschaft erfahren möchten, können Sie diese Funktion verwenden, Object.getOwnPropertyDescriptor. Beachten Sie das "Eigene"; Dies funktioniert nur mit Eigenschaften des Objekts selbst, nicht in der Prototypkette.
var Person = Name: "Joe"; Object.getOwnPropertyDescriptor (Person, "Name"); // konfigurierbar: true, aufzählbar: true, Wert: "Joe", schreibbar: true
Wie Sie sehen, funktioniert dies mit Eigenschaften, die auf die alte und neue Weise festgelegt wurden. Object.getOwnPropertyDescriptor akzeptiert zwei Parameter: das Objekt und den Eigenschaftsnamen als Zeichenfolge.
Wollten Sie schon immer alle Schlüssel eines Objekts erhalten? Jetzt können Sie dies problemlos mit tun Objektschlüssel. Übergeben Sie diese Funktion an ein Objekt, und es wird ein Array mit allen aufzuzeichnenden Eigenschaften dieses Objekts zurückgegeben. Sie können auch ein Array übergeben, und Sie erhalten ein Array der Indizes zurück.
var horse = Name: "Ed", Alter: 4, Beruf: "Springen", Besitzer: "Jim"; var horse_keys = Object.keys (Pferd); // ["Name", "Alter", "Job", "Eigentümer"];
Dieses ist wie Objektschlüssel, außer dass es alle Eigenschaften enthält - sogar die, die nicht zahlreich. An dem längeren Funktionsnamen können Sie erkennen, dass sie die Verwendung davon abhalten. Normalerweise wirst du es wollen Schlüssel stattdessen.
Wenn Sie schon immer eine Funktion erstellen wollten, die keine neuen Parameter akzeptiert, können Sie dies jetzt tun. Führen Sie Ihr Objekt durch Object.preventExtensions, und es werden alle Versuche zum Hinzufügen neuer Parameter abgelehnt. Diese Funktion geht Hand in Hand mit Object.isExtensible, die zurückkehrt wahr wenn Sie das Objekt erweitern können und falsch wenn du nicht kannst.
var product = name: "Foobar", Bewertung: 3,5; Object.isExtensible (Produkt); // true Object.preventExtentions (product); Object.isExtensible (Produkt); // false product.price = "$ 10,00"; // funktioniert nicht product.price; // nicht definiert
Sie sollten alle Eigenschaften des Objekts zum Zeitpunkt Ihrer Ausführung beachten Object.preventExtensions kann noch geändert oder gelöscht werden (vorausgesetzt, ihre Attribute erlauben dies).
Das Versiegeln eines Objekts ist ein Schritt, um Erweiterungen zu verhindern. Mit einem versiegelten Objekt können Sie keine Eigenschaften hinzufügen oder löschen oder Eigenschaften von einem Wert (z. B. einer Zeichenfolge) in einen Accessor (eine Methode) ändern oder umgekehrt. Natürlich können Sie auch weiterhin Eigenschaften lesen und schreiben. Mit können Sie herausfinden, ob ein Objekt versiegelt ist Object.isSealed.
var pet = name: "Browser", Typ: "Hund"; Objekt.Siegel (Haustier); pet.name = "Oreo"; pet.age = 2; // funktioniert nicht pet.type = function () / ** /; // funktioniert nicht delete pet.name; // funktioniert nicht
Einfrieren es noch einen Schritt weiter. Ein eingefrorenes Objekt kann in keiner Weise verändert werden. Es ist schreibgeschützt. Sie können die Unschärfe eines Objekts mit überprüfen, Sie haben es erraten, Object.isFrozen.
var obj = gruß: "Hi!" ; Objekt.Frost (obj); Object.isFrozen (obj); // wahr
Man könnte meinen, es wäre nicht schwer zu bestimmen, dass eine bestimmte Variable ein Array ist. Mit dem funktioniert alles gut Art der Operator. JavaScript-Arrays sind jedoch inkonsistent. Sie sind eigentlich näher aneinandergereihte Objekte (obwohl wir diesen Begriff normalerweise verwenden, um auf Dinge wie zu verweisen Argumente und NodeLists). Mit dieser Funktion können Sie zu 100% sicher sein, dass Sie mit einem Array arbeiten. Übergeben Sie eine Variable, und es wird der Boolean-Wert zurückgegeben.
var names = ["Collis", "Cyan"]; Array.isArray (Namen); // wahr
Weitere Informationen dazu, warum wir diese Funktion benötigen, finden Sie in den unten stehenden Dokumenten.
Dies ist nicht zu groß, aber wenn Sie Datumsangaben in JSON speichern möchten, könnte dies nützlich sein. Datumsobjekte haben jetzt eine tojson Funktion, die das Datum in ein JSON-String-Datum konvertiert.
neues Datum (). toJSON (); // "2010-12-06T16: 25: 40.040Z"
Sie sind wahrscheinlich mit der Verwendung vertraut Anruf und sich bewerben den Wert von neu zuweisen diese in einer Funktion.
var arr1 = [1], 2, 3], arr2 = [4], 5, 6]; Array.prototype.push.apply (arr1, arr2);
Mit diesen Methoden können Sie den Wert von ändern diese innerhalb einer Funktion. Wenn du so etwas oft machen willst, Function.prototype.bind gibt eine neue Funktion mit zurück diese gebunden an alles, was Sie übergeben, so können Sie es in einer Variablen speichern.
var tooltip = text: "Hier klicken um…", overlay = text: "Bitte geben Sie die Anzahl der Teilnehmer ein"; function show_text () // Tut etwas Nützlicheres hier console.log (this.text); tooltip.show = show_text.bind (Tooltip); Tooltip.show (); overlay.show = show_text.bind (overlay); overlay.show ();
Natürlich ist dies nicht das praktischste Beispiel, aber es gibt Ihnen die Idee!
Dies sind die Funktionen von ECMAScript 5th Edition (oder JavaScript 1.8.5), die den Firefox 4-Betas hinzugefügt wurden. Es gibt auch einige andere Änderungen an JavaScript, die von ihnen implementiert werden, die Sie in den Versionshinweisen nachlesen können.
Es gibt jedoch eine Reihe von ECMAScipt 5-Funktionen, die bereits in Firefox 3 und mehreren anderen Browsern unterstützt wurden. Hast du mit irgendwelchen davon gespielt??
Hinweis: Diese sind mit ihrer MDN-Dokumentation verknüpft.
Wenn Sie sehen möchten, welche Browser und Versionen diese Funktionen unterstützen, können Sie diese Kompatibilitätstabelle von Juriy Zaytsev (Kangax) überprüfen. Das Schöne an den meisten dieser Funktionen ist, dass, wenn ein Browser dies nicht unterstützt, Sie in der Regel Unterstützung hinzufügen können, etwa wie folgt:
if (typeof Object.create! == 'function') Object.create = Funktion (o) Funktion F () F.prototype = o; Neues F zurückgeben (); ; // Mit freundlicher Genehmigung von Douglas Crockford: http://javascript.crockford.com/prototypal.html
Die Menge neuer Funktionen, die wir uns hier angesehen haben, ist nur ein kleiner Teil der Güte, die in der 5. Ausgabe zum ECMAScript-Standard hinzugefügt wurde. Gibt es noch andere Funktionen, auf die Sie sich besonders freuen oder vielleicht gerade jetzt? Lass es uns hier in den Kommentaren!
