JavaScript Funktion call() Metode

Indholdsfortegnelse

Vis indholdsfortegnelse

Metode Genbrug

Med metoden call() kan du skrive en metode, der kan bruges på forskellige genstande.

Alle funktioner er metoder

I JavaScript er alle funktioner objektmetoder.

Hvis en funktion ikke er en metode til et JavaScript-objekt, er det en funktion af globalt objekt (se forrige kapitel).

Eksemplet nedenfor opretter et objekt med 3 egenskaber, fornavn, efternavn, fuldt navn.

Eksempel

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

// This will return "John Doe":
person.fullName();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example creates an object with 3 properties (firstName, lastName, fullName).</p>
<p>The fullName property is a method:</p> 

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

<script>
const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

I eksemplet ovenfor henviser dette til personobjektet.

this.firstName betyder firstName-egenskaben for this.

Samme som:

this.firstName betyder firstName-egenskaben for person.

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 call() metoden

Metoden call() er en foruddefineret JavaScript metode.

Den kan bruges til at påkalde (kalde) en metode med et ejerobjekt som argument (parameter).

Med call() kan et objekt bruge en metode, der tilhører et andet objekt.

Dette eksempel kalder fullName-metoden for person, og bruger den på person1:

Eksempel

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

// This will return "John Doe":
  
  person.fullName.call(person1);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person1); 
</script>

</body>
</html>

Dette eksempel kalder fullName-metoden for person, og bruger den på person2:

Eksempel

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

// This will return "Mary Doe"
  person.fullName.call(person2);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person2:</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person2); 
</script>

</body>
</html>

Call()-metoden med argumenter

Metoden call() kan acceptere argumenter:

Eksempel

const person = {
    fullName: function(city, country) {
    return this.firstName + " " + this.lastName 
  + "," + city + "," + country;
    }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

<script>
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}

document.getElementById("demo").innerHTML = person.fullName.call(person1, "Oslo", "Norway"); 
</script>

</body>
</html>