Fonction JavaScript, méthode apply()


Table des matières

    Afficher la table des matières


Réutilisation des méthodes

Avec la méthode apply(), vous pouvez écrire une méthode qui peut être utilisée sur différents objets.


La méthode JavaScript 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 :

Exemple

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>



La différence entre 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.


La méthode apply() avec des arguments

La méthode apply() accepte les arguments dans un tableau :

Exemple

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() :

Exemple

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>




Simuler une méthode Max sur des tableaux

Vous pouvez trouver le plus grand nombre (dans une liste de nombres) en utilisant la méthode Math.max() :

Exemple

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.

Exemple

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 :

Exemple

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>



Exemple

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>



Exemple

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>




Mode strict JavaScript

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.