Robert Whitney
Dette er del 8 af JavaScript blogindlæg serien, der vil tage dig fra nybegynder til avanceret. Hvis du ikke har læst det tidligere blogindlæg om JavaScript-funktioner, kan du tjekke det her. Ved slutningen af denne serie vil du kende alle de grundlæggende ting, du har brug for at vide for at begynde at kode i JavaScript. Uden videre, lad os komme i gang med den ottende tutorial.
JavaScript objekter – indholdsfortegnelse:
JavaScript objekter
JavaScript objekter spiller en vigtig rolle. Selvom det er et relativt stort emne, kan det også være relativt nemt at udvikle en forståelse for dem. En af de mest almindelige måder at forstå objekter på er at tænke på det som at genskabe en bil i kode. Vi vil have to hovedbegreber, når vi arbejder med objekter. De vil have egenskaber og metoder. Egenskaber er de ting, som JavaScript objekter har, og metoder er de ting, som objekter kan udføre. Lad os se det med nogle eksempler.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | // lad os definere flere objekter for at få en bedre forståelseconst plane = { numberOfWings: 2, canFly: true, takeOff: function(){return "Flyet begynder at lette..."}, land: function(){return "Flyet begynder at lande..."} }const car = { brand: "Tesla", isElectric: true, numberOfDoors: 4, moveForward: function(){return "Bilen bevæger sig fremad..."}, smartSummon: function(){return "Bilen begynder at køre sig selv til dig..."}} |
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | // vi kan tilgå og console logge de egenskaber, de har:console.log("Egenskaberne for flyet:");console.log("Kan flyve: " + plane.canFly);console.log("Samlet antal vinger: " + plane.numberOfWings);// vi kan også få flyet til at udføre handlingerconsole.log(plane.takeOff());console.log(plane.land());// hvis du ser nærmere efter, kan du se at // vi ikke direkte console.logger handlingerne inde i metoderne// i stedet returnerer vi dem fra funktionerne// og i dette tilfælde console logger vi dem// på denne måde kan vi også give brugeren en alert// der fortæller at flyet letteralert(plane.takeOff());// vi kan også lære om de egenskaber, bilen har // og console logge dem for yderligere øvelseconsole.log("Er det en elektrisk bil? " + car.isElectric);console.log("Hvad er mærket på bilen: " + car.brand);console.log("Hvor mange døre har den? " + car.numberOfDoors);console.log(car.smartSummon());console.log(car.moveForward()); |
Når vi kører koden ovenfor, bør vi få følgende output:
Vi har lige set to hovedeksempler på JavaScript objekter: et med et fly og et med en bil. Ligesom fly og biler har forskellige egenskaber og forskellige ting, de kan gøre, kan forskellige objekter, vi opretter, gøre forskellige ting og have forskellige egenskaber. Hvis du ser nærmere efter, kan du begynde at se et mønster i den måde, vi definerer objekter, egenskaber og metoder på.
Vi begynder at definere objekter ligesom vi definerer variabler eller konstanter, i dette tilfælde er det normalt tilstrækkeligt at bruge konstanter, når vi definerer JavaScript objekter. Men i stedet for blot at tildele den konstant en værdi, ligesom vi gjorde med almindelige konstanter, åbner og lukker vi nu et sæt krøllede parenteser og giver i bund og grund dataene i nøgle-værdi par. Bemærk, at definitionen af egenskaber og metoder er ret ens. Den største forskel er, at når vi definerer egenskaber, tildeler vi navnene en værdi, som vi senere vil hente. Men når vi definerer en metode, skal vi give en funktion, som vi senere vil køre. Denne forskel afspejles også i, hvordan vi kalder dem senere. For eksempel:
1 2 3 4 5 6 7 | // når vi henter en egenskab bruger vi ikke parenteser til slutconsole.log("Kan flyve: " + plane.canFly);// når vi henter metoder, // kører vi dem også ved at tilføje parenteser efter dem// metoder her er i bund og grund funktioner, der // tilhører et specifikt objektconsole.log(plane.takeOff()); |
Det er vigtigt, at vi tilføjer parenteserne efter metoderne, ligesom vi gjorde med almindelige funktioner. Ellers vil vi bare have selve funktionen i stedet for at udføre funktionen.
1 2 3 4 5 | // for at udføre objektmetoden skal vi// tilføje parenteserne lige efter metode navnet// ellers får vi metode definitionen // som i dette eksempelalert(plane.takeOff); |
Det viste resultat er præcis, hvad vi definerede, mens vi oprettede metoden. Du kan også se, at vi definerer en funktion undervejs. I dette tilfælde definerer vi funktionen uden et navn, hvilket er muligt i JavaScript. Dette er ikke altid at foretrække, da det at give funktionen et navn gør det mere klart, når vi ser det blive vist. I dette tilfælde bruger vi dog ikke funktionen andre steder uden for objektdefinitionen, så vi behøver ikke direkte at give funktionen et navn. I stedet kan vi henvise til funktionen fra inden for objektet med det metode navn, vi tildeler det.
En anden ting, du skal vide om at hente egenskaber eller metoder fra et objekt, er, at der er mere end én måde at opnå det på. Vi brugte en af de mest almindelige praksisser i eksemplerne ovenfor, som er at bruge punktnotation. Men der er også en anden almindeligt anvendt måde at opnå det samme resultat, som du bør vide om. Denne anden notation bruger firkantede parenteser og citationstegn.
1 2 3 4 5 | // begge er lige gyldige og // giver os de samme resultaterconsole.log(plane.numberOfWings);console.log(plane["numberOfWings"]);// tjek JavaScript-konsollen for resultaterne |
Det er fantastisk, at vi kan gemme mange detaljerede egenskaber og handlinger, vi kan udføre ved hjælp af objekter, men hvad hvis vi skulle bruge objekter, ikke bare til 1 bil, men lad os sige til 20 biler, 100 biler eller endda 1.000.000 biler, hver med en unik ID og varierende egenskabs værdier. Skulle vi skrive hele den kode fra bunden for hver bil? Svaret er nej. I stedet kan vi udnytte noget, der kaldes objekt konstruktørfunktion.
Objekt konstruktørfunktioner
Objektkonstruktører kan massivt fremskynde din kodningsproces og kan betydeligt gøre din kode mere DRY. Med objektkonstruktørfunktioner definerer vi i bund og grund en skabelon for objektet. Når vi har en skabelon for objektet, kan vi oprette så mange af den objektinstans på en meget klarere måde, med meget mindre gentagelse. Lad os se det med nogle eksempler.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | // sådan definerer vi en skabelon for objekternefunction Car(id, color, isElectric, numberOfDoors){ this.id = id; this.color = color; this.isElectric = isElectric; this.numberOfDoors = numberOfDoors;}// sådan kan vi instantiere de // JavaScript objekter, vi ønsker at oprette fra // den skabelon, vi definerede ovenfor// i dette tilfælde opretter vi 3 bilobjekter // med forskellige værdier for egenskaberneconst car1 = new Car(1, "hvid", true, 4);const car2 = new Car(2, "sort", true, 2);const car3 = new Car(3, "rød", false, 4);// vi kan tilgå objekt egenskaber ligesom vi gjorde førconsole.log("Farven på den første bil er: " + car1.color);console.log("Farven på den anden bil er: " + car2.color);console.log("Farven på den tredje bil er: " + car3.color); |
Kørsel af koden ovenfor ville give os følgende kodeoutput:
Som du kan se fra koden ovenfor, når vi har en skabelon, kan vi simpelthen videregive forskellige værdier for at oprette forskellige JavaScript objekter fra den oprindelige skabelon. En ting, du sandsynligvis har bemærket, er, at navngivningskonventionen for objektkonstruktører er at have det første bogstav med stort. I dette tilfælde, i stedet for at definere det som “bil”, navngav vi det “Car”. Hvis vi skulle oprette en flyklasse, ville vi navngive den “Plane”.
Når vi vil oprette objekter fra vores definerede skabelon, bruger vi nøgleordet “new” og skriver derefter navnet på den objektkonstruktørfunktion, vi ønsker at bruge. Efter navnet åbner og lukker vi et sæt parenteser og videregiver de argumenter, vi ønsker at oprette vores objekt med. Bemærk, at vi ikke gentager parameter navnene, vi videregiver bare værdierne i den samme rækkefølge som parametrene. Du har måske også bemærket, at når vi opretter skabelonen, bruger vi et nøgleord kaldet “this”. For nu skal du vide, at “this” nøgleordet tillader at henvise til objektet selv, og det er en del af den boilerplate kode, vi skal skrive, når vi opretter skabelonen for objektet.
Når du lærer at kode, kan du høre termen “boilerplate kode”, dette er faktisk ret almindeligt, især i webudvikling. Det betyder grundlæggende, at der er dele af koden, som vi skriver for at få visse opsætninger på plads. Selvom der ikke er en unik løsning, vi giver med koden, skal vi skrive disse dele for at have en fungerende kode. Afhængigt af boilerplate koden giver nogle IDE’er endda genveje til at give disse boilerplate koder.
De JavaScript objekter, vi lige har lært om, er et stort emne og har mange detaljer, når vi dykker dybere. Men på et fundamentalt niveau skal du vide, at vi kan efterligne virkelige objekter med kode ved hjælp af objekter. Disse JavaScript objekter kan have forskellige egenskaber og metoder, som vi kan tilgå og udføre.
I den næste tutorial vil vi opdage flere emner og koncepter, der er ret vigtige og almindeligt anvendt i JavaScript.
Robert Whitney
JavaScript-ekspert og instruktør, der coacher IT-afdelinger. Hans hovedmål er at hæve teamproduktiviteten ved at lære andre, hvordan man effektivt samarbejder, mens man koder.
