Share
Det er en flott tid for JavaScript. Ikke bare blir det et mye mer respektert språk, men det vokser også i hopp og grenser - både i popularitet og funksjoner. Som flere nettlesere begynner å implementere funksjonene i ECMAScript 5th edition standard, blir JavaScript en enda kraftigere plattform for deg å utvikle seg på. I denne opplæringen snakker vi om de nye metodene som er tilgjengelige for deg.
ECMAScript er det offisielle navnet på det vi alle kaller JavaScript. Det betyr ikke at vi har feil; det er bare at navnet "JavaScript" er et varemerke for Oracle; så Ecma International (opprinnelig European Computer Manufacturers Association - derfor ECMA) bruker begrepet "ECMAScript" for å referere til standarden på JavaScript. Den nyeste versjonen av denne standarden er 5. utgave, og den ble godkjent for over et år siden (3. desember 2009). Den omfatter et stort utvalg av flotte tillegg, og flere av dem begynner å dukke opp i nettlesere. Implementeringen av ECMAScript 5 kalles JavaScript 1.8.5.
I denne opplæringen skal vi se på JavaScript 1.8.5-funksjonene som er tilgjengelige for oss i Firefox 4-betasene. Du vil gjerne oppdage at de fleste av de nyeste versjonene av andre nettlesere har disse også ... bortsett fra en. Denne gangen er det Opera, da IE9 har tatt med mange av disse.
Denne metoden er en veldig viktig en; det rydder virkelig opp prototypal arv. Tidligere (i ECMAScript 3rd edition), for å lage et objekt og sette sin prototype, vil du gjøre noe slikt:
funksjon Cat (navn) this.name = name; this.paws = 4; this.hungry = false; this.eaten = []; Cat.prototype = konstruktør: Cat, play: function () this.hungry = true; returnere "spiller!"; , feed: funksjon (mat) this.eaten.push (mat); this.hungry = false; , snakk: funksjon () return "Meow";
Er jeg den eneste som synes det ser merkelig ut som prototypen utenfor Konstruktørfunksjonen? Og arvingen blir enda messier. Med Object.create, ting blir mye enklere. Ovennevnte kan være kodet slik:
var hund = navn: "hund", poter: 4, sulten: falsk, spist: null, spill: funksjon () this.hungry = true; returnere "spiller!"; , feed: funksjon (mat) if (! this.eaten) this.eaten = []; this.eaten.push (mat); this.hungry = false; , snakk: funksjon () retur "Woof!" ; var my_dog = Object.create (hund);
Hva skjer her er dette: Jeg ringer object.create, sender det et objekt som skal brukes som prototype av det nye objektet som Object.create er tilbake. Når du bruker Object.create, Jeg trenger ikke å bekymre meg for å definere prototypen separat. Faktisk har jeg mye mer fleksibilitet til å bestemme hvordan jeg skal skape og arve gjenstander. For eksempel kan jeg ikke sette spist array på prototypen, fordi et array er en referanseverdi, så hvert objekt opprettet fra hund vil dele det arrayet. Jeg har bestemt meg for å sjekke det før du bruker det her, men hvis jeg ønsket å pakke inn Object.create (hund) i en make_dog funksjon, jeg kunne tildele det der like enkelt.
Det er det som er bra med Object.create; Du kan velge hvordan du gjør det.
Det er en andre parameter som Object.create tar; Det er et egenskapsbeskrivelsesobjekt. Det er litt komplisert, men det er også en del av den neste funksjonen vi ser på, så la oss sjekke det ut.
Hvis du har et objekt som du vil definere en eiendom på, vil du sannsynligvis gjøre det på denne måten:
my_dog.age = 2;
Dette fungerer fortsatt fint i ES5, men hvis du vil ha litt mer finkornet kontroll, kan du få det med Object.defineProperty. Den første parameteren er objektet du tilordner eiendommen på. Den andre parameteren er navnet på eiendommen, som en streng. Den endelige egenskapen er beskrivelsesobjektet. Slik fungerer det. Det er (åpenbart) et objekt, og det kan ha en kombinasjon av følgende egenskaper, som alle beskriver egenskapen vi legger til:
Accentsconagua
udefinert.ekte. Standard til falsk.ekte. Standard til falsk.falsk.udefinert.udefinert.Legg merke til at standardene for de boolske alternativene ovenfor er omvendt av det gamle obj.prop = val standarder. Også, vet at du ikke kan definere verdi eller skrivbar når få eller sett er definert, og omvendt.
Så, hvordan ville du bruke dette? Prøv dette:
// antar my_dog fra over Object.defineProperty (my_dog, "age", sett: funksjon (alder) this.human_years = age * 7;, get: function () return this.human_years / 7; : sant); my_dog.age = 2; my_dog.human_years; // 14
Bortsett fra at hundårene ikke er egentlig 7 år, må du legge merke til at vi ikke satte verdi eller skrivbar her, fordi vi bruker få og sett. Disse funksjonene er aldri tilgjengelig direkte. De går "magisk" bak scenene når du tilordner eller ber om en eiendom. I dette eksemplet bruker jeg disse funksjonene til å holde alder og human_years i "synkronisering". Hvis du ikke vil ha "andre" verdien tilgjengelig, kan du bruke en anonym, selvoppringende funksjon for å skjule den med lukking:
Objekt.defineProperty (min_dog, "alder", (funksjon () var human_years; return set: funksjon (alder) human_years = alder * 7;, få: funksjon () return human_years / 7;, tallrik: sant; ()));
Selvfølgelig er det ingenting å hindre deg i å gjøre noe dumt inne få eller sett, så bruk det klokt.
Du kan bruke et skjema av egenskapsbeskrivelsesobjektet for å legge til egenskaper til objekter med Object.create. Gjør det som følger:
var your_dog = Object.create (hund, alder: get: function () / * ... * /, sett: funksjon () / * ... * /, enumerable: true, kjønn: value: " kvinne ");
Bare bruk eiendomsnavnet som en egenskap for beskrivelsesobjektet; Sett deretter attributter via et objekt i verdien.
Hvis du vil definere flere egenskaper samtidig, kan du bruke et objektbeskrivelsesobjekt som i tilfelle Object.create å definere dem ved hjelp av Object.defineProperties.
Object.defineProperties (my_dog, alder: get: function () / * ... * /, sett: funksjon () / * ... * /, tallverdig: true, kjønn: verdi: "kvinnelig" );
Du vil legge merke til - i det sjeldne tilfellet når du ikke bruker et objekt som bokstavlig som den andre parameteren - at bare de utallige egenskapene til egenskapsobjektet vil bli brukt.
Hvis du vil vite detaljene til en eiendom, kan du bruke denne funksjonen, Object.getOwnPropertyDescriptor. Vær oppmerksom på "Own"; Dette fungerer bare med egenskaper på selve objektet, ikke opp prototypekjeden.
var person = navn: "joe"; Object.getOwnPropertyDescriptor (person, "navn"); // konfigurerbar: true, tallverdig: true, value: "Joe", skrivbar: true
Som du kan se, fungerer dette med egenskaper som er satt på både den gamle og den nye måten. Object.getOwnPropertyDescriptor tar to parametere: objektet og egenskapen navnet som en streng.
Har du noen gang ønsket å få alle nøklene til et objekt? Nå kan du gjøre det lett med Object.keys. Pass denne funksjonen en gjenstand, og den vil returnere en rekke av alle de tallrike egenskapene til objektet. Du kan også sende den en matrise, og du får tilbake en rekke indekser.
var hest = navn: "Ed", alder: 4, jobb: "jumping", eier: "Jim"; var horse_keys = Object.keys (hest); // ["navn", "alder", "jobb", "eier"];
Denne er akkurat som Object.keys, bortsett fra at det inkluderer alle egenskapene-selv de som er ikke enumerable. Ved det lengre funksjonsnavnet kan du fortelle at de fraråder bruken av det. Vanligvis vil du ha det nøkler i stedet.
Hvis du noen gang har ønsket å lage en funksjon som ikke godtar nye parametere, kan du gjøre det nå. Kjør objektet ditt gjennom Object.preventExtensions, og det vil avslå alle forsøk på å legge til nye parametere. Denne funksjonen går hånd i hånd med Object.isExtensible, som returnerer ekte hvis du kan forlenge objektet og falsk hvis du ikke kan.
var produkt = navn: "Foobar", vurdering: 3,5; Object.isExtensible (produkt); // true Object.preventExtentions (produkt); Object.isExtensible (produkt); // false product.price = "$ 10.00"; // virker ikke product.price; // undefined
Du bør merke at alle egenskapene på objektet når du kjører Object.preventExtensions kan fortsatt bli endret eller slettet (forutsatt at deres attributter tillater det).
Forsegling av en gjenstand er ett trinn opp fra å forhindre utvidelser. Et forseglet objekt lar deg ikke legge til eller slette egenskaper, eller endre egenskaper fra en verdi (som en streng) til en accessor (en metode) eller omvendt. Du vil fortsatt kunne lese og skrive egenskaper, selvfølgelig. Du kan finne ut om et objekt er forseglet ved å bruke Object.isSealed.
var pet = navn: "Browser", type: "hund"; Object.seal (pet); pet.name = "Oreo"; pet.age = 2; // virker ikke pet.type = function () / ** /; // virker ikke slett pet.name; // virker ikke
Frys det enda et skritt videre. En frossen gjenstand kan ikke endres på noen måte; det er skrivebeskyttet. Du kan verifisere frozenness av et objekt med, du gjettet det, Object.isFrozen.
var obj = hilsen: "Hei!" ; Object.freeze (obj); Object.isFrozen (obj); // true
Du tror at det ikke ville være for vanskelig å fastslå at en gitt variabel er en matrise. Tross alt fungerer alt annet bra med typeof operatør. Imidlertid er JavaScript-arrayer av inkonsekvent ilk. De er faktisk nærmere array-lignende objekter (selv om vi vanligvis bruker det begrepet for å referere til ting som argumenter og NodeLists). Denne funksjonen gir deg en måte å være 100% sikker på at det du jobber med er en matrise. Pass det en variabel, og den returnerer den boolske.
var navn = ["Collis", "Cyan"]; Array.isArray (navn); // true
For mer om hvorfor vi trenger denne funksjonen, sjekk ut dokumentene, knyttet til nedenfor.
Dette er ikke for stort, men hvis du noen gang vil lagre datoer i JSON, kan du finne dette nyttig. Datoobjekter har nå a toJSON funksjon som konverterer datoen til en JSON-strengdato.
ny dato (). toJSON (); // "2010-12-06T16: 25: 40.040Z"
Du er sikkert kjent med å bruke anrop og søke om å tilordne verdien av dette i en funksjon.
var arr1 = ["1", "2", "3"], arr2 = ["4", "5", "6"]; Array.prototype.push.apply (arr1, arr2);
Disse metodene lar deg endre verdien av dette innenfor en funksjon. Hvis du ofte vil gjøre noe slikt, Function.prototype.bind returnerer en ny funksjon med dette bundet til hva du passerer inn, så du kan lagre den til en variabel.
var tooltip = text: "Klikk her til ...", overlay = text: "Vennligst skriv inn antall deltakere"; funksjon show_text () // virkelig, gjør noe mer nyttig her console.log (this.text); tooltip.show = show_text.bind (tooltip); tooltip.show (); overlay.show = show_text.bind (overlay); overlay.show ();
Selvfølgelig kan dette ikke være det mest praktiske eksempelet, men det gir deg ideen!
Disse er funksjonene ECMAScript 5th Edition (eller JavaScript 1.8.5) som er lagt til i Firefox 4-betaene. Det er noen andre endringer i JavaScript som de også implementerer, som du kan sjekke ut i utgivelsesnotatene.
Det er imidlertid en rekke ECMAScipt 5-funksjoner som allerede ble støttet i Firefox 3, og flere andre nettlesere. Har du spilt med noen av disse?
Merk: Disse er knyttet til MDN-dokumentasjonen.
Hvis du vil se hvilke nettlesere og versjoner som støtter disse funksjonene, kan du sjekke ut denne kompatibilitetstabellen, laget av Juriy Zaytsev (Kangax). Det fine med de fleste av disse funksjonene er at hvis en nettleser ikke støtter det, kan du vanligvis legge til støtte, med noe slikt:
hvis (type Object.create! == 'funksjon') Object.create = funksjon (o) funksjon F () F.prototype = o; returner ny F (); ; // Hilsen Douglas Crockford: http://javascript.crockford.com/prototypal.html
De nye funksjonene vi har sett på her er egentlig bare en liten del av godheten lagt til ECMAScript-standarden i 5. utgave. Er det noen andre funksjoner du ser frem til å bruke, eller kanskje til og med bruker nå? La oss her i kommentarene!
