Klasser og moduler i JS

Computerspace · FGU · Programmering i JavaScript

🏗️ Hvad er klasser og moduler i JavaScript?

ES6 klasser giver objektorienteret programmering med ren syntax. Moduler lader dig organisere kode i separate filer.

ES6 Klasser:

```javascript

class Dyr {

// Constructor – køres ved oprettelse

constructor(navn, lyd) {

this.navn = navn; // public property

this.lyd = lyd;

this.#energi = 100; // Private field (ES2022)

}

// Private field

#energi;

// Metode

tal() {

console.log(${this.navn} siger ${this.lyd}!);

}

// Getter

get erSulten() {

return this.#energi < 30;

}

// Static metode – tilhører klassen, ikke instansen

static skabHund(navn) {

return new Dyr(navn, "Vuf");

}

}

const kat = new Dyr("Misser", "Miav");

kat.tal(); // "Misser siger Miav!"

const hund = Dyr.skabHund("Fido");

```

Nedarvning med extends og super:

```javascript

class Kæledyr extends Dyr {

constructor(navn, lyd, ejer) {

super(navn, lyd); // Kald parent constructor

this.ejer = ejer;

}

præsentér() {

super.tal(); // Kald parent metode

console.log(Ejes af ${this.ejer});

}

}

const hund = new Kæledyr("Fido", "Vuf", "Anna");

hund.præsentér();

```

ES Moduler – organiser din kode:

```javascript

// utils.js – named exports

export function add(a, b) { return a + b; }

export const PI = 3.14159;

export class Beregner { / ... / }

// main.js – named imports

import { add, PI, Beregner } from './utils.js';

// Default export (én per fil)

// matematik.js

export default function kvadrat(x) { return x * x; }

// Importér default export (vælg dit eget navn)

import kvadrat from './matematik.js';

import minKvadrat from './matematik.js'; // Samme funktion, andet navn

```

---

🎓 Læringsmål for Klasser og moduler i JS

Læringsmål

• Definere klasser med constructor, metoder, getters og private fields
• Implementere nedarvning med extends og super
• Forstå forskellen på instansmetoder og static metoder
• Bruge ES modules med import/export til at organisere kode i filer

Sådan kan du arbejde med emnet

• Hvad er en klasse i JavaScript og hvornår bruger man den?
• Hvad er extends og super?
• Hvad er forskellen på named export og default export?
• Hvad er private fields i JavaScript?

⚠️ Typiske fejl at undgå

• Glemmer new ved oprettelse af objekter fra klasser
• this-binding problemer – arrow functions bevarer this-konteksten, traditionelle funktioner ikke
• Circular imports – to moduler der importerer hinanden kan give problemer

---

💡 Tips til at komme i gang

• Organiser kode i moduler – separate filer for klasser, utilities og data
• Prøv private fields (#) – det er standard måden til indkapsling i moderne JS
• Lær TypeScript som næste skridt – det tilføjer statisk typning oven på JavaScript