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!

Når vi skriver vores kode ved hjælp af objekter til at repræsentere enheder, kaldes det objektorienteret programmering, forkortet: “OOP”.

OOP er en stor ting, en interessant videnskab i sig selv. Hvordan vælger man de rigtige enheder? Hvordan organiserer man interaktionen mellem dem? Det er arkitektur, og der findes gode bøger om det emne, som “Design Patterns: Elements of Reusable Object-Oriented Software” af E. Gamma, R. Helm, R. Johnson, J. Vissides eller “Object-Oriented Analysis and Design with Applications” af G. Booch, og flere.

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.