JavaScript metoder

Indholdsfortegnelse

    Vis indholdsfortegnelse

Eksempel

const person = {
    firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + 
this.lastName;
  }
};

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Hvad er dette?

I JavaScript refererer dette søgeordet til et objekt.

Hvilket objekt afhænger af, hvordan dette påkaldes (bruges eller kaldes).

dette søgeordet refererer til forskellige objekter afhængigt af hvordan det bruges:

  • I en objektmetode henviser dette til objektet.

  • Alene henviser dette til det globale objekt.

  • I en funktion henviser dette til det globale objekt.

  • I en funktion, i streng tilstand, er dette udefineret.

  • I en begivenhed henviser dette til det element, der modtog begivenheden.

  • Metoder som call(), apply() og bind() kan henvise dette til ethvert objekt.

Bemærk

dette er ikke en variabel. Det er et nøgleord. Du kan ikke ændre værdien af denne

Se også:

JavaScript denne selvstudium

JavaScript metoder

JavaScript-metoder er handlinger, der kan udføres på objekter.

En JavaScript metode er en egenskab, der indeholder en funktion definition.

firstName

John

lastName

Doe

age

50

eyeColor

blå

fullName

function() {return dette.fornavn + " " + dette.efternavn;}

Metoder er funktioner gemt som objektegenskaber.

Adgang til objektmetoder

Du får adgang til en objektmetode med følgende syntaks:

objectName.methodName()

Du vil typisk beskrive fullName() som en metode for personobjektet, og fuldnavn som egenskab.

Egenskaben fullName vil køre (som en funktion), når den påkaldes med().

Dette eksempel får adgang til fuldnavn() metoden for et personobjekt:

Eksempel

name = person.fullName();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating and using an object method.</p>
<p>A method is actually a function definition stored as a property value.</p>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

Hvis du får adgang til fullName egenskaben uden(), den returnerer funktionsdefinitionen:

Eksempel

name = person.fullName;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition stored as a property value.</p>
<p>If you access it without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>

Tilføjelse af en metode til et objekt

Det er nemt at tilføje en ny metode til et objekt:

Eksempel

 person.name = function () {
  return this.firstName + " " + this.lastName;
};

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>

Brug af indbyggede metoder

Dette eksempel bruger toUpperCase()-metoden for String-objektet til at konvertere en tekst til store bogstaver:

let message = "Hello world!";
let x = message.toUpperCase();

Værdien af x, efter udførelse af koden ovenfor vil være:

HELLO WORLD!

Eksempel

person.name = function () {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>