Share
Det är en bra tid för JavaScript. Inte bara blir det ett mycket mer respekterat språk, men det växer också i språng - både i popularitet och funktioner. När fler webbläsare börjar implementera funktionerna i ECMAScript 5: e utgåvan, blir JavaScript en ännu kraftfullare plattform för dig att utvecklas vidare. I denna handledning talar vi om de nya metoderna som är tillgängliga för dig.
ECMAScript är det officiella namnet på vad vi alla kallar JavaScript. Det betyder inte att vi har fel; det är bara att namnet "JavaScript" är ett varumärke som tillhör Oracle; så Ecma International (ursprungligen European Computer Manufacturers Association-därmed ECMA) använder termen "ECMAScript" för att referera till standarden för JavaScript. Den senaste versionen av denna standard är 5: e utgåvan, och den godkändes för drygt ett år sedan (den 3 december 2009). Det omfattar ett stort utbud av bra tillägg, och flera av dem börjar dyka upp i webbläsare. Implementeringen av ECMAScript 5 kallas JavaScript 1.8.5.
I denna handledning ska vi titta på JavaScript 1.8.5-funktionerna som är tillgängliga för oss i Firefox 4-betorna. Du kommer gärna att upptäcka att de flesta av de senaste versionerna av andra webbläsare har dessa också ... förutom en. Den här gången är det Opera, eftersom IE9 har inkluderat många av dessa.
Denna metod är en mycket viktig en; det rensar verkligen prototypal arv. Tidigare (i ECMAScript 3rd edition), för att skapa ett objekt och ställa dess prototyp, skulle du göra något så här:
funktion Cat (namn) this.name = name; this.paws = 4; this.hungry = false; this.eaten = []; Cat.prototype = konstruktör: Cat, play: function () this.hungry = true; återgå "spela!"; , mata: funktion (mat) this.eaten.push (mat); this.hungry = false; , tala: funktion () returnera "Meow";
Är jag den enda som tycker att det ser konstigt ut att ha prototypen utanför konstruktörfunktionen? Och ärvandet blir ännu mer messig. Med Object.create, saker blir mycket enklare. Ovanstående kan kodas så här:
var hund = namn: "hund", tassar: 4, hungrig: falsk, ätit: null, spela: funktion () this.hungry = true; återgå "spela!"; , mata: funktion (mat) om (! this.eaten) this.eaten = []; this.eaten.push (mat); this.hungry = false; , tala: funktion () returnera "Woof!" ; var my_dog = Object.create (hund);
Vad som händer här är det här: Jag ringer object.create, passerar det ett objekt att använda som prototypen för det nya objektet som Object.create återkommer. När man använder Object.create, Jag behöver inte oroa mig för att definiera prototypen separat. Faktum är att jag har mycket mer flexibilitet att bestämma hur man ska gå om att skapa och ärva objekt. Till exempel kan jag inte sätta uppäten array på prototypen, eftersom en array är ett referensvärde, så varje objekt skapat från hund kommer att dela den matrisen. Jag har bestämt mig för att kontrollera det innan jag använde det här, men om jag ville gå ihop Object.create (hund) i en make_dog funktion, jag skulle kunna tilldela det där lika lätt.
Det är så bra Object.create; du kan välja hur man gör det.
Det finns en andra parameter som Object.create tar; Det är ett objekt för egenskapsdeskriptor. Det är lite komplicerat, men det är också en del av nästa funktion vi ska titta på, så låt oss kolla in det.
Om du har ett objekt som du vill definiera en egenskap på, gör du förmodligen det på följande sätt:
my_dog.age = 2;
Detta fungerar fortfarande bra i ES5, men om du vill ha mer finkorrigerad kontroll kan du få det med Object.defineProperty. Den första parametern är det objekt du tilldelar fastigheten på. Den andra parametern är egenskapens namn, som en sträng. Den slutliga egenskapen är descriptorobjektet. Så här fungerar det. Det är (självklart) ett objekt och det kan ha en kombination av följande egenskaper, som alla beskriver egenskapen vi lägger till:
Accentsconagua
odefinierad.Sann. Standard till falsk.Sann. Standard till falsk.falsk.odefinierad.odefinierad.Observera att standardvärdena för de booleska alternativen ovan är omvända av det gamla obj.prop = val standarder. Också, vet att du inte kan definiera värde eller skrivbar när skaffa sig eller uppsättning definieras och vice versa.
Så hur skulle du använda det här? Prova detta:
// antar my_dog ovanifrån Object.defineProperty (my_dog, "age", set: funktion (ålder) this.human_years = age * 7;, få: funktion () return this.human_years / 7;, talbar : Sann ); my_dog.age = 2; my_dog.human_years; // 14
Förutom att hundår inte är riktigt 7 år, bör du märka att vi inte satte in värde eller skrivbar här, för att vi använder skaffa sig och uppsättning. Dessa funktioner är aldrig tillgängliga direkt. De kör "magiskt" bakom kulisserna när du tilldelar eller begär en egendom. I det här exemplet använder jag dessa funktioner för att behålla ålder och human_years i "synkronisering". Om du inte vill ha "andra" -värdet tillgängligt, kan du använda en anonym funktion med självuppringning för att dölja den med stängning:
Objekt.defineProperty (my_dog, "age", (funktion ) var human_years; return set: function (age) human_years = ålder * 7;, få: funktion () return human_years / 7;, uppräkningsbar: Sann ; ()));
Självklart finns inget för att hindra dig från att göra något dumt inuti skaffa sig eller uppsättning, så använd det klokt.
Du kan använda en form av egenskapsbeskrivningsobjektet för att lägga till egenskaper till objekt med Object.create. Gör så här:
var your_dog = Object.create (hund, ålder: get: function () / * ... * /, set: function () / * ... * /, uppräknare: true, gender: value: " kvinna" );
Använd bara egenskapsnamnet som egenskap för beskrivningsobjektet. Ange sedan attributen via ett objekt i värdet.
Om du vill definiera flera egenskaper samtidigt kan du använda ett objektbeskrivningsobjekt precis som med Object.create att definiera dem med hjälp av Object.defineProperties.
Object.defineProperties (my_dog, ålder: get: function () / * ... * /, set: function () / * ... * /, uppräknare: true, gender: value: "female" );
Du kommer att notera - för det sällsynta fallet när du inte använder ett objekt som bokstavligt som den andra parametern - att endast de uppräknade egenskaperna hos egenskapsobjektet kommer att användas.
Om du någonsin vill veta detaljerna i en fastighet kan du använda den här funktionen, Object.getOwnPropertyDescriptor. Notera "Eget"; detta fungerar bara med egenskaper på själva objektet, inte upp sin prototypkedja.
var person = namn: "Joe"; Object.getOwnPropertyDescriptor (person, "namn"); // konfigurerbar: true, countable: true, value: "Joe", skrivbar: true
Som du kan se fungerar det med egenskaper som är inställda både på gammalt och nytt sätt. Object.getOwnPropertyDescriptor tar två parametrar: objektet och egenskapens namn som en sträng.
Har du någonsin velat få alla nycklar till ett objekt? Nu kan du göra det lätt med Object.keys. Passera den här funktionen ett objekt, och det kommer att returnera en matris av alla uppräkningsegenskaper för objektet. Du kan också skicka det till en array, och du kommer tillbaka en rad olika index.
var häst = namn: "Ed", ålder: 4, jobb: "hoppa", ägare: "Jim"; var horse_keys = Object.keys (häst); // ["namn", "ålder", "jobb", "ägare"];
Den här är bara som Object.keys, förutom att det innehåller alla egenskaper - även de som inte uppräkningsbar. Med det längre funktionsnamnet kan du berätta att de avskyr användningen av den. Vanligtvis vill du ha det nycklar istället.
Om du någonsin velat skapa en funktion som inte accepterar nya parametrar kan du göra det nu. Kör ditt objekt genom Object.preventExtensions, och det kommer att avböja alla försök att lägga till nya parametrar. Denna funktion går hand i hand med Object.isExtensible, som återvänder Sann om du kan förlänga objektet och falsk om du inte kan.
var produkt = namn: "Foobar", betyg: 3.5; Object.isExtensible (produkt); // true Object.preventExtentions (produkt); Object.isExtensible (produkt); // false product.price = "$ 10.00"; // fungerar inte product.price; // odefinierad
Du bör notera att alla egenskaper på objektet när du kör Object.preventExtensions kan ändå ändras eller raderas (förutsatt att deras attribut tillåter det).
Att försegla ett objekt är ett steg upp från att förhindra tillägg. Ett förseglat objekt kommer inte att låta dig lägga till eller ta bort egenskaper, eller ändra egenskaper från ett värde (som en sträng) till en accessor (en metod) eller vice versa. Du kan fortfarande läsa och skriva egenskaper, förstås. Du kan ta reda på om ett föremål förseglas med hjälp av Object.isSealed.
var husdjur = namn: "Browser", typ: "hund"; Object.seal (PET); pet.name = "Oreo"; pet.age = 2; // fungerar inte pet.type = function () / ** /; // fungerar inte radera pet.name; // fungerar inte
Frys det ytterligare ett steg längre. Ett fruset objekt kan inte ändras på något sätt; den är skrivskyddad. Du kan verifiera frozenness av ett objekt med, du gissade det, Object.isFrozen.
var obj = hälsning: "Hej!" ; Object.freeze (obj); Object.isFrozen (obj); // Sann
Du skulle tro att det inte skulle vara för svårt att bestämma att en given variabel är en array. Trots allt fungerar det bra med sorts operatör. Men JavaScript-arrays är inkonsekventa ilk. De är faktiskt närmare array-liknande föremål (även om vi brukar använda den termen för att hänvisa till saker som argument och nodelists). Denna funktion ger dig ett sätt att vara 100% säker på att det du jobbar med är en matris. Passera det en variabel, och den returnerar den booleska.
var namn = ["Collis", "Cyan"]; Array.isArray (namn); // Sann
För mer om varför vi behöver den här funktionen, kolla in dokumenten, kopplad till nedan.
Det här är inte för stort, men om du någonsin vill spara datum i JSON kanske du tycker att det är användbart. Datumobjekt har nu en toJSON funktion som konverterar datumet till ett JSON-strängdatum.
nytt datum (). toJSON (); // "2010-12-06T16: 25: 40.040Z"
Du är förmodligen bekant med att använda ring upp och tillämpa att omfördela värdet av detta i en funktion.
var ar1 = ["1", "2", "3"], arr2 = ["4", "5", "6"]; Array.prototype.push.apply (arr1, arr2);
Med dessa metoder kan du ändra värdet på detta inom en funktion. Om du vill göra något så här ofta, Function.prototype.bind returnerar en ny funktion med detta bunden till vad du än går in, så du kan spara den till en variabel.
var tooltip = text: "Klicka här till ...", overlay = text: "Vänligen ange antalet deltagare"; funktion show_text () // verkligen, gör något mer användbart här console.log (this.text); tooltip.show = show_text.bind (verktygstips); tooltip.show (); overlay.show = show_text.bind (overlay); overlay.show ();
Det kan givetvis inte vara det mest praktiska exemplet, men det ger dig idén!
Det är funktionerna ECMAScript 5th Edition (eller JavaScript 1.8.5) som har lagts till i Firefox 4-betorna. Det finns några andra ändringar i JavaScript som de implementerar också, vilket du kan kolla in i utgåva noterna.
Det finns dock en massa ECMAScipt 5-funktioner som redan stöddes i Firefox 3 och flera andra webbläsare. Har du spelat med någon av dessa?
Obs! Dessa är kopplade till deras MDN-dokumentation.
Om du vill se vilka webbläsare och versioner som stöder dessa funktioner kan du kolla in den här kompatibilitetstabellen, gjord av Juriy Zaytsev (Kangax). Det fina med de flesta av dessa funktioner är att om en webbläsare inte stöder den, kan du vanligtvis lägga till support, med något liknande:
om (typ av Object.create! == 'funktion') Object.create = function (o) funktion F () F.prototype = o; returnera nya F (); ; // Courtesy of Douglas Crockford: http://javascript.crockford.com/prototypal.html
De nya funktioner som vi har tittat på här är egentligen bara en liten del av den godhet som läggs till ECMAScript-standarden i femte upplagan. Finns det några andra funktioner som du specifikt ser fram emot att använda, eller kanske använder du just nu? Låt oss här i kommentarerna!
