JavaScript Funktion call() Metod


Innehållsförteckning

    Visa innehållsförteckning


Metod Återanvändning

Med metoden call() kan du skriva en metod som kan användas på olika föremål.


Alla funktioner är metoder

I JavaScript är alla funktioner objektmetoder.

Om en funktion inte är en metod för ett JavaScript-objekt är det en funktion av globalt objekt (se föregående kapitel).

Exemplet nedan skapar ett objekt med 3 egenskaper, förnamn, efternamn, fullnamn.

Exempel

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

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

Prova själv →

<!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 exemplet ovan hänvisar detta till personobjektet.

this.firstName betyder egenskapen firstName för this.

Samma som:

this.firstName betyder egenskapen firstName för person.


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

Metoden call() är en fördefinierad JavaScript-metoden.

Den kan användas för att anropa (anropa) en metod med ett ägarobjekt som argument (parameter).

Med call() kan ett objekt använda en metod som tillhör ett annat objekt.

Det här exemplet anropar metoden fullName för person och använder den på person1:

Exempel

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);

Prova själv →

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


Det här exemplet anropar metoden fullName för person och använder den på person2:

Exempel

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);

Prova själv →

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

Metoden call() kan acceptera argument:

Exempel

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");

Prova själv →

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