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()

new Katt()

new Katt()

new Katt()

INSTANS

INSTANS

INSTANS

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()

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