Tags:    javascript

Oversigt

1. Hvad er OOP?
... 1.1. Hvorfor bruge OOP?
2. Hvordan bruger man OOP i JavaScript?
... 2.1. Variabler
... 2.2. Funktioner
...... 2.2.1. Prototype
...... 2.2.1. Manuel tilføjelse af funktioner
... 2.3. Prototype vs. manuel tilføjelse af funktioner
3. Afrunding

1. Hvad er OOP?

OOP står for objekt orienteret programmering, og dækker over brugen af klasser. Når man taler om klasser inden for programmering, er det egentligt en sammensætning af funktioner og variabler, som arbejder sammen med hinanden, for at løse diverse problemsætninger.
Man kunne f.eks. have behov for at lave et tabbed objekt til sin side - Her ville det være ideelt at lave en klasse, som indeholdt de funktioner samt variabler der var nødvendige for at lave det tabbede-objekt.

Hvis du i forvejen programmerer i C++, C# eller Delphi (ikke så udbredt i Delphi), så kender du formentligt allerede til principperne for OOP, men det er en smule anderledes at benytte OOP i js, men mere om dette senere!

1.1. Hvorfor bruge OOP?

Der er mange grunde til at benytte OOP, men som jeg ser det, så er de 2 væsentligtste fordele ved OOP

1. Du kan genbruge din kode - Lad os tænke videre over det tidligere eksempel med et tabbed objekt. Hvad nu hvis du skulle bruge 3 tabbede objekter på sammme side? - Så ville det være nok at kode klassen én gang, og blot oprette 3 objekter!
2. Det gør din kode mere overskuelig, hvis du skriver klasser, og gemmer disse i JavaScript-Libaries (mere om dette i næste artikel!).

Men lad os komme i gang med at få lavet nogle klasser!

2. Hvordan bruger man OOP i JavaScript?

I js starter man med at lave en constructor-funktion - Den funktion, som skal kaldes når klassen skal oprettes:

function Constructor() {
}

Når man opretter klasser, er det god skik at skrive constructor-funktionens navn med stort forbogstav, i modsætning til normale funktioner, som altid bør starte med små bogstaver.

Når så man har oprettet sin klasse, er det jo klart at man ønsker at kunne oprette et objekt, som indeholder klassens funktioner og variabler. Det gøres meget simpelt ved at benytte new operatoren:

var class = new Constructor();

Syntaksen for at oprette en klasse er:

[var] [i]variabel-navn[/i] [b]= new[/b] [i]Klasse-navn[/i]([parametre]);

Når nu du har oprettet en klasse, så er det jo væsentligt at vide hvordan du tilføjer variabler og funktioner til denne - Ellers ville der jo ikke være nogen idé i at benytte dem, så lad os fortsætte med hvordan du tilføjer variabler:

2.1. Variabler

Når du laver klasser vil du ofte have behov for at gemme informationer specifikt til denne klasse, men dette skal gøres lidt anderledes end normalt. Vi skal nu benytte this operatoren, som fortæller browseren at variablen skal vedhæftes specifikt til denne klasse:

function Constructor() {
        this.variabel = "test";
}

var class = new Constructor();
alert(class.variabel);

Dette skulle gerne give en besked med indholdet test.

På denne måde kan du få variablerne til at "høre til" klassen, og hvis du vil have fat i dem i andre funktioner fra klassen skal du blot bruge

this.variabel

Vil du derimod have fat i variablen uden for klassen skal du bruge

[i]klasse[/i].variabel

Hvor klasse skal udskiftes med navnet på den variabel, som indeholder klassen.

Nu skulle du så gerne lære at tilføje nogle funktioner, så lad os komme lidt videre

2.2. Funktioner

For at tilføje en funktion til din klasse kan du benytte 2 metoder. Den første går ud på at nedarve funktionerne til klassen med prototype operatoren, og den anden går ud på manuelt at tilføje funktionerne i Constructor funktionen.

2.2.1. Prototype

For at tilføje en funktion til en klasse med prototype operatoren skal du selvfølgelig først oprette din klasse:

function Constructor() {
}

Derefter tilføjer du funktionerne til din klasse, ved at nedarve dem med prototype operatoren, lad os sige vi vil tilføje functionOne og functionTwo:

Constructor.prototype.functionOne = function([[i]Parametre[/i]]) {
  // Kode
}

Constructor.prototype.functionTwo = function([[i]Parametre[/i]]) {
  // Kode
}

Som du kan se, så definerer vi funktionerne lidt anderledes end vi er vant til, da de først skal nedarves til klassen, og derefter defineres som funktioner.
Den generelle syntaks for at nedarve funktioner til en klasse med prototype operatoren er:

[i]Klasse[/i].[b]prototype[/b].[i]funktion[/i] = function([[i]Parametre[/i]]) {
  // Kode
}

2.2.2. Manuel tilføjelse af funktioner

Når vi tilføjer funktionerne manuelt til en klasse, så opretter vi den som vi plejer, og tilføjer dem så i Constructor funktionen, lad os tage udgangspunkt i samme eksempel som før:

function Constructor() {
  [b]this[/b].functionOne = Constructor_functionOne;
  [b]this[/b].functionTwo = Constructor_functionTwo;
}

function Constructor_functionOne() {
  // Kode
}

function Constructor_functionTwo() {
}

Som du kan se, så er det bare at oprette funktionerne som normalt, og så tilføje dem i constructoren lige som med variabler.
Det er som regel en god ide at starte funktioner, som tilføjes til en klasse, med klassens navn - På den måde undgår man kambulation med andre funktionsnavne.

2.3. Prototype vs. manuel tilføjelse af funktioner

Der er reelt set ikke nogen forskel på hvilken måde man benytter til at tilføje funktionerne til sin klasse - Det er et spørgsmål om hvilken måde man finder lettest at benytte.
Personligt foretrækker jeg prototype operatoren, da man på den måde får et bedre overblik over sin kode (Synes jeg!).

3. Afrunding

Hvornår skal du så benytte klasser? - Der er 2 tidspunkter det kan betale sig, at benytte klasser.
1) Hvis du skal bruge det samme stykke kode mange gange, lad os f.eks. sige, at du har lavet en klasse til at redigere et billede, og har behov for at gøre det flere steder, så kan du genbruge klassen.
2) Hvis du har en masse funktioner, som alle vedrører en bestemt ting på din side, kan det give et bedre overblik at samle det i en klasse.

Når du koder klasser, kan det ofte foretrækkes at gemme klassen i et eksternt JavaScript Libary, med endelsen .js, og så tilføje det på sin side med følgende kode:

<script type="text/javascript" src="DinFil.js"></script>

I DinFil.js skal du så gemme følgende, med udgangspunkt i det tidligere eksempel:

function Constructor() {
  // Kode
}

Constructor.prototype.functionOne = function() {
  // Kode
}

Constructor.prototype.functionTwo = function() {
  // Kode
}

Det var alt for denne gang, er du i tvivl, så spørg i forummet

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X