Med metoden call()
kan du skriva en metod som kan användas på olika föremål.
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.
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.
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.
detta
är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna
.
JavaScript-handledningen för denna
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:
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:
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>
Metoden call()
kan acceptera argument:
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>