JavaScript-metoder


Innehållsförteckning

    Visa innehållsförteckning


Exempel

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

Prova själv →

<!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>

Vad är det här?

I JavaScript hänvisar nyckelordet detta till ett objekt.

Vilket objekt beror på hur detta anropas (används eller anropas).

Nyckelordet detta hänvisar till olika objekt beroende på hur det används:

  • I en objektmetod hänvisar detta till objektet.

  • Enbart hänvisar detta till det globala objektet.

  • I en funktion hänvisar detta till det globala objektet.

  • I en funktion, i strikt läge, är detta odefinierat.

  • I en händelse hänvisar detta till elementet som tog emot händelsen.

  • Metoder som call(), apply() och bind() kan hänvisa detta till alla objekt.

Notera

detta är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna

Se även:

JavaScript-handledningen för denna


JavaScript-metoder

JavaScript-metoder är åtgärder som kan utföras på objekt.

En JavaScript metod är en egenskap som innehåller en funktion definition.

firstName

John

lastName

Hind

age

50

eyeColor

blå

fullName

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

Metoder är funktioner som lagras som objektegenskaper.


Åtkomst till objektmetoder

Du kommer åt en objektmetod med följande syntax:

objectName.methodName()

Du kommer vanligtvis att beskriva fullName() som en metod för personobjektet, och fullName som egenskap.

Egenskapen fullName kommer att köras (som en funktion) när den anropas med().

Det här exemplet får åtkomst till fullName() metoden för ett personobjekt:

Exempel

name = person.fullName();

Prova själv →

<!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>

Om du kommer åt fullName egenskapen, utan(), den returnerar funktionsdefinitionen:

Exempel

name = person.fullName;

Prova själv →

<!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>


Lägga till en metod till ett objekt

Det är enkelt att lägga till en ny metod till ett objekt:

Exempel

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

Prova själv →

<!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>

Använda inbyggda metoder

Det här exemplet använder metoden toUpperCase() för String-objektet för att konvertera en text till versaler:

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

Värdet på x, efter exekvering av koden ovan kommer att vara:

HELLO WORLD!

Exempel

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

Prova själv →

<!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>