JavaScript

OOP

Agenda

Introduktion till OOP
ES6 Classes

Syfte

Varför ska jag lära mig (grunder) i OOP när FP används mest?
Det är ett kursmål i utbildningsplanen
Det ger en bra bredd
Du kanske kommer jobba med det
Du får en bättre föreståelse för exempelvis:
- new Date()
- this

Introduktion til objekt-orienterad programmering (OOP)

(oavsett programspråk)

OBJEKT-ORIENTERAD PROGRAMMERING (OOP)

OOP är ett programmeringsparadigm som syftar till att efterlikna "verkligheten" kring konceptet objekt
Precis som den reella världen består av verkliga objekt så använder man sig av objekt för att abstrahera en modell av verkligheten.
Ett objekt har/tilldelas olika egenskaper (properties) och metoder (methods)(En metod är benämningen av en funktion som tillhör en klass)
En beskrivning, en mall över ett objekts egenskaper och metoder kallas för klass (class)

ELI5 OOP

Föreställ dig en katt.

Troligtvis tänker du på en katt med ganska många egenskaper. Kanske att den har...

en svans?

fluffig?

färg?

bra balans?

ELI5 OOP

Men också att den har beteenden som...

hoppa?

jama?

KATT

Färg

Fluffig

Bra balans

En svans

Kan jama

Kan hoppa

Mallen (beskrivningen) för vår katt.

Kallas KLASS

Ett objekt skapas utifrån en klass.

KATT

new Katt()

INSTANS

Så länge man har mallen (klassen) kan man skapa hur många instanser som helst!

KLASSER OCH INSTANSER

Class User

{ 
  PROPERTIES:
  username
  password
  email

  METHODS:
  login(username, pwd) {
  //Logisk för login
  }

  createPost(str) {
  // Logik för att 
  // skapa inlägg
  }
}

Instans

{ 
  PROPERTIES:
  username = "Fritioff"
  password = "123"
  email = fritt@tech.com


  METHODS:
  login(username, pwd) {
  //Logisk för login
  }

  createPost(str) {
  // Logik för att 
  // skapa inlägg
  }
}

Instans

{ 
  PROPERTIES:
  username = "Barbara"
  password = "456"
  email = barba@tech.com


  METHODS:
  login(username, pwd) {
  //Logisk för login
  }

  createPost(str) {
  // Logik för att 
  // skapa inlägg
  }
}

new User()

4 PRINCIPER I OOP

Abstraktion

Inkapsling

Arv

Polymorphism

ABSTRAKTION

Att skapa en enkel modell av något mer komplext och endast visa det som behövs för att interagera med objektet
Abstraktion i OOP döljer detaljer och visar endast det nödvändiga av ett objekt vilket resulterar i ett enklare interface till objektet

ABSTRAKTION

DU

MOBIL

Home knapp

Volym

Ladda mobil

Abstrahera bort komplexitet

INKAPSLING

Processen som involverar att organisera funktioner och variabler i separata enheter. Där en enhet inom OOP är ett objekt
Ett objekt inom OOP kallas variabler för egenskaper och funktioner kallas istället metoder

Klass

Metoder

Egenskaper

ARV

För att inte upprepa oss i kod kan vi låta objekt ärva egenskaper
och metoder från andra objekt

Object

Number

String

Integer

Animal

Fish

Bird

Eagle

Parrot

ARV

Class User

{ 
  PROPERTIES:
  username
  password
  email

  METHODS:
  login(username, pwd) {
  //Logisk för login
  }

  createPost(str) {
  // Logik för att 
  // skapa inlägg
  }
}

Class Admin

{ 
  PROPERTIES:
  username 
  password 
  email
  permissions


  METHODS:
  login(username, pwd) {
  //Logisk för login
  }

  createPost(str) {
  // Logik för att 
  // skapa inlägg
  }
  
  deleteUser(user) {
  // Logik för att ta bort
  }
}

Klass Admin delar samma egenskaper och metoder och skulle kunna ärva från User

PARENT

CHILD

POLYMORPHISM

Hänvisar till att olika typer av objekt kan implementera samma
egenskap och/eller metoder men att de också kan implementera
egna specifika varianter av dessa.

OOP i JavaScript

OOP i Javascript

JavaScript är inte ett OOP-språk i grunden. Till skillnad från Java eller C#
Javascript ett prototyp-baserat språk och haft en annorlunda implementering för att "efterlikna" OOP
Men, från ES6 kan man skapa classer som har ungefär samma syntax som andra programmeringspråk

OOP i JavaScript

Klassen: Mallen som skapar objekt där metoder och egenskaper ingår
Objekt: En instans av en klass
Egenskaper: Information som objektet lagrar och kan använda sig av inom metoderna
Metoder: Något ska hände nära man anropar metoden på instansen
Konstruktor: En metod som körs automatiskt när ett objekt skapas och används för att initiera objektets egenskaper
Arv: Arv låter en klass ärva egenskaper och metoder från en annan klass.

class Song {
    constructor(title, artist, duration) {
        this.title = title; // "this" refererar till det nya objektet
        this.artist = artist;
        this.duration = duration;
    }

    play() {
        console.log(`Now playing: ${this.title} by ${this.artist}`);
    }

    stop() {
        console.log(`${this.title} by ${this.artist} stopped`);
    }
}

const song1 = new Song("Hallelujah", "Jeff Buckley", 300);
const song2 = new Song("Shape of You", "Ed Sheeran", 240);
const song3 = new Song("Blinding Lights", "The Weeknd", 300);

console.log(song1);
console.log(song2);
console.log(song3);

song1.play();
song1.stop();

Egenskaper

Metoder

Instans

Konstruktorn

Metoden för instansen anropas

Konstruktorn

En konstruktor i JavaScript är en speciell metod som automatiskt körs när du skapar ett nytt objekt från en klass. Den används för att:

Initiera objektets egenskaper (sätta startvärden)
Ta emot parametrar som behövs för att skapa objektet
Förbereda objektet för användning

class Song {
    constructor(title, artist, duration) {
        this.title = title; // "this" refererar till det nya objektet
        this.artist = artist;
        this.duration = duration;
    }
...
}

this

this i JavaScript är ett nyckelord som refererar till det objekt som för närvarande "äger" eller exekverar koden.

class Person {
  constructor(namn) {
    this.namn = namn;  // this = det nya objektet
  }
  
  hälsa() {
    console.log(`Hej, jag är ${this.namn}`);
    // this = objektet som anropar metoden
  }
}

const anna = new Person("Anna");
anna.hälsa(); // this = anna

Skapa den underliggande koden för ett receptprogram!

Exempel

Skapa en klass som representerar recept.
- Varje recept ska ha:
  - titel
  - tidsåtgång
  - ingredientslista
  - instruktioner
Det ska finnas en konstruktor och ett antal metoder för att
pusha/poppa in nya element till arrayerna. Man kan även lägga till
t.ex. en metod som skriver ut allt som har med receptet att göra
e.g. printRecipe.

Statiska metoder

Statiska metoder defineras på klassen
Man anropar en statisk metod genom att använda klassnamnet, inte instansobjektet. Man använder det reserverade ordet static för att ange om metoden eller egenskapen är static
Man behöver alltså inte skapa ett nytt objekt för att använda funktionen (konstruktorn "hoppas" över)

Använda en statisk metod

# JS OOP

class Square {
    constructor(side) {
        this.side = side;
    }
    findPerimeter() {
        return 4 * this.side;
    }
    
    static comparePerimeter(square1, square2) {
        if (square1.side > square2.side) {
            console.log("First square has more perimeter");
        } else if (square1.side < square2.side) {
            console.log("Second square has more perimeter");
        } else {
            console.log("Both have same perimeter");
        }

    }

}

let square1 = new Square(3);
let square2 = new Square(7);
Square.comparePerimeter(square1, square2);

Klasser med arv

Genom att använda extends ärvs en klass metoder från en klass till en annan klass
Den ärvda klassen kan innehålla fler egenskaper utöver de som är specifika för den klassen
Genom att anropa metoden super() i Child klassen anropar vi förälderns konstruktormetod och får tillgång till förälderns (måste användas) egenskaper och metoder

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, model) {
    super(brand);
    this.model = model;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

const mycar = new Model("Ford", "Mustang");

# PRESENTING CODE

Klass med arv (extend och super)

Privata fält och metoder

class ClassWithPrivate {
  #privateField;
  #privateFieldWithInitializer = 42;
  #privateMethod() {
  // ...
  }
}

För att göra en egenskap eller metod privat lägger du till # innan namnet.

Setters and Getters

Getters och Setters används ofta i Klasser. Om du vill lägga till
getters och setters i klassen använder du nyckelorden get och set.

class Car {
  constructor(brand) {
  	this.carname = brand;
  }
  get name() {
  	return this.carname;
  }
  set name(x) {
  	this.carname = x;
  }
}

Varför används get och set?

Getters och setters används kunna komma åt egenskaper som vi sätter vill ska vara privata (inkapslade)
D.v.s vi ändrar inte på själva objektet utan använder get- och setmetoder som är publika men som har åtkomst att modifiera privat data