Avec la méthode apply()
, vous pouvez écrire une méthode qui peut être utilisée sur différents objets.
apply()
La méthode apply()
est similaire à la méthode call()
(chapitre précédent).
Dans cet exemple, la méthode fullName de person est appliquée sur person1 :
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName: "Mary",
lastName: "Doe"
}
// This will return "Mary Doe":
person.fullName.apply(person1);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example the fulllName method of person is <b>applied</b> on person1:</p>
<p id="demo"></p>
<script>
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.apply(person1);
</script>
</body>
</html>
call()
et apply()
La différence est :
La méthode call()
prend les arguments séparément.
La méthode apply()
prend les arguments sous forme de tableau.
La méthode apply() est très pratique si vous souhaitez utiliser un tableau au lieu d’une liste d’arguments.
apply()
avec des argumentsLa méthode apply()
accepte les arguments dans un tableau :
const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName
+ "," + city + "," + country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example the fulllName method of person is <b>applied</b> 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"
}
document.getElementById("demo").innerHTML = person.fullName.apply(person1, ["Oslo", "Norway"]);
</script>
</body>
</html>
Par rapport à la méthode call()
:
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");
Essayez-le vous-même →
<!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>
Vous pouvez trouver le plus grand nombre (dans une liste de nombres) en utilisant la méthode Math.max()
:
Math.max(1,2,3); // Will return 3
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.max()</h2>
<p>This example returns the highest number in a list of number arguments:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max(1,2,3);
</script>
</body>
</html>
Étant donné que les tableaux JavaScript n'ont pas de méthode max(), vous pouvez appliquer la méthode Math.max()
à la place.
Math.max.apply(null, [1,2,3]); // Will also return 3
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max.apply(null, [1,2,3]);
</script>
</body>
</html>
Le premier argument (nul) n'a pas d'importance. Il n'est pas utilisé dans cet exemple.
Ces exemples donneront le même résultat :
Math.max.apply(Math, [1,2,3]); // Will also return 3
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max.apply(Math, [1,2,3]);
</script>
</body>
</html>
Math.max.apply(" ", [1,2,3]); // Will also return 3
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max.apply(" ", [1,2,3]);
</script>
</body>
</html>
Math.max.apply(0, [1,2,3]); // Will also return 3
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max.apply(0, [1,2,3]);
</script>
</body>
</html>
En mode JavaScript strict, si le premier argument de la méthode apply()
n'est pas un objet, il devient le propriétaire (objet) de la fonction invoquée. En mode "non strict", il devient l'objet global.