Metoda volání() funkce JavaScriptu

Obsah

Zobrazit obsah

Opětovné použití metody

Pomocí metody call() můžete napsat metodu, kterou lze použít na různých objektů.

Všechny funkce jsou metody

V JavaScriptu jsou všechny funkce objektové metody.

Pokud funkce není metodou objektu JavaScript, je funkcí objektu globální objekt (viz předchozí kapitola).

Níže uvedený příklad vytvoří objekt s 3 vlastnosti, jméno, příjmení, celé jméno.

Příklad

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

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

Zkuste to sami →

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

Ve výše uvedeném příkladu toto odkazuje na objekt osoby.

this.firstName znamená vlastnost firstName this.

Stejný jako:

this.firstName znamená vlastnost firstName person.

Co je toto?

V JavaScriptu odkazuje klíčové slovo toto na objekt.

Který objekt závisí na tom, jak je tento vyvolán (použit nebo zavolán).

Klíčové slovo toto odkazuje na různé objekty v závislosti na tom, jak se používá:

V objektové metodě toto odkazuje na objekt.
Samotné toto odkazuje na globální objekt.
Ve funkci toto odkazuje na globální objekt.
Ve funkci je v přísném režimu toto nedefinováno.
V události toto odkazuje na prvek, který přijal událost.
Metody jako call(), apply() a bind() může odkazovat toto na jakýkoli objekt.

Poznámka

toto není proměnná. Je to klíčové slovo. Hodnotu toto nelze změnit.

Viz také:

Výukový tento JavaScript

Metoda volání() JavaScriptu

Metoda call() je předdefinovaná JavaScript metoda.

Lze jej použít k vyvolání (volání) metody s objektem vlastníka jako argumentem (parametrem).

Pomocí call() může objekt používat metodu patřící jinému objektu.

Tento příklad volá metodu fullName osoby a používá ji na osoba1:

Příklad

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

Zkuste to sami →

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

Tento příklad volá metodu fullName osoby a používá ji na osoba2:

Příklad

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

Zkuste to sami →

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

Metoda call() s argumenty

Metoda call() může přijímat argumenty:

Příklad

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

Zkuste to sami →

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