Méthodes JavaScript


Table des matières

    Afficher la table des matières


Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Qu'est-ce que ce ?

En JavaScript, le mot clé this fait référence à un objet.

Quel objet dépend de la façon dont ce est invoqué (utilisé ou appelé).

Le mot-clé this fait référence à différents objets selon la façon dont il est utilisé :

  • Dans une méthode objet, this fait référence à l'objet.

  • Seul, this fait référence à l'objet global.

  • Dans une fonction, this fait référence à l'objet global.

  • Dans une fonction, en mode strict, ce est non défini.

  • Dans un événement, this fait référence à l'élément qui a reçu l'événement.

  • Des méthodes telles que call(), apply() et bind() peut faire référence à ce à n'importe quel objet.

Note

ce n'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this

Voir également:

Le didacticiel JavaScript ce


Méthodes JavaScript

Les méthodes JavaScript sont des actions pouvant être effectuées sur des objets.

Une méthode JavaScript est une propriété contenant une fonction définition.

firstName

John

lastName

Biche

age

50

eyeColor

bleu

fullName

function() {return this.firstName + " " + this.lastName;}

Les méthodes sont des fonctions stockées en tant que propriétés d'objet.


Accéder aux méthodes objet

Vous accédez à une méthode objet avec la syntaxe suivante :

objectName.methodName()

Vous décrirez généralement fullName() comme une méthode de l'objet personne, et fullName comme propriété.

La propriété fullName s'exécutera (en tant que fonction) lorsqu'elle sera invoquée avec().

Cet exemple accède à la méthode fullName() d'un objet personne :

Exemple

name = person.fullName();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating and using an object method.</p>
<p>A method is actually a function definition stored as a property value.</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

Si vous accédez à la propriété fullName, sans(), elle renverra la définition de la fonction :

Exemple

name = person.fullName;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition stored as a property value.</p>
<p>If you access it without (), it will return the function definition:</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>


Ajout d'une méthode à un objet

Ajouter une nouvelle méthode à un objet est simple :

Exemple

 person.name = function () {
  return this.firstName + " " + this.lastName;
};

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>

Utiliser des méthodes intégrées

Cet exemple utilise la méthode toUpperCase() de l'objet String, pour convertir un texte en majuscule :

let message = "Hello world!";
let x = message.toUpperCase();

La valeur de x, après exécution du code ci-dessus sera :

HELLO WORLD!

Exemple

person.name = function () {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>