JS 1.4 OOP i JavaScript

Table of contents

• Vad är OOP?
  • Funktionell programmering
  • Objekt orienterad programmering
• Klasser
  • Syntax
  • Array = inbyggd klass
• Arv

Vad är OOP?

Två vanliga sätt att programmera:

1. Objekt orienterad programmering
   • blandar data och funktioner i objekt
2. Funktionell programmering
   • separerar data och funktioner (väldigt förenklat, mer om det här)

JavaScript = ett funktionellt språk

Funktionell programmering

data

const person1 = {
    name: 'Karin',
    age: 36
}

funktion

function updateName(obj, name) {
    obj.name = name;
}

uppdatera data med funktion

updateName(person, 'Vilgot');

Objekt orienterad programmering

funktionen ligger ihop med datan

const person2 = {
    name: 'David'
    updateName: (name) => {
        person2.name = name;
    }
}

uppdatera data

person.updateName('Bosse');

Klasser

JavaScript är vanligtvis ett funktionellt språk, men det går också att skriva det mer objektorienterat. När vi blandar data och funktioner i objekt så används vanligtvis klasser. En klass i JS är en funktion som kan användas för att skapa ett objekt. Alltid stor bokstav när det är klasser.

Syntax

class Fruit {
}

När funktioner skrivs i klasser tas ordet function bort. Constructor är en inbyggd funktion i JS för att skapa nya objekt av klasser.

class Fruit {

  constructor(name, isSour, rating) {
    // objektets variabel namn blir name etc
    this.name = name;
    this.isSour = isSour;
    this.rating = rating;
  }
}

Att göra nya objekt via klasser kallas instansiera objekt. Exempel på instansierat objekt från klassen Fruit:

const lemon = new Fruit('lemon', true, 3);
console.log(lemon);
// Fruit {name: "lemon", isSour: true, rating: 3}

Vi kan sen ha fler funktioner inuti klassen för att göra något med datan. När datan ska anropas (användas) så används this.

class Fruit {
	
  constructor(name, isSour, rating) {
    this.name = name;
    this.isSour = isSour;
    this.rating = rating;
  }

  describe() {
    if (this.rating >= 3) {
      return this.name + ' is tasty!';
    } else {
      return `${this.name} is not so good.`;
    }
  }
}

console.log(lemon.describe());
// lemon is tasty!

Ytterligare ett objekt från klassen:

const rottenOrange = new Fruit('orange', false, 1);

console.log(rottenOrange.describe());
// orange is not so good.

Array = inbyggd klass

En array är en inbyggd klass i JavaScript. Kan instansieras på två sätt:

const arr = [1, 2, 3];
const arr2 = new Array(1, 2, 3);

Arv

En klass kan ärva saker från en annan klass, via extends.

Exempel class

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

const rectangle1 = new Rectangle(20, 30);
console.log(rectangle1.area());
// 600

Class som ärver/extendar classen ovan

class Square extends Rectangle {
  // använder allt som finns i klassen Rectangle
  constructor(length) {
    super(length, length); // för att komma åt Rectangle's constructor
  }
}

const square = new Square(10);
console.log("square area: ", square.area());
console.log("square heigth: ", square.height);
console.log("square width: ", square.width);
// square area: 100
// square height: 10
// square width: 10

När du extendar en class så går det också att ändra/skriva över funktionerna i ursprungs classen, genom att definiera dem igen.

Exempel class med funktion

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

const animal = new Animal("mouse");
animal.speak();
// mouse makes a noise

Skapa en ny class som ärver Animal, och skriver över funktionen speak().
Genom att definiera speak() igen så skrivs det vi ärvde från Animal över/overridas.

Class som extendar classen ovan samt omdefinierar funktionen

class Dog extends Animal {
  speak() {
    // override
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Pluto");
dog.speak();
// Pluto barks