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

Läs mer om Prototypes på MDN

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

  1. Konstructor funktion

  2. ES6 Classes

  3. 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

  1. Konstruktorfunktion Song:  Skapa en konstruktorfunktion Song som initieras med egenskaper som title, artist, och duration.
  2. Metod playSong: Lägg till en metod playSong som skriver ut "Playing [title] by [artist]".
  3. 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".
  4. 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"

Prototype inheritance in JS

By sandra-larsson

Prototype inheritance in JS

  • 18

More from sandra-larsson