JavaScript: Objekter. Hvad er et objekt i JavaScript, og hvilke muligheder har det? Lad os gennemgå vores ejendomme
Objekter er et af kernebegreberne i JavaScript. Da jeg først begyndte at studere dem, virkede de ret simple for mig: bare par af nøgler og værdier, som beskrevet i teorien.
Først efter noget tid begyndte jeg at forstå, at emnet var meget mere komplekst, end jeg troede. Og så begyndte jeg at studere information fra forskellige kilder. Nogle af dem gav en god idé om emnet, men jeg var ikke i stand til at se hele billedet med det samme.
I dette indlæg forsøgte jeg at dække alle aspekter af at arbejde med objekter i JS, uden at gå for dybt i specifikke detaljer, men også uden at udelade vigtige detaljer, som vil hjælpe dig med at forstå emnet og føle dig mere sikker, når du studerer det yderligere.
Så lad os starte med det grundlæggende.
ObjektEt objekt i JavaScript er simpelthen en samling af egenskaber, som hver især er et nøgle-værdi-par. Du kan få adgang til tasterne ved hjælp af en prik ( obj.a) eller parentesnotation ( obj["a"]).Husk at parentes skal bruges, hvis nøglen er:
- er ikke et gyldigt JavaScript-id (det har et mellemrum, en bindestreg, starter med et tal...)
- er en variabel.
Prototype er en måde at håndhæve ejendomsarv i JavaScript. På denne måde kan du dele funktionalitet uden at duplikere kode i hukommelsen. Metoden fungerer ved at skabe en forbindelse mellem to objekter.
Kort sagt opretter Prototype en pointer fra et objekt til et andet.
Prototype kæde
Hver gang JS leder efter en egenskab i et objekt og ikke finder den direkte på selve objektet, tjekker den for tilstedeværelsen af egenskaben i prototypeobjektet. Hvis der ikke er nogen egenskab i den, vil JS fortsætte med at søge i prototypen relateret objekt. Dette vil fortsætte, indtil JS finder en passende ejendom eller når enden af kæden.
Lad os se på et eksempel:
Var cons = funktion () ( this.a = 1; this.b = 2; ) var obj = new cons(); cons.prototype.b = 3; cons.prototype.c = 4;
ulemper er en konstruktør (simpelthen en funktion, der kan kaldes ved hjælp af operatoren ny).
På den femte linje opretter vi et nyt objekt - en ny kopi ulemper. Umiddelbart efter oprettelsen obj får også prototype-egenskaben.
Og nu tilføjer vi egenskaber ( "b", "c") objektprototype ulemper.
Lad os overveje obj:
obj.a // 1 - alt er det samme her, obj.a er stadig 1.
obj.c? - y obj ingen ejendom c! Men som tidligere nævnt vil JS nu lede efter det i prototypen obj og returnerer værdien 4.
Lad os nu tænke over, hvad meningen er obj.b og hvordan det vil være, når vi fjerner obj.b?
Obj.b er lig med 2. Vi tildelte ejendommen b, men vi gjorde det for en prototype ulemper, så når vi tjekker obj.b, så får vi stadig 2. Dog umiddelbart efter fjernelse obj.b JS vil ikke længere kunne finde b y o bj, og vil derfor fortsætte med at søge i prototypen og returnere værdien 3.
Oprettelse af et objekt Literalt objekt: lad obj = (a: 1);Vi oprettede et objekt med følgende prototypekæde: obj ---> Objekt.prototype ---> null
Som du kan gætte, objekt.prototype er prototypen af objektet, og også slutningen af prototypekæden.
Object.create(): var newObj = Object.create(obj);
U nyObj der vil være følgende kæde af prototyper: newObj ---> obj ---> Object.prototype ---> null
Konstruktør. Som i eksemplet ovenfor er konstruktøren simpelthen en JS-funktion, der giver os mulighed for at udnytte operatøren ny at skabe nye forekomster af det.
ES6 klasser:
Class rectangle ( constructor(height, width) ( this.height = height; this.width = width; ) getArea() ( return this.height * this.width; ) ) lad square = new rektangel(2, 2);
Firkant- konstruktørinstans rektangel, og så kan vi ringe square.getArea() //4, kvadratisk.bredde, samt alle funktioner, der er arvet fra objekt.prototype.
Hvilken vej er bedre? Hvis du planlægger at oprette flere forekomster, kan du bruge ES6 eller designeren. Hvis du planlægger at oprette objektet én gang, er det bedre at angive et bogstav, da dette er den enkleste måde.
Og nu hvor vi har lært om prototype og efter at være blevet bekendt med alle måder at skabe nye objekter på, kan vi gå videre til at diskutere et af de mest forvirrende aspekter forbundet med objekter.
Sammenligning og ændring af objekter I JavaScript er objekter referencetyper.Når vi skaber et objekt lad obj = (a: 1);, variabel obj får objektets hukommelsesadresse, men ikke dens værdi! Det er ekstremt vigtigt at forstå denne forskel, ellers kan der opstå fejl. Når vi opretter et andet objekt lade nyObj = obj, skaber vi faktisk en pointer til et bestemt hukommelsesområde obj, og ikke et helt nyt objekt.
Det betyder, at ved at gøre nyObj.a = 2, vi ændrer os faktisk obj så det obj.a bliver lig med 2!
Denne tilgang fører let til fejl, hvorfor mange virksomheder arbejder med uforanderlige objekter. I stedet for at ændre et allerede oprettet objekt, bliver du nødt til igen at oprette et nyt objekt (en kopi af originalen) og foretage ændringer i det. Sådan fungerer vigtige biblioteker som Redux, og det er et af kernekoncepterne for funktionel programmering generelt. Du kan læse mere.
Lighed
Det følger også af ovenstående, at to objekter aldrig kan være lige store, selvom de har de samme egenskaber. Dette skyldes det faktum, at JS faktisk sammenligner hukommelsesplaceringen af objekter, og to objekter er aldrig på den samme hukommelsesplacering.
// To forskellige objekter med de samme egenskaber er ikke ens var fruit = (navn: "æble"); var fruitbear = (navn: "æble"); frugt === frugtbjørn; // return false // her peger frugt og frugtbjørn på det samme objekt var fruit = (navn: "æble"); var frugtbær = frugt; frugt === frugtbjørn; // returner sand
Så du har sandsynligvis allerede undret dig over, hvordan du kan sammenligne objekter eller hvordan man udfører forskellige manipulationer med objekter, givet kravet om deres uforanderlighed.
Lad os overveje flere muligheder.
Ændring af et objekt
Lad os sige, at det er klart, at vi faktisk ikke skal ændre objekter, så vi vil lave en kopi af det tilsvarende objekt og ændre dets egenskaber. Kommer til undsætning Object.assign().
Var obj = (a: 1, b: 2); var newObj = Object.assign((), obj,(a:2)) // (a: 2, b: 2 )
Hvis vi ønsker at ændre ejendomsværdien -en objekt obj, du kan bruge objekt.tildele at oprette en kopi obj og dens ændringer.
I eksemplet kan du se, at vi først opretter et tomt objekt, derefter kopierer værdierne obj og foretage vores ændringer og i sidste ende få et nyt og klar til brug objekt.
Bemærk venligst, at denne metode ikke virker til dyb kopiering. Når vi taler om dyb kopiering, mener vi, at vi skal kopiere et objekt med en eller flere egenskaber.
Const obj = (a: 1, b: (a: 1) ); // b egenskab er et objekt
Object.assign() kopierer et objekts egenskaber, så hvis værdien af egenskaben er en pointer til et objekt, så kopieres kun markøren.
En dyb kopi kræver en rekursiv operation. Her kan du skrive en funktion eller blot bruge en metode _.cloneDeep fra Lodash-biblioteket.
Sammenligning af objekter
Der er én cool teknik til at arbejde med objekter - strengkonvertering. I det følgende eksempel konverterer vi begge objekter til strenge og sammenligner dem:
JSON.stringify(obj1) === JSON.stringify(obj2)
Denne tilgang giver mening, fordi vi ender med at sammenligne strenge, der er en pegepind til en værditype. Den dårlige nyhed er, at det ikke altid virker, primært fordi rækkefølgen af objektets egenskaber ikke er garanteret.
En anden god løsning er at bruge metoden _.er Lige fra Lodash, som udfører dyb objektsammenligning.
Og før vi afslutter, lad os gennemgå nogle ofte stillede spørgsmål om genstande. Dette vil hjælpe dig med at dykke dybere ned i emnet og anvende den erhvervede viden i praksis.
Prøv selv at tænke over løsningen, før du læser svaret.
Hvordan finder man ud af længden af en genstand? For at få svaret skal du gennemgå alle objektets egenskaber en efter en og tælle dem. Der er flere måder at udføre en sådan iteration på:- for i. Denne metode dækker alle tællelige egenskaber for et objekt og dets prototypekæder. Vi har set prototypen (og forhåbentlig lært materialet), så det burde være klart, at applikationen for i vil ikke altid være sandt for at få egenskaber for et objekt.
- Objekt.nøgler. Denne metode returnerer et array med nøglerne til alle de native (der hører til det angivne objekt) optællingsegenskaber. Denne tilgang er bedre, fordi vi kun arbejder på objektets egenskaber uden at få adgang til egenskaberne prototype. Der er dog situationer, hvor du har tildelt en egenskab talløse nogle ejendom er falsk, og objekt.nøgler ender med at springe det over, og du får et forkert resultat. Dette sker sjældent, men i sådanne tilfælde vil det være nyttigt getOwnPropertyNames.
- getOwnPropertyNames returnerer et array, der indeholder alle objektets egne nøgler (både tællelige og utellelige).
- Objekt.værdier sløjfer gennem sine egne tælleegenskaber og returnerer en matrix med de tilsvarende værdier.
- Objekt.indtastninger itererer over sine egne tælleegenskaber og returnerer et array med nøglerne og deres værdier.
En sådan metode er matrix.længde. Som et resultat kan vi simpelthen skrive
Lad objLength = Object.getOwnPropertyNames(obj).length;
Hvordan kontrollerer man, om et objekt er tomt?- Husk at objekter er af en referencetype, hvilket betyder at det anbefales at arbejde med dem uden at ændre på de originale objekter.
- Bliv venner med ejendommen prototype og en kæde af prototyper.
- Lær de værktøjer at kende, der hjælper dig med at arbejde med objekter. Husk, at du kan omdanne objekter til strenge, få en række af deres nøgler eller blot gentage deres egenskaber ved hjælp af det sæt af metoder, vi er blevet introduceret til.
Sidste opdatering: 04/08/2018
Objektorienteret programmering er et af de dominerende paradigmer inden for applikationsudvikling i dag, og i JavaScript kan vi også drage fuld fordel af OOP. Samtidig har objektorienteret programmering i forhold til JavaScript nogle funktioner.
ObjekterI tidligere emner har vi arbejdet med primitive data – tal, strenge, men data repræsenterer ikke altid primitive typer. For eksempel, hvis vi i vores program skal beskrive essensen af en person, der har et navn, alder, køn og så videre, så vil vi naturligvis ikke være i stand til at repræsentere essensen af en person som et tal eller en streng. Vi skal bruge et par linjer eller tal for at beskrive personen korrekt. I denne henseende vil en person fungere som en kompleks kompleks struktur, som vil have individuelle egenskaber - alder, højde, fornavn, efternavn osv.
For at arbejde med sådanne strukturer bruger JavaScript . Hvert objekt kan gemme egenskaber, der beskriver dets tilstand, og metoder, der beskriver dets adfærd
Oprettelse af et nyt objektDer er flere måder at oprette et nyt objekt på.
Den første måde er at bruge objektkonstruktøren:
Var bruger = nyt objekt();
I I dette tilfælde objektet kaldes bruger. Det er defineret på samme måde som enhver almindelig variabel, der bruger nøgleordet var.
Det nye Object()-udtryk repræsenterer et kald til en konstruktør, en funktion, der opretter et nyt objekt. Den nye operatør bruges til at kalde konstruktøren. At kalde en konstruktør er i bund og grund som at kalde en almindelig funktion.
Den anden måde at oprette et objekt på er ved at bruge krøllede seler:
Var bruger = ();
I dag er den anden metode mere almindelig.
ObjektegenskaberEfter at have oprettet et objekt, kan vi definere egenskaber på det. For at definere en egenskab skal du angive navnet på egenskaben efter navnet på objektet, adskilt af en prik, og tildele den en værdi:
Var bruger = (); user.name = "Tom"; bruger.alder = 26;
I dette tilfælde er to egenskabers navn og alder erklæret og tildelt tilsvarende værdier. Derefter kan vi bruge disse egenskaber, for eksempel vise deres værdier i konsollen:
Console.log(bruger.navn); console.log(bruger.alder);
Du kan også definere egenskaber, når du definerer et objekt:
Var bruger = (navn: "Tom", alder: 26 );
I dette tilfælde bruges et kolontegn til at tildele en værdi til egenskaben, og et komma (i stedet for et semikolon) placeres efter egenskabsdefinitionen.
Derudover er der en genvej til at definere egenskaber:
Var navn = "Tom"; var alder = 34; var bruger = (navn, alder); console.log(bruger.navn); // Tom console.log(bruger.alder); // 34
I dette tilfælde er navnene på variablerne også navnene på objektets egenskaber. Og på denne måde kan du skabe mere komplekse designs:
Var navn = "Tom"; var alder = 34; var bruger = (navn, alder); var lærer = (bruger, kursus: "JavaScript"); console.log(lærer.bruger); // (navn: "Tom", alder: 34) console.log(lærer.kursus); // JavaScript
ObjektmetoderEt objekts metoder definerer dets adfærd eller de handlinger, det udfører. Metoder er funktioner. Lad os f.eks. definere en metode, der viser en persons navn og alder:
Var bruger = (); user.name = "Tom"; bruger.alder = 26; user.display = function())( console.log(bruger.navn); console.log(bruger.alder); ); // metodekald bruger.display();
Som med funktioner defineres metoder først og kaldes derefter.
Metoder kan også defineres direkte, når du definerer et objekt:
Var bruger = ( navn: "Tom", alder: 26, display: function())( console.log(dette.navn); console.log(denne.alder); ) );
Som med egenskaber tildeles en metode en funktionsreference ved hjælp af et kolon.
For at få adgang til egenskaber eller metoder for et objekt i det pågældende objekt, skal du bruge dette nøgleord. Det betyder en reference til det aktuelle objekt.
Du kan også bruge en stenografi til at definere metoder ved at udelade kolon og funktion:
Var user = ( navn: "Tom", alder: 26, display())( console.log(dette.navn, dette.alder); ), flytte(sted)( console.log(dette.navn, "går til " , sted); ) ); bruger.display(); // Tom 26 user.move("butikken"); //Tom går til butikken
Array syntaksDer er også en alternativ måde at definere egenskaber og metoder ved hjælp af array-syntaks:
Var bruger = (); bruger["name"] = "Tom"; bruger["alder"] = 26; bruger["display"] = function())( console.log(bruger.navn); console.log(bruger.alder); ); // kalder metoden bruger["display"]();
Navnet på hver egenskab eller metode er omgivet af anførselstegn og firkantede parenteser, så tildeles de også en værdi. For eksempel bruger["alder"] = 26 .
Når du får adgang til disse egenskaber og metoder, kan du enten bruge punktnotation (bruger.navn) eller bruge: bruger["navn"]
Strings som egenskaber og metoderDet skal også bemærkes, at navnene på objektegenskaber og metoder altid er strenge. Det vil sige, vi kunne omskrive den tidligere definition af objektet sådan her:
Var user = ( "navn": "Tom", "alder": 26, "display": function())( console.log(bruger.navn); console.log(bruger.alder); ) ); // metodekald bruger.display();
På den ene side er der ingen forskel mellem de to definitioner. På den anden side er der tilfælde, hvor det kan hjælpe at omslutte titlen i en linje. For eksempel, hvis egenskabsnavnet består af to ord adskilt af et mellemrum:
Var user = ( navn: "Tom", alder: 26, "fuldt navn": "Tom Johns", "display info": function())( console.log(user.name); console.log(user.age ) ; ) ); console.log(bruger["fulde navn"]); bruger["display info"]();
Kun i dette tilfælde skal vi bruge array-syntaks for at få adgang til sådanne egenskaber og metoder.
Fjernelse af egenskaberOvenfor så vi på, hvordan vi dynamisk kan tilføje nye egenskaber til et objekt. Vi kan dog også slette egenskaber og metoder ved hjælp af delete-operatoren. Og ligesom med tilføjelse, kan vi fjerne egenskaber på to måder. Den første måde er at bruge punktnotation:
Slet objekt.egenskab
Eller brug array-syntaks:
Slet objekt["egenskab"]
Lad os f.eks. fjerne egenskaben:
Var bruger = (); user.name = "Tom"; bruger.alder = 26; bruger.display = function())( console.log(bruger.navn); console.log(bruger.alder); ); console.log(bruger.navn); // Tom slet bruger.navn; // slet egenskaben // alternativ // slet bruger["navn"]; console.log(bruger.navn); // udefineret
Efter sletning vil egenskaben være udefineret, så når du forsøger at få adgang til den, vil programmet returnere værdien undefined.
Hilsen alle, der læser denne publikation. I dag vil jeg guide dig gennem et nøgleværktøj i sproget - JavaScript-objekter. Lad mig minde dig om, at js er cross-browser og fungerer på alle operativsystemer (windows, mac os osv.). I modsætning til objektorienterede programmeringssprog adskiller implementeringen af objekter i js sig væsentligt fra den sædvanlige funktionalitet og variationer i brugen af instanser, for eksempel i C#.
Derfor, efter at have læst den aktuelle artikel, vil du lære de vigtigste kendetegn ved script-objekter, lære på hvilke måder de kan oprettes, opdateres og slettes. Jeg vil også komme ind på emnet egenskaber, metoder og konstruktører, tale om nyttige kommandoer og selvfølgelig lidt om arv. Jeg synes, det er på tide at begynde at lære!
Hvad er et objekt i JavaScript, og hvilke muligheder har det?I js er objekter simple associative arrays (de kaldes også hashes).
Hvad er et associativt array?
Dette er en datastruktur, der gemmer en vis mængde information relateret til og beskriver et specifikt element. Alle data er struktureret og forbundet som "nøgle => værdi".
Du skal for eksempel beskrive biler. Derefter opretter du et autoobjekt og beskriver dets egenskaber i et array. Jeg besluttede at beskrive bilens mærke (navn), dens farve (farve) og pris (pris). Nedenfor har jeg vedhæftet koden til implementering af den beskrevne opgave.
| 1 2 3 4 5 | var avto = (navn: "BMW 116i", farve: "sort", pris: 588.000 ); |
var avto = (navn: "BMW 116i", farve: "sort", pris: 588.000 );
Her ser du en måde at oprette et objekt kaldet "avto". Navn, farve og pris er nøgler, som kan bruges under skrivningen af ansøgningen.
Jeg kom foran mig selv med dette eksempel, så lad os nu se på alt i rækkefølge.
Du kan oprette et objekt på flere måder:
var auto = (); eller var auto = new Object();
I begge tilfælde oprettes et tomt objekt med et kendt navn, men den første mulighed bruges meget oftere, da den er kortere og mere praktisk at skrive.
Alt om ejendommeNu skal du fylde det tomme objekt med parametre. For at gøre dette skal du tilføje egenskaber, som jeg også kaldte nøgler ovenfor. Igen er der to måder at erklære egenskaber på.
Jeg vil gerne bemærke, at JavaScript ikke har en streng ramme for oprettelse og initialisering af sådanne parametre. Nye egenskaber kan dukke op i hele koden, ligesom de kan slettes og opdateres.
Du kan således oprette alle nøglerne på én gang eller erklære dem, når de bliver tilgængelige. Og selvom du, mens du skriver et program, henviser til ikke-eksisterende nøgler, vil der ikke være nogen fejl. I dette tilfælde vil "udefineret" blive returneret.
Første vej.
Oprettelse og adgang til egenskaber ved hjælp af en prik. For at implementere denne mulighed skal du skrive navnet på objektet og derefter tilføje navnet på nøglen til det gennem en prik og derefter tildele en værdi gennem lighedstegnet:
avto.name = "BMW 116i"
Men i denne metode vil du tilføje et element mere til de eksisterende nøgler:
Denne metode bruges, når navnet på ejendommen allerede er kendt, og du skal udføre visse handlinger med værdierne.
Anden vej.
Ikke anderledes end den første, hvis du sammenligner deres formål. Denne metode har dog en lille fordel. Til denne mulighed bruges firkantede parenteser:
avto[“navn”] = “BMW 116i”
En god tilføjelse er muligheden for at oprette egenskabsnavne i form af en hvilken som helst streng. F.eks,
avto[“navn på bilen”] = “BMW 116i”
Arbejde med taster i firkantede parenteser bruges, når nogle parametre er indtastet af brugeren og gemt i variabler, eller når navnene på egenskaber er ukendte på forhånd. For eksempel anmoder en bruger om prisen på en valgt bil. Elementet, der blev kaldt, skrives til variablen, og prisen sendes som svar:
var auto = (); avto.name = "BMW_116i"; avto.pris = 588000; var nøgle = "pris"; // bilens pris blev anmodet om alert(avto);
Lad os nu gå videre til at slette egenskaber. Alt er meget enkelt her. Brug sletkommandoen for at slette. Så hvis du tilføjer følgende 2 linjer til det sidste eksempel nedenfor:
slet auto.price;
alarm(auto);
Derefter, når du ringer alarm en anden gang, vil dialogboksen vise "udefineret".
Et par ord om kompakthedPå nuværende tidspunkt fortalte jeg dig, hvordan du opretter et objekt og beskriver dets egenskaber. Jeg har knyttet testcases til dette, men de mest opmærksomme af jer, kære læsere, har bemærket, at den første programkode noget anderledes end alle de andre.
Og alt sammen fordi den bruger en kompakt datarepræsentation. Dette er en meget populær metode til at erklære nøgler, fordi den er kortere at skrive og lettere at forstå visuelt.
Lad os gennemgå vores ejendommeI JavaScript kan du hurtigt gentage oprettede egenskaber. En særlig mekanisme blev tilvejebragt til dette, bedre kendt som en cyklus.
Hvis du er bekendt med andre programmeringssprog, så ved du, at der oftest oprettes loops ved hjælp af ordet for , så er betingelsen for at optælle elementer skrevet i parentes.
I js ligner dens udseende foreach-løkken fra C#-sproget. Tjek ud generel opfattelse designs:
for (var obj i objekt) ( // udfører søgningen)
hvor obj er ansvarlig for navnet på de opregnede nøgler,
objekt – for deres værdier.
Og nu er her et konkret eksempel til dig.
| 1 2 3 4 5 6 7 8 | var avto = (navn: "BMW 116i", farve: "sort", pris: 588.000 ); for (var obj i objekt) ( alert(obj + ":" + objekt) ) |
var avto = (navn: "BMW 116i", farve: "sort", pris: 588.000 ); for (var obj i objekt) ( alert(obj + ":" + objekt) )
Det er tid til at sætte sig ind i metoderneScriptsproget sørger for skabelsen af metoder. Dette er en helt simpel mekanisme, hvormed du til enhver tid kan tilføje en metode eller metoder til ethvert objekt, der udvider mulighederne for de oprettede associative arrays. De kaldes også funktionsegenskaber.
Js i sig selv er meget dynamisk og fantastisk til en vis grad. Sådan kan elementer skabes forskellige typer. Når du lærer dette sprog, er der ingen grund til at huske komplekse strukturer, da mange annoncer minder meget om hinanden.
Så for at oprette en metode skal du erklære et objekt og derefter begynde at skrive en kommando, der er præcis som at oprette egenskaber. Efter “=” er det dog ikke længere værdien, der skrives, men søgeordsfunktionen (variabel). Og så ind krøllede seler handlinger er opført.
Her er implementeringen af denne mekanisme:
var avto =() avto.name = “BMV” avto.year = 1999 avto.drive = function(k) ( alert(“Bilen har passeret”+n+“ km.”)) avto.drive(300) avto. drev (450)
Som du kan se, indeholder dette eksempel egenskaber og metoder, hvis kald oprindeligt er identiske.
Har JS også konstruktører?Ja Hr! På dette sprog bliver alt, der bruger det "nye" nøgleord, automatisk en konstruktør. Så ovenfor så du erklæringen af et tomt objekt i formen: avto = nyt objekt ();. Dette er konstruktøren.
For klarhed, overvej linjerne nedenfor.
var bob = nyt objekt();
bob.name = "Bob Smith";
Dette er dog ikke hele arsenalet af muligheder. I js kan du oprette dine egne konstruktører og derefter bruge dem til at erklære nye objekter.
Så jeg vil "lave" en brugerdefineret konstruktør til allerede eksisterende biler. Bemærk venligst, at navnet skal skrives med stort. Dette er kendetegnende for funktioner. For at gøre dette skriver jeg følgende softwareimplementering:
funktion Auto (navn, pris) (
dette.navn = navn;
denne.pris = pris;
Nu, når du opretter et ubegrænset antal objekter og anvender denne konstruktør på dem, vil de alle tilhøre den samme klasse. For eksempel:
var car1 = new Avto("BMW", 650000);
var car2 = new Avto("Audi", 520000);
Ud over dette kan du oprette metoder inde i konstruktøren.
Funktioner ved arv i JavaScriptPå mange sprog er arv typisk baseret på klasser, der kan arve fra hinanden. Så kan du høre udtryk som "forfædreklasse", "barneklasse" osv.
Men i js er alt anderledes. Det er her objekter nedarves.
Al arv er baseret på internt link mellem objekter, hvilket er kendt som en "prototype". Hvis du tilføjer ".prototype" til en metode ved hjælp af en prik, og derefter indtaster navnet på prototypen, så vil alle objekter af den valgte metode blive nedarvet fra denne prototype.
Lad os gå videre til et eksempel.
function Transport (name) ( this.name = name this.canDrive = true ) var transport = new Transport ("avto") // oprettet et transportobjekt funktion Cykel (navn) ( this.name = name ) Bike.prototype = transport / / angiv, at alle nye objekter i denne klasse vil bruge transportcykel1 = ny cykel ("for_sport") cykel2= ny cykel ("for_barn") console.log(cykel1.navn) console.log(cykel2.navn) konsol .log (bike1.canDrive)
Jeg tror jeg slutter her. Jeg har fortalt dig om de grundlæggende aspekter af et scriptsprog. Dette er dog kun overfladisk viden. Næste vil vi gå dybere. I mellemtiden, glem ikke at slutte sig til mine abonnenter og dele linket til artiklen med dine venner. Held og lykke!
Hej hej!
Venlig hilsen Roman Chueshov
Læst: 97 gange
JavaScript er designet på et simpelt objektbaseret paradigme. Et objekt er en samling af egenskaber, og en egenskab er en forbindelse mellem et navn (eller nøgle) og en værdi. En egenskabs værdi kan være en funktion, i hvilket tilfælde egenskaben er kendt som en metode. Ud over objekter, der er foruddefineret i browseren, kan du definere dine egne objekter. Dette kapitel beskriver, hvordan du bruger objekter, egenskaber, funktioner , og metoder, og hvordan du opretter dine egne objekter.
Oversigt over objekterObjekter i JavaScript kan, ligesom i mange andre programmeringssprog, sammenlignes med objekter i det virkelige liv. Begrebet objekter i JavaScript kan forstås med virkelige, håndgribelige objekter.
I JavaScript er et objekt en selvstændig enhed med egenskaber og type. Sammenlign det for eksempel med en kop. En kop er en genstand med egenskaber. En kop har en farve, et design, vægt, et materiale den er lavet af osv. På samme måde kan JavaScript-objekter have egenskaber, som definerer deres egenskaber.
Objekter og egenskaberEt JavaScript-objekt har egenskaber tilknyttet. En egenskab ved et objekt kan forklares som en variabel, der er knyttet til objektet. Objektegenskaber er grundlæggende de samme som almindelige JavaScript-variabler, bortset fra vedhæftningen til objekter. Et objekts egenskaber definerer objektets egenskaber. Du får adgang til egenskaberne for et objekt med en simpel prik-notation:
Objektnavn.ejendomsnavn
Som alle JavaScript-variabler er både objektnavnet (som kunne være en normal variabel) og egenskabsnavnet store og små bogstaver. Du kan definere en egenskab ved at tildele den en værdi. Lad os f.eks. oprette et objekt med navnet myCar og give det egenskaber ved navn mærke , model og år som følger:
Var myCar = new Object(); myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969; myCar.color; // udefineret
Egenskaber for JavaScript-objekter kan også tilgås eller indstilles ved hjælp af en parentesnotation (for flere detaljer, se egenskabsadgangskoder). Objekter kaldes nogle gange associative arrays, da hver egenskab er knyttet til en strengværdi, der kan bruges til at få adgang til den. Så for eksempel kan du få adgang til egenskaberne for myCar-objektet som følger:
MyCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["år"] = 1969;
Et objektegenskabsnavn kan være en hvilken som helst gyldig JavaScript-streng eller noget, der kan konverteres til en streng, inklusive den tomme streng. Ethvert egenskabsnavn, der ikke er et gyldigt JavaScript-id (f.eks. et egenskabsnavn, der har et mellemrum eller en bindestreg, eller som starter med et tal), kan kun tilgås ved hjælp af den firkantede parentes. Denne notation er også meget nyttig, når egenskabsnavne skal bestemmes dynamisk (når egenskabsnavnet ikke bestemmes før runtime). Eksempler er som følger:
// fire variabler oprettes og tildeles på én gang, // adskilt af kommaer var myObj = new Object(), str = "myString", rand = Math.random(), obj = new Object(); myObj.type = "Priksyntaks"; myObj["date created"] = "Streng med mellemrum"; myObj = "Strengværdi"; myObj = "Tilfældigt tal"; myObj = "Objekt"; myObj[""] = "Selv en tom streng"; console.log(mitObj);
Bemærk venligst, at alle nøgler i den firkantede parentes konverteres til streng, medmindre de er symboler, da JavaScript-objektegenskabsnavne (nøgler) kun kan være strenge eller symboler (på et tidspunkt vil private navne også blive tilføjet som klassefeltforslaget skrider frem, men du vil ikke bruge dem med form). For eksempel, i ovenstående kode, når nøglen obj tilføjes til myObj, vil JavaScript kalde obj.toString() metoden og bruge denne resultatstreng som den nye nøgle.
Du kan også få adgang til egenskaber ved at bruge en strengværdi, der er gemt i en variabel:
Var propertyName = "make"; myCar = "Ford"; propertyName = "model"; myCar = "Mustang";
Brug af en konstruktørfunktionAlternativt kan du oprette et objekt med disse to trin:
For at definere en objekttype skal du oprette en funktion for objekttypen, der specificerer dens navn, egenskaber og metoder. Antag for eksempel, at du vil oprette en objekttype til biler. Du ønsker, at denne type objekt skal hedde Bil , og du vil have egenskaber for mærke, model og årgang. For at gøre dette skal du skrive følgende funktion:
Funktion Bil(mærke, model, årgang) ( dette.mærke = mærke; denne.model = model; dette.år = år; )
Bemærk brugen af dette til at tildele værdier til objektets egenskaber baseret på de værdier, der overføres til funktionen.
Nu kan du oprette et objekt kaldet mycar som følger:
Var mycar = new Car("Eagle", "Talon TSi", 1993);
Denne erklæring opretter mycar og tildeler den de angivne værdier for dens egenskaber. Så er værdien af mycar.make strengen "Eagle", mycar.year er heltallet 1993, og så videre.
Du kan oprette et hvilket som helst antal bilobjekter ved at kalde til nye. For eksempel,
Var kenscar = new Car("Nissan", "300ZX", 1992); var vpgscar = new Car("Mazda", "Miata", 1990);
Et objekt kan have en egenskab, der i sig selv er et andet objekt. Antag for eksempel, at du definerer et objekt kaldet person som følger:
Funktion Person(navn, alder, køn) ( dette.navn = navn; dette.alder = alder; dette.køn = køn; )
og instansierer derefter to nye personobjekter som følger:
Var rand = new Person("Rand McKinnon", 33, "M"); var ken = new Person("Ken Jones", 39, "M");
Derefter kan du omskrive definitionen af Bil til at inkludere en ejerejendom, der tager et personobjekt, som følger:
Funktion Bil(mærke, model, årgang, ejer) ( dette.mærke = mærke; denne.model = model; dette.år = år; denne.ejer = ejer; )
For at instantiere de nye objekter, bruger du derefter følgende:
Var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var bil2 = ny bil("Nissan", "300ZX", 1992, ken);
Bemærk, at i stedet for at sende en bogstavelig streng eller heltalsværdi, når du opretter de nye objekter, sender ovenstående udsagn objekterne rand og ken som argumenter for ejerne. Så hvis du vil finde ud af navnet på ejeren af car2, kan du få adgang til følgende ejendom:
Bil2.ejer.navn
Bemærk, at du altid kan tilføje en egenskab til et tidligere defineret objekt. For eksempel redegørelsen
Car1.color = "sort";
tilføjer en egenskabsfarve til bil1 og tildeler den værdien "sort". Dette påvirker dog ikke andre objekter. For at tilføje den nye egenskab til alle objekter af samme type, skal du tilføje egenskaben til definitionen af bilobjekttypen.
Brug af Object.create-metoden Se også- For at dykke dybere, læs om detaljerne i javaScripts objektmodel.
- Læs kapitlet om JavaScript-klasser for at lære om ECMAScript 2015-klasser (en ny måde at oprette objekter på).
Opgaven :
1. Der er tre objekter (tre biler): first_Car, second_Car og third_Car.
2. Hvert af objekterne (biler) har et sæt egenskaber og deres tilsvarende værdier (bilens egenskaber).
3. Overvej et af objekterne:
var first_Car = (
make: "VAZ" , /* fabrikant */
model: 2106 , /* model */
år: 1980 , /* fabrikationsår */
farve: "beige", /* farve */
passagerer: 5 , /* antal passagerer */
cabriolet: falsk, /* cabriolet */
kilometertal: 80000 /* kilometertal */
}
Egenskaberne mærke og farve har strengværdier;
Egenskaberne for model, år, passagerer og kilometertal er numeriske værdier;
Den konvertible ejendom har en boolsk værdi.
Du skal gøre følgende:
Skriv en funktion, der kontrollerer en bil ved hjælp af to parametre (fremstillingsår og kilometertal) og returnerer den boolske værdi sand eller falsk.
Detaljer:
1. Funktionen har en parameter car , som modtager et af 3 objekter. For eksempel er bilen diskuteret ovenfor first_Car.
2. Funktionen skal fungere med ethvert lignende objekt.
Funktion til at kontrollere objekt - sandt eller falsk
/* 1. objekt */
var first_Car = (
make: "VAZ",
model: 2106,
år: 1980,
farve: "beige",
passagerer: 5,
cabriolet: falsk,
kilometertal: 80000
}
/* 2. objekt */
var second_Car = (
mærke: "VW",
model: "Passat b3",
år: 1990,
farve: "neptun",
passagerer: 5,
cabriolet: falsk,
kilometertal: 160.000
}
/* 3. objekt */
var tredje_Bil = (
mærke: "Hyundai",
model: "Solaris",
år: 2012,
farve: "våd asfalt",
passagerer: 5,
cabriolet: falsk,
kilometertal: 15000
}
funktion god_Bil(bil) (
hvis (bil. årg<
2000
){
returnere falsk;
}
andet hvis (bil. kilometertal > 50.000 )(
returnere falsk;
}
andet(
returnere sandt;
}
}
/* Kald funktionen og udskriv resultatet */
var resultat = god_bil ( tredje_bil );
dokument. skriv(resultat);
Kommentarer til løsningen:
- Så vi har tre objekter (tre biler), som hver især kan analyseres ved hjælp af funktionen good_Car.
- Good_Car-funktionen har én parameter car , som kan være et hvilket som helst af objekterne (biler): first_Car , second_Car eller third_Car : function good_Car(car) .
- Bodyen af good_Car-funktionen indeholder en betingelse, ifølge hvilken:
Hvis værdien af bilobjektets årsejendom er mindre end 2000 (med andre ord: hvis bilen er mindre end 2.000 år gammel), så returnerer funktionen false;
Ellers, hvis værdien af bilobjektets kilometerstand er større end 50.000 (hvis bilens kilometertal er mere end 50.000), så returnerer funktionen false;
Ellers returnerer funktionen sand.
- Dernæst kalder vi funktionen og angiver objektet third_Car som en parameter (tredje bil), som består testen med succes. Resultatet af funktionen gemmes i resultatvariablen:
var resultat = good_Car(third_Car); . - Resultatvariablen vises på skærmen;
- To andre objekter (bil) vil ikke opfylde kravene i betingelserne.
Lad os fortsætte med at arbejde med objekter i javascript.
Så funktionen diskuteret ovenfor ved kontrol af objekter (biler) returnerer sandt eller falsk (sandt eller falsk).
Du kan en smule forbedre kvaliteten af opfattelsen af løsningen på det betragtede problem, det vil sige, i stedet for sandt eller falsk, skal du vise noget tekst. For at gøre dette vil vi skabe en betingelse for at analysere resultatet.
/* 1. objekt */
var first_Car = (
make: "VAZ",
model: 2106,
år: 1980,
farve: "beige",
passagerer: 5,
cabriolet: falsk,
kilometertal: 80000
}
/* 2. objekt */
var second_Car = (
mærke: "VW",
model: "Passat b3",
år: 1990,
farve: "neptun",
passagerer: 5,
cabriolet: falsk,
kilometertal: 160.000
}
/* 3. objekt */
var tredje_Bil = (
mærke: "Hyundai",
model: "Solaris",
år: 2012,
farve: "våd asfalt",
passagerer: 5,
cabriolet: falsk,
kilometertal: 15000
}
/* Funktion til kontrol af et objekt */
funktion god_Bil(bil) (
hvis (bil. årg<
2000
){
returnere falsk;
}
andet hvis (bil. kilometertal > 50.000 )(
returnere falsk;
}
andet(
returnere sandt;
}
}
var resultat = god_bil ( tredje_bil );
hvis (resultat) (
dokument. skriv ("Du har en god bil: " + tredje_Bil . år + " fabrikationsår, med kilometertal " + tredje_Bil .mileage + " km." );
}
andet(
dokument. write("Vi vil ikke tale om din bil....");
}
Løsning med en betingelse for resultatet - Resultat...
Betingelsen for at analysere resultatet er som følger.
- If(result)-udtrykket er en stenografi af udtrykket
hvis (resultat == sandt) . - Hvis resultatet af funktionen good_Car er sandt, viser vi sætningen: "Du har en god bil: 2012, med en kilometertal på 15.000 km," hvor
2012 og 15000 er værdierne for året og kilometeregenskaberne for det tredje_Bil objekt.
- Hvis betingelsen for at kontrollere resultatet giver en falsk værdi falsk , så vil vi se: "Vi vil ikke tale om din bil ...". Altså den pågældende genstand (automobil) bestod ikke testen.
Men det er ikke alt. Tag et nærmere kig på kodestykket til at kalde funktionen og analysere resultatet:
/* Kald funktionen og analyser resultatet */
var resultat = god_Bil( tredje_Bil );
hvis (resultat) (
document.write("Du har en god bil: " + third_Car .year + " fabrikationsår, med kilometertal " + third_Car .mileage + " km.");
}
andet(
document.write("Vi vil ikke tale om din bil....");
}
Her er det tredje_Car objekt (tredje bil) angivet tre gange:
- Første gang good_Car-funktionen kaldes, angives den som dens parameter: good_Car(third_Car) .
- Og så vises den to gange mere, når vi får adgang til den for at angive dens egenskaber: third_Car.year og third_Car.mileage .
Jeg kunne ikke lide dette, fordi da jeg analyserede et andet objekt (bil) vi bliver også nødt til at angive hans navn tre gange!!!
For at opnå en engangsindikation af det analyserede objekt skal du både bruge resultatet af good_Car-funktionen og en analyse af dette resultat (det er alt) sat ind i en anden funktion.
/* 1. objekt */
var first_Car = (
make: "VAZ",
model: 2106,
år: 1980,
farve: "beige",
passagerer: 5,
cabriolet: falsk,
kilometertal: 80000
}
/* 2. objekt */
var second_Car = (
mærke: "VW",
model: "Passat b3",
år: 1990,
farve: "neptun",
passagerer: 5,
cabriolet: falsk,
kilometertal: 160.000
}
/* 3. objekt */
var tredje_Bil = (
mærke: "Hyundai",
model: "Solaris",
år: 2012,
farve: "våd asfalt",
passagerer: 5,
cabriolet: falsk,
kilometertal: 15000
}
/* Funktion til kontrol af et objekt */
funktion god_Bil(bil) (
hvis (bil .år< 2000){
returnere falsk;
}
else if (bil .kilometertal > 50000)(
returnere falsk;
}
andet(
returnere sandt;
}
}
/* Indtast resultatet af good_Car-funktionen og Analyse af resultatet i en anden funktion */
funktion itog(bil)
var resultat = god_Bil(bil);
Hvis (resultat) (
document.write("Du har en god bil: " + bil .år + " fabrikationsår, med kilometertal " + bil .mileage + " km.");
}
andet(
document.write("Vi vil ikke tale om din bil....");
}
}
itog( tredje_Bil );
Løsning med en anden funktion - Resultat...
Du har en god bil: fremstillet i 2012, med en kilometerstand på 15.000 km.