JavaScript

Prototype inheritance

Syfte

Få en förståelse för grundstrukturen i JS
Vad som menas med Protoype?
Förstå Legacy-kod innan ES6 classes

Prototype och Prototype inheritance

Exempel Array Prototype

const num = [7, 11, 13]

num.map(element => element * 10)

Array.prototype är prototypen för alla array-objekt vi skapar i Javascript. Därför kan alla arrays som skapas få åtkomst till map() och fler som finns i denna prototype.

I princip allt inom JS är ett objekt. T.ex funktioner och arrayer
Alla objekt har en egenskap som kallas för "prototype", som själv är ett objekt.
När nya objekt skapas (t.ex en array) ärver den metoder och egenskaper från prototype-objektet. (Array.prototype). Det kallas "Prototype inheritance"
Eftersom "prototype" själv är ett objekt så har den sin egen prototype som slutar med "Object.prototype" detta kallas för Prototype chain

Prototype i JavaScript

Kodexempel med prototype

KLASSISK OOP MED KLASSER

OOP i JS med PROTOTYPES

KLASS

INSTANS

OBJEKT

PROTOTYPE

Innehåller metoder

Får åtkomst till metoderna

"Prototypal inheritance": Prototypen har metoder som är åtkomliga till alla objekt som är länkat till den prototypen

-> Hur kan vi skapa nya objekt (instanser) utan att använda oss av "klassiska" klasser?

-> Hur kan vi länka objekt till en prototype så att den kan delas med alla instanser från det objektet?

Men hur efterliknar vi OOP i JS?

3 sätt att implementera Prototype inheritance i JS

Konstructor funktion
ES6 Classes
Object.create

👈

Testar denna del för

grundförståelse

Sen all-in för detta sätt

Constructor, this och new

OOP gamla sättet med prototype

Varje objekt/funktion som skapas har en Prototype. Därför kan vi alltså lägga till metoder/funktioner på dess Prototype!

function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.sayHello = function() {
    return "Hello, " + this.name;
};

const person1 = new Person("Tim", 31)

console.log(person1.sayHello())

Testa själv JS-OOP the old way

Konstruktorfunktion Song: Skapa en konstruktorfunktion Song som initieras med egenskaper som title, artist, och duration.
Metod playSong: Lägg till en metod playSong som skriver ut "Playing [title] by [artist]".
Skapa Instanser: Skapa två instanser av Song, till exempel en låt med titeln "Happy" av "Pharrell" och en annan med titeln "Imagine" av "John Lennon".
Anropa playSong: Anropa playSong på båda instanserna och verifiera att utskriften är korrekt.

// Konstrukturfunktion
function Song(title, artist, duration) {
    this.title = title;
    this.artist = artist;
    this.duration = duration;
  }
  
  Song.prototype.playSong = function() {
      return `Playing ${this.title} by ${this.artist}`;
  }
  
  const song1 = new Song("Happy", "Pharell", 3.45);
  const song2 = new Song("Imagine", "John Lennon", 4.05);
  
  console.log(song1.playSong()) // "Playing Happy by Pharell"
  song2.playSong(); // "Playing Imagine by John Lennon"