Detta är del 8 av blogginläggsserien om JavaScript som tar dig från nybörjare till avancerad. Om du inte har läst det föregående blogginlägget om JavaScript-funktioner kan du kolla in det här. I slutet av denna serie kommer du att känna till alla grunder du behöver för att börja koda i JavaScript. Utan vidare ado, låt oss börja med den åttonde handledningen.
JavaScript-objekt – innehållsförteckning:
JavaScript-objekt
JavaScript-objekt har en viktig roll. Även om det är ett relativt stort ämne kan det också vara relativt enkelt att utveckla en förståelse för dem. Ett av de vanligaste sätten att förstå objekt är att tänka på det som att du återskapar en bil i kod. Vi kommer att ha två huvudkoncept när vi hanterar objekt. De kommer att ha egenskaper och metoder. Egenskaper är de saker som JavaScript-objekt har och metoder är de saker som objekt kan utföra. Låt oss se det med några exempel.
// låt oss definiera flera objekt för att få en bättre förståelse const plane = { numberOfWings: 2, canFly: true, takeOff: function(){return "Planet börjar lyfta..."}, land: function(){return "Planet börjar landa..."} } const car = { brand: "Tesla", isElectric: true, numberOfDoors: 4, moveForward: function(){return "Bilen rör sig framåt..."}, smartSummon: function(){return "Bilen börjar köra sig själv till dig..."} }
// vi kan komma åt och logga egenskaperna de har: console.log("Egenskaperna för planet:"); console.log("Kan flyga: " + plane.canFly); console.log("Totalt antal vingar: " + plane.numberOfWings); // vi kan också få planet att utföra åtgärder console.log(plane.takeOff()); console.log(plane.land()); // om du tittar noga kan du se att // vi inte direkt loggar åtgärderna inuti metoderna // istället returnerar vi dem från funktionerna // och i det här fallet loggar vi dem // på så sätt kan vi också ge användaren en alert // som säger att planet lyfter alert(plane.takeOff()); // vi kan också lära oss om egenskaperna bilen har // och logga dem också för ytterligare övning console.log("Är det en elbil? " + car.isElectric); console.log("Vad är bilmärket: " + car.brand); console.log("Hur många dörrar har den? " + car.numberOfDoors); console.log(car.smartSummon()); console.log(car.moveForward());
När vi kör koden ovan bör vi få följande utdata:
![javascript_objects](https://firmbee.com/wp-content/uploads/1-6-800x423.png)
![javascript_objects](https://firmbee.com/wp-content/uploads/2-6-800x423.png)
Vi har just sett två huvudexempel på JavaScript-objekt: ett med ett plan och ett med en bil. Precis som plan och bilar har olika egenskaper och olika saker de kan göra, kan olika objekt vi skapar göra olika saker och ha olika egenskaper. Om du tittar noga kan du börja se ett mönster i hur vi definierar objekt, egenskaper och metoder.
Vi börjar definiera objekt precis som vi definierar variabler eller konstanter, i det här fallet är det vanligtvis tillräckligt att använda konstanter när vi definierar JavaScript-objekt. Men istället för att helt enkelt tilldela den konstanten ett värde, precis som vi gjorde med vanliga konstanter, öppnar och stänger vi nu en uppsättning klammerparenteser och tillhandahåller i grunden data i nyckel-värde-par. Observera att definiera egenskaper och metoder är ganska liknande. Huvudskillnaden är att när vi definierar egenskaper tilldelar vi namnen ett värde som vi senare kommer att hämta. Men när vi definierar en metod måste vi tillhandahålla en funktion som vi senare kommer att köra. Denna skillnad återspeglas också i hur vi kallar dem senare. Till exempel:
// när vi hämtar en egenskap använder vi inte parenteser i slutet console.log("Kan flyga: " + plane.canFly); // när vi hämtar metoder, // kör vi dem också genom att lägga till parenteser efter dem // metoder här är i grunden funktioner som // tillhör ett specifikt objekt console.log(plane.takeOff());
Det är viktigt att vi lägger till parenteserna efter metoderna, precis som vi gjorde med vanliga funktioner. Annars får vi bara funktionen själv istället för att köra funktionen.
// för att köra objektmetoden bör vi // lägga till parenteserna direkt efter metodnamnet // annars får vi metoddefinitionen // som i det här exemplet alert(plane.takeOff);
![javascript_obcject](https://firmbee.com/wp-content/uploads/3-6-800x423.png)
Det visade resultatet är exakt vad vi definierade när vi skapade metoden. Du kan också se att vi definierar en funktion på språng. I det här fallet definierar vi funktionen utan namn, vilket är möjligt i JavaScript. Detta är inte alltid att föredra, eftersom det gör det tydligare när vi ser den visas. I det här fallet använder vi dock inte funktionen någon annanstans utanför objektdefinitionen, så vi behöver inte direkt ge funktionen ett namn. Istället kan vi hänvisa till funktionen från inom objektet med metodnamnet vi tilldelar det.
En annan sak du bör veta om att hämta egenskaper eller metoder från ett objekt är att det finns mer än ett sätt att uppnå det. Vi använde en av de vanligaste metoderna i exemplen ovan, vilket är att använda punktnotation. Men det finns också ett annat vanligt använt sätt att uppnå samma resultat som du bör känna till. Denna andra notation använder hakparenteser och citattecken.
// båda är lika giltiga och // ger oss samma resultat console.log(plane.numberOfWings); console.log(plane["numberOfWings"]); // kolla in JavaScript-konsolen för resultaten
![javascript_objects](https://firmbee.com/wp-content/uploads/4-5-800x423.png)
Det är fantastiskt att vi kan lagra många detaljerade egenskaper och åtgärder vi kan utföra med hjälp av objekt, men vad händer om vi behöver använda objekt, inte bara för 1 bil, utan låt oss säga för 20 bilar, 100 bilar eller till och med 1 000 000 bilar, var och en med ett unikt ID och varierande egenskapsvärden. Skulle vi behöva skriva hela den koden från grunden för varje bil? Svaret är nej. Istället kan vi utnyttja något som kallas objektkonstruktionsfunktion.
Objektkonstruktionsfunktioner
Objektkonstruktörer kan massivt snabba upp din kodningsprocess och kan avsevärt göra din kod mer DRY. Med objektkonstruktionsfunktioner definierar vi i grunden en ritning för objektet. När vi har en ritning för objektet kan vi skapa så många av den objektinstansen på ett mycket tydligare sätt, med mycket mindre upprepning. Låt oss se det med några exempel.
// så här definierar vi en ritning för objekten function Car(id, color, isElectric, numberOfDoors){ this.id = id; this.color = color; this.isElectric = isElectric; this.numberOfDoors = numberOfDoors; } // så här kan vi instansiera de // JavaScript-objekt vi vill skapa från // ritningen vi definierade ovan // i det här fallet skapar vi 3 bilobjekt // med olika värden för egenskaperna const car1 = new Car(1, "vit", true, 4); const car2 = new Car(2, "svart", true, 2); const car3 = new Car(3, "röd", false, 4); // vi kan komma åt objektets egenskaper precis som vi gjorde tidigare console.log("Färgen på första bilen är: " + car1.color); console.log("Färgen på andra bilen är: " + car2.color); console.log("Färgen på tredje bilen är: " + car3.color);
Att köra koden ovan skulle ge oss följande kodutdata:
![javascript_objects](https://firmbee.com/wp-content/uploads/5-4-800x423.png)
Som du kan se från koden ovan, när vi har en ritning kan vi helt enkelt skicka olika värden för att skapa olika JavaScript-objekt från den ursprungliga ritningen. En sak du förmodligen har märkt är att namngivningskonventionen för objektkonstruktörer är att ha den första bokstaven versal. I det här fallet, istället för att definiera den som “bil”, namngav vi den “Car”. Om vi skulle skapa en plan klass skulle vi namnge den “Plane”.
När vi vill skapa objekt från vår definierade ritning använder vi nyckelordet “new” och skriver sedan namnet på objektkonstruktionsfunktionen vi vill använda. Efter namnet öppnar och stänger vi en uppsättning parenteser och skickar in de argument vi vill skapa vårt objekt med. Observera att vi inte upprepar parameter namnen, vi skickar bara värdena i samma ordning som parametrarna. Du kanske också har märkt att när vi skapar ritningen använder vi ett nyckelord som kallas “this”. För nu bör du veta att “this”-nyckelordet tillåter att hänvisa till objektet självt, och det är en del av den boilerplate-kod vi bör skriva när vi skapar ritningen för objektet.
När du lär dig koda kan du höra termen “boilerplate-kod”, detta är faktiskt ganska vanligt, särskilt inom webbutveckling. Det betyder i grunden att det finns delar av koden som vi skriver för att få vissa inställningar på plats. Även om det inte finns en unik lösning vi tillhandahåller med kod, måste vi skriva ut dessa delar för att ha fungerande kod. Beroende på boilerplate-koden tillhandahåller vissa IDE:er till och med genvägar för att tillhandahålla dessa boilerplate-koder.
De JavaScript-objekt vi just lärt oss om är ett stort ämne och har många detaljer när vi dyker djupare. Men på en grundläggande nivå bör du veta att vi kan efterlikna verkliga objekt med kod med hjälp av objekt. Dessa JavaScript-objekt kan ha olika egenskaper och metoder som vi kan komma åt och utföra.
I den nästa handledningen kommer vi att upptäcka fler ämnen och koncept som är ganska viktiga och vanligt förekommande i JavaScript.
Robert Whitney
JavaScript-expert och instruktör som coachar IT-avdelningar. Hans huvudmål är att höja teamets produktivitet genom att lära andra hur man effektivt samarbetar medan man kodar.