{"id":91757,"date":"2022-10-12T04:43:38","date_gmt":"2022-10-12T09:43:38","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/lar-dig-hur-du-skapar-klasser-i-javascript\/"},"modified":"2022-10-12T04:43:38","modified_gmt":"2022-10-12T09:43:38","slug":"lar-dig-hur-du-skapar-klasser-i-javascript","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/lar-dig-hur-du-skapar-klasser-i-javascript\/","title":{"rendered":"L\u00e4r dig hur du skapar klasser i JavaScript"},"content":{"rendered":"
\n

2015 sl\u00e4pptes ES6-versionen av programmeringsspr\u00e5ket JavaScript. Den h\u00e4r utg\u00e5van introducerade n\u00e5gra st\u00f6rre uppgraderingar av spr\u00e5ket och placerade det officiellt i kategorin objektorienterat programmeringsspr\u00e5k bland andra spr\u00e5k som Java och C++.<\/p>\n

Objektorienterad programmering fokuserar p\u00e5 objekt och de operationer som kan utf\u00f6ras p\u00e5 dem. Men innan du kan ha n\u00e5gra objekt m\u00e5ste du ha en klass.<\/p>\n

JavaScript-klasser \u00e4r en av de spelf\u00f6r\u00e4ndrande funktionerna som f\u00f6ljde med ES6-versionen av spr\u00e5ket. En klass kan beskrivas som en ritning som anv\u00e4nds f\u00f6r att skapa objekt.<\/p>\n

I den h\u00e4r sj\u00e4lvstudieartikeln f\u00e5r du l\u00e4ra dig hur du skapar och manipulerar objekt med hj\u00e4lp av JavaScript-klasser.<\/p>\n

<\/span> JavaScript-klassstruktur<\/span><\/h2>\n

N\u00e4r du skapar en klass i JavaScript finns det en grundl\u00e4ggande komponent som du alltid kommer att beh\u00f6va \u2013 den klass <\/strong>nyckelord. N\u00e4stan alla andra aspekter av JavaScript-klassen kr\u00e4vs inte f\u00f6r att den ska kunna k\u00f6ras framg\u00e5ngsrikt.<\/p>\n

En JavaScript-klass kommer att k\u00f6ras naturligt om en konstruktor inte tillhandah\u00e5lls (klassen kommer helt enkelt att skapa en tom konstruktor under k\u00f6rningen). Men om en JavaScript-klass skapas med konstruktorer och andra funktioner men inget klassnyckelord anv\u00e4nds, kommer denna klass inte att vara k\u00f6rbar.<\/p>\n

De klass<\/strong> nyckelord (som alltid ska vara med gemener) \u00e4r en n\u00f6dv\u00e4ndighet i JavaScripts klassstruktur. F\u00f6ljande exempel \u00e4r den allm\u00e4nna syntaxen f\u00f6r en JavaScript-klass. JavaScript-klasssyntaxen \u00e4r nedan:<\/p>\n

class ClassName{\/\/class body}<\/pre>\n
<\/span>  Skapa en klass i JavaScript<\/span><\/h2>\n
I programmering kan en klass ses som en generaliserad enhet som anv\u00e4nds f\u00f6r att skapa ett specialiserat objekt.  Till exempel, i en skolmilj\u00f6 kan en generaliserad enhet (en klass) vara elever och ett objekt f\u00f6r elever kan vara John Brown.  Men innan du skapar ett objekt m\u00e5ste du veta vilken data det kommer att lagra och det \u00e4r h\u00e4r JavaScript-konstrukt\u00f6rer kommer in i bilden.<\/p>\n
<\/span>  Anv\u00e4nda konstrukt\u00f6rer i JavaScript-klasser<\/span><\/h2>\n
En konstrukt\u00f6r \u00e4r avg\u00f6rande f\u00f6r klassskapandeprocessen p\u00e5 grund av n\u00e5gra anledningar;  den initierar tillst\u00e5ndet f\u00f6r ett objekt (genom dess attribut) och det anropas automatiskt n\u00e4r ett nytt objekt instansieras (definieras och skapas).<\/p>\n
<\/span>Anv\u00e4nda ett konstrukt\u00f6rsexempel<\/span><\/h3>\n
Nedan ser du ett konstruktorexempel med en f\u00f6rklaring av vad det betyder.<\/p>\n
class Student{constructor(firstName, lastName, startDate){this.firstName = firstName;this.lastName = lastName;this.startDate = startDate;}}<\/pre>\n
Koden ovan presenterar en viktig aspekt av JavaScript-klasskonstruktorn;  till skillnad fr\u00e5n andra spr\u00e5k som Java och C++, anv\u00e4nder inte en JavaScript-konstrukt\u00f6r klassnamnet f\u00f6r att skapa en konstrukt\u00f6r.  Den anv\u00e4nder konstrukt\u00f6r<\/strong> nyckelord som du kan se i exemplet ovan.<\/p>\n
De konstrukt\u00f6r <\/strong>i exemplet ovan tar tre parametrar och anv\u00e4nder detta<\/strong> nyckelord f\u00f6r att tilldela parametrarna till den aktuella instansen av klassen.  Det kan verka lite f\u00f6rvirrande, men vad du beh\u00f6ver f\u00f6rst\u00e5 \u00e4r att en klass kan ses som en ritning som anv\u00e4nds f\u00f6r att skapa m\u00e5nga hus.<\/p>\n
Varje byggt hus kan d\u00e5 ses som ett objekt i denna klass.  \u00c4ven om vart och ett av dessa hus \u00e4r skapade med samma ritning, kan de s\u00e4rskiljas genom sin specifika geografiska plats eller m\u00e4nniskorna som \u00e4ger dem.<\/p>\n
De detta<\/strong> nyckelord anv\u00e4nds f\u00f6r att s\u00e4rskilja varje objekt som skapats av en klass.  Det s\u00e4kerst\u00e4ller att r\u00e4tt data lagras och bearbetas f\u00f6r varje objekt som skapas med samma klass.<\/p>\n
<\/span>  Skapa ett objekt i JavaScript<\/span><\/h2>\n
Konstrukt\u00f6rer \u00e4r viktiga i ett spr\u00e5k som JavaScript eftersom de anger antalet attribut ett objekt i en specifik klass ska ha.  Vissa spr\u00e5k kr\u00e4ver att ett attribut (variabel) deklareras innan det kan anv\u00e4ndas i en konstruktor eller n\u00e5gon annan metod.  Detta \u00e4r dock inte fallet med JavaScript.<\/p>\n
Om du tittar p\u00e5 elevklasskonstrukt\u00f6ren ovan kan du urskilja att ett objekt i denna klass kommer att ha tre attribut.<\/p>\n
<\/span>Skapa ett objektexempel<\/span><\/h3>\n
Nedan ser du ett exempel f\u00f6r att skapa ett objekt i JavaScript.<\/p>\n
\/\/create a new objectconst john = new Student('John', 'Brown', '2018');<\/pre>\n
Koden ovan anv\u00e4nder Studerande <\/strong>klass f\u00f6r att skapa ett objekt.<\/p>\n
N\u00e4r du skapar ett objekt i en klass m\u00e5ste du anv\u00e4nda ny <\/strong>nyckelord, f\u00f6ljt av klassnamnet och de v\u00e4rden som du vill tilldela respektive attribut.  Nu har du en ny elev med f\u00f6rnamnet John, efternamnet Brown och ett startdatum 2018. Du har ocks\u00e5 en konstant variabel: john. <\/strong>Denna variabel \u00e4r viktig eftersom den l\u00e5ter dig anv\u00e4nda objektet som skapas.<\/p>\n
Utan john <\/strong>variabel kommer du fortfarande att kunna skapa ett nytt objekt med hj\u00e4lp av Studerande<\/strong> klass, men d\u00e5 kommer det inte att finnas n\u00e5got s\u00e4tt att komma \u00e5t det h\u00e4r objektet och anv\u00e4nda det med klassens olika metoder.<\/p>\n
<\/span>  Anv\u00e4nda metoder i JavaScript-klasser<\/span><\/h2>\n
En metod \u00e4r en funktion av en klass som anv\u00e4nds f\u00f6r att utf\u00f6ra operationer p\u00e5 objekt som skapas fr\u00e5n klassen.  En bra metod att l\u00e4gga till elevklassen \u00e4r en som genererar en rapport om varje elev.<\/p>\n
<\/span>Exempel p\u00e5 att skapa klassmetoder<\/span><\/h3>\n
Nedan \u00e4r ett exempel f\u00f6r att skapa klassmetoder i JavaScript.<\/p>\n
class Student{constructor(firstName, lastName, startDate){this.firstName = firstName;this.lastName = lastName;this.startDate = startDate;}\/\/ report methodreport(){return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`}}<\/pre>\n
Klassen ovan inneh\u00e5ller en metod som kommer att generera en rapport om varje elev som skapas med Studerande <\/strong>klass.  Att anv\u00e4nda Rapportera()<\/strong> metod m\u00e5ste du anv\u00e4nda ett befintligt objekt i klassen f\u00f6r att g\u00f6ra ett enkelt funktionsanrop.<\/p>\n
Tack vare \u201cskapa ett objekt-exempel\u201d ovan b\u00f6r du ha ett objekt av Studerande<\/strong> klass som tilldelas variabeln john<\/strong>.  Anv\u00e4nder sig av john<\/strong>, kan du nu framg\u00e5ngsrikt anropa Rapportera()<\/strong> metod.<\/p>\n
<\/span>Anv\u00e4nda klassmetoder Exempel<\/span><\/h3>\n
Nedan \u00e4r ett exempel p\u00e5 hur man anv\u00e4nder klassmetoder i JavaScript.<\/p>\n
\/\/create a new objectconst john = new Student('John', 'Brown', '2018');\/\/calling the report method and storing its result in a variablelet result = john.report();\/\/printing the result to the consoleconsole.log(result);<\/pre>\n
Koden ovan anv\u00e4nder Studenter <\/strong>klass f\u00f6r att producera f\u00f6ljande utdata i konsolen:<\/p>\n
John Brown started attending this institution in 2018<\/pre>\n
<\/span>  Anv\u00e4nda statiska metoder i JavaScript-klasser<\/span><\/h2>\n
Statiska metoder \u00e4r unika eftersom de \u00e4r de enda metoderna i en JavaScript-klass som kan anv\u00e4ndas utan ett objekt.<\/p>\n
Fr\u00e5n exemplet ovan kan du inte anv\u00e4nda Rapportera()<\/strong> metod utan objekt i klassen.  Detta beror p\u00e5 att Rapportera()<\/strong> Metoden f\u00f6rlitar sig p\u00e5 ett objekts attribut f\u00f6r att ge ett \u00f6nskv\u00e4rt resultat.  Men f\u00f6r att anv\u00e4nda en statisk metod beh\u00f6ver du bara namnet p\u00e5 klassen som lagrar metoden.<\/p>\n
<\/span>Skapa ett statiskt metodexempel<\/span><\/h3>\n
Nedan finns ett statiskt metodexempel f\u00f6r JavaScript.<\/p>\n
class Student{constructor(firstName, lastName, startDate){this.firstName = firstName;this.lastName = lastName;this.startDate = startDate;}\/\/ report methodreport(){return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`}\/\/static methodstatic endDate(startDate){return startDate + 4;}}<\/pre>\n
Det viktiga att notera fr\u00e5n exemplet ovan \u00e4r att varje statisk metod b\u00f6rjar med statisk <\/strong>nyckelord.<\/p>\n
<\/span>Anv\u00e4nda en statisk metod Exempel<\/span><\/h3>\n
Nedan \u00e4r ett exempel p\u00e5 hur du anv\u00e4nder en statisk metod i JavaScript.<\/p>\n
\/\/calling a static method and printing its result to the consoleconsole.log(Student.endDate(2018));<\/pre>\n
Kodraden ovan anv\u00e4nder Studenter <\/strong>klass f\u00f6r att producera f\u00f6ljande utdata i konsolen:<\/p>\n
2022<\/pre>\n
<\/span>  Det \u00e4r enkelt att skapa en JavaScript-klass<\/span><\/h2>\n
Det finns flera saker du beh\u00f6ver komma ih\u00e5g om du vill skapa en JavaScript-klass och instansiera ett eller flera objekt fr\u00e5n den:<\/p>\n
  En JavaScript-klass m\u00e5ste ha klass <\/strong>nyckelord.  En JavaScript-konstruktor anger antalet v\u00e4rden ett objekt kan ha.  Allm\u00e4nna klassmetoder kan inte anv\u00e4ndas utan ett objekt.  Statiska metoder kan anv\u00e4ndas utan ett objekt.  <\/p>\n
De tr\u00f6sta<\/strong>.logga()<\/strong> metod anv\u00e4nds i hela den h\u00e4r artikeln f\u00f6r att ge resultaten av att anv\u00e4nda b\u00e5de de allm\u00e4nna och statiska metoderna i en JavaScript-klass.  Denna metod \u00e4r ett anv\u00e4ndbart verktyg f\u00f6r alla JavaScript-utvecklare eftersom det hj\u00e4lper till i fels\u00f6kningsprocessen.<\/p>\n
Bekanta dig med console.log()<\/strong> metod \u00e4r en av de viktigaste sakerna du kan g\u00f6ra som JavaScript-utvecklare.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Kadeisha Kean (39 artiklar publicerade)
<\/strong><\/p>\n
Kadeisha Kean \u00e4r en full-stack mjukvaruutvecklare och teknisk\/teknikskribent.  Hon har den distinkta f\u00f6rm\u00e5gan att f\u00f6renkla n\u00e5gra av de mest komplexa tekniska koncepten;  producera material som l\u00e4tt kan f\u00f6rst\u00e5s av alla nyb\u00f6rjare.  Hon brinner f\u00f6r att skriva, utveckla intressant programvara och att resa runt i v\u00e4rlden (genom dokument\u00e4rer).<\/p>\n
                            Mer fr\u00e5n Kadeisha Kean<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n