Objektmetoden, "this"

Objekter er normalt oprettet for at repræsentere enheder fra den virkelige verden, som brugere, ordrer og så videre:

let user = {
  name: "John",
  age: 30
};

Og i den virkelige verden kan en bruger handle: vælge noget fra indkøbskurven, logge ind, logge ud osv.

Handlinger repræsenteres i JavaScript ved funktioner i egenskaber.

Eksempler på metoder

Til at begynde med, lad os lære user at sige hej:

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hej!");
};

user.sayHi(); // Hej!

Her har vi netop brugt et Funktionsudtryk til at oprette en funktion og tildele den til egenskaben user.sayHi af objektet.

Derefter kan vi kalde det som user.sayHi(). Brugeren kan nu tale!

En funktion, der er en egenskab af et objekt, kaldes dets metode.

Så her har vi en metode sayHi af objektet user.

Selvfølgelig kunne vi bruge en foruddefineret funktion som en metode, sådan her:

let user = {
  // ...
};

// først, deklarer
function sayHi() {
  alert("Hej!");
}

// så tilføj som en metode
user.sayHi = sayHi;

user.sayHi(); // Hej!

Metode ‘shorthand’

Der findes en kortere syntaks for metoder i et objektliteral:

// disse objekter gør det samme

user = {
  sayHi: function() {
    alert("Hej");
  }
};

// metode 'shorthand' ser bedre ud, ikke?
user = {
  sayHi() { // det samme som "sayHi: function(){...}"
    alert("Hej");
  }
};

Som du ser, kan vi udelade "function" og blot skrive sayHi().

For at være ærlig er noterne ikke helt identiske. Der er subtile forskelle relateret til objektarv (som vil blive dækket senere), men for nu betyder det ikke noget. I næsten alle tilfælde foretrækkes den kortere syntaks.

“this” i metoder

Det er almindeligt, at en objektmetode har brug for at få adgang til informationen, der er gemt i objektet, for at udføre sit arbejde.

For eksempel kan koden inde i user.sayHi() have brug for navnet på user.

For at få adgang til objektet kan en metode bruge nøgleordet this.

Værdien af this er objektet “før punktum”, det der bruges til at kalde metoden.

For eksempel:

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // "this" er det "nuværende objekt"
    alert(this.name);
  }

};

user.sayHi(); // John

Under udførsel af user.sayHi(), vil værdien af this være user.

Teknisk set er det også muligt at få adgang til objektet uden this, ved at referere til det via den ydre variabel:

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(user.name); // "user" i stedet for "this"
  }

};

…Men sådan kode er upålidelig. Hvis vi beslutter at kopiere user til en anden variabel, f.eks. admin = user og overskrive user med noget andet, så vil det få adgang til det forkerte objekt.

Det demonstreres nedenfor:

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert( user.name ); // fører til en fejl
  }

};


let admin = user;
user = null; // oveskriv for at gøre det tydeligt

admin.sayHi(); // TypeError: Cannot read property 'name' of null

Hvis vi brugte this.name i stedet for user.name inde i alert, så ville koden fungere.

“this” er ikke bundet

I JavaScript opfører nøgleordet this sig anderledes end i de fleste andre programmeringssprog. Det kan bruges i enhver funktion, selvom det ikke er en metode i et objekt.

Der er ingen syntaksfejl i følgende eksempel:

function sayHi() {
  alert( this.name );
}

Værdien af this evalueres under kørsel, afhængigt af konteksten.

For eksempel her er den samme funktion tildelt til to forskellige objekter og har forskellig “this” i kald:

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// brug den samme funktion i to objekter
user.f = sayHi;
admin.f = sayHi;

// disse kald har forskellig this
// "this" inde i funktionen er objektet "før punktum"
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (adgang via dot eller firkantede parenteser til metoden – det er ligegyldigt)

Reglen er simpel: hvis obj.f() kaldes, så er this obj under kaldet af f. Så det er enten user eller admin i eksemplet ovenfor.

function sayHi() {
  alert(this);
}

sayHi(); // undefined

Arrow funktioner har ikke deres eget “this”

Arrow funktioner er specielle: de har ikke deres eget this. Hvis vi refererer til this fra en sådan funktion, tages det fra den ydre “normale” funktion.

For eksempel her bruger arrow() this fra den ydre user.sayHi() metode:

let user = {
  firstName: "Karsten",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Karsten

Det er en speciel funktion ved arrow funktioner, det er nyttigt, når vi faktisk ikke ønsker at have et separat this, men snarere tage det fra den ydre kontekst. Senere i kapitlet Arrow funktioner genbesøgt vil vi gå mere i dybden med arrow funktioner.

Opsummering

• Funktioner, der er gemt i objektets egenskaber, kaldes “metoder”.
• Metoder tillader objekter at “handle” som objekt.doSomething().
• Metoder kan referere til objektet som this.

Værdien af this defineres under kørsel.

• Når en funktion erklæres, kan den bruge this, men det this har ingen værdi, før funktionen kaldes.
• En funktion kan kopieres mellem objekter.
• Når en funktion kaldes i “metode” syntaksen: objekt.metode(), er værdien af this under kaldet objekt.

Bemærk, at arrow funktioner er specielle: de har ikke deres eget this. Når this tilgås inde i en arrow funktion, tages det fra den ydre kontekst.