Méthodes d'objet JavaScript, "this"

En JavaScript, les objets sont créés pour représenter des entités du monde réel, tels que des commandes, des utilisateurs, et plus encore. Voici un exemple:

Javascript objects
let site = { name: "W3Docs", }; console.log(site);

Dans le monde réel, vous agissez comme ceci : vous connectez, vous déconnectez, vous choisissez quelque chose dans un panier d'achat, et plus encore.

En JavaScript, vous pouvez représenter des actions par des fonctions dans des propriétés.

Exemples de Méthodes

Votre première étape dans l'étude des méthodes d'objet JavaScript devrait être d'apprendre comment dire "bienvenue". L'exemple ressemblera à cela:

Javascript object methods
let site = { name: "W3Docs", }; site.welcome = function () { console.log("Welcome to W3Docs!"); }; site.welcome(); // Welcome to W3Docs!
Ici, une Expression de Fonction est utilisée pour créer une fonction particulière et l'attribuer à la propriété site.welcome de l'objet.

Ainsi, le site ne peut répondre qu'après l'avoir appelé.

Une fonction particulière qui est la propriété d'un objet est connue sous le nom de méthode. Dans l'exemple donné ci-dessus, welcome est une méthode de l'objet site.

De plus, une fonction pré-déclarée peut être utilisée comme une méthode. Pour ce faire, vous devez invoquer la commande suivante:

Javascript object methods
let site = { name: "W3Docs", }; site.welcome = function () { console.log("Welcome to W3Docs!"); }; site.welcome(); // Welcome to W3Docs!

Description de la Programmation Orientée Objet

La Programmation Orientée Objet (en abrégé “OOP”) vise à écrire des codes en utilisant des objets pour représenter des entités.

OOP peut être décrite comme une science en soi. Beaucoup de recherche a été faite pour explorer pleinement comment choisir les bonnes entités, comment organiser l'interconnexion entre elles, et plus encore. C'est une toute nouvelle architecture.

Raccourci de Méthode

Vous pouvez utiliser une syntaxe courte pour les méthodes d'un objet comme ceci:

Javascript objects methods
// method shorthand let site = { welcome() { console.log("Welcome to W3Docs"); } }; site.welcome();

Dans cet exemple, vous pouvez voir que le mot “fonction” est omis, et il est simplement écrit welcome. Bien sûr, il peut y avoir des différences liées à l'héritage d'objet. Dans tous les cas, dans la plupart des cas, on préfère utiliser une syntaxe plus courte.

"this" dans les Méthodes d'Objet

Généralement, pour faire son travail, une méthode d'objet doit avoir les informations conservées dans l'objet.

Par exemple, le code qui est à l'intérieur de site.welcome() pourrait avoir besoin du site.name.

Une méthode peut utiliser le mot-clé “this” pour accéder à l'objet.

L'objet “avant le point” devrait être la valeur de “this”.

Par exemple, vous pouvez appeler la méthode comme suit:

Javascript objects call the method
let site = { name: "W3Docs", welcome() { // "this" is the "current object" console.log(this.name); } }; site.welcome(); // W3Docs

Dans l'exemple ci-dessus, lors de l'exécution de site.welcome(), site sera la valeur de “this”.

Vous avez la possibilité d'accéder à l'objet sans utiliser “this”. Il suffit de le référencer via la variable externe comme ceci:

Javascript "this"
let site = { name: "W3Docs", welcome() { console.log(site.name); // "site" instead of "this" } }; site.welcome();

Mais, prenez en compte que ces types de codes peuvent ne pas être fiables. En cas de copie du site vers une variable différente (par exemple, anotherSite = site) en écrasant site avec autre chose, vous serez dirigé vers un mauvais objet.

Voici un exemple:

Javascript overwrite object with another thing
let site = { name: "W3Docs", welcome() { console.log(site.name); // leads to an error } }; let anotherSite = site; site = null; // overwrite to make things obvious anotherSite.welcome(); // Whoops! inside welcome(), the old name is used! error!

"this" peut être Non-Lié

Communément, le mot-clé JavaScript “this” peut être utilisé dans n'importe quelle fonction contrairement à d'autres langages de programmation.

L'exemple suivant n'a aucune erreur de syntaxe:

function welcome() {
  console.log(this.name);
}

Dans l'exemple suivant, la même fonction est accréditée à 2 objets différents, et elle comprend des “this” distincts dans les invocations:

Javascript distinctive "this"
let site = { name: "W3Docs" }; let anotherSite = { name: "anotherSite" }; function welcome() { console.log(this.name); } // use the same function in two objects site.func = welcome; anotherSite.func = welcome; // these calls have different this // "this" inside the function is the object "before the dot" site.func(); // W3Docs (this == site) anotherSite.func(); // anotherSite (this == anotherSite) anotherSite['func'](); // anotherSite (dot or square brackets access the method – doesn't matter)

Donc, des étapes simples sont utilisées ici : Si vous appelez d'abord obj.func(), alors vous devez exécuter this is obj pendant l'invocation de func. Cela signifie que dans l'exemple ci-dessus, soit site soit anotherSite est utilisé.

Invocation sans objet : this == undefined

La fonction peut même être appelée sans un objet comme suit:

Javascript "this"
function welcome() { console.log(this); } welcome();

Dans l'exemple mentionné ci-dessus, this est undefined en mode strict. Dans le cas où on essaie de entrer this.name, une erreur peut survenir.

La valeur de “this” en mode non strict sera l'objet global.

En général, un appel comme celui-ci peut provoquer une erreur de programmation. S'il y a this dans la fonction, elle devrait être invoquée dans le contexte de l'objet.

Résultats de "this" Non-Lié

Si vous êtes déjà habitué à un autre langage de programmation, il est possible que vous soyez familier avec l'idée de "this lié" dans laquelle les méthodes, caractérisées dans un objet obtiennent toujours “this” faisant référence à l'objet.

“this” peut être décrit comme libre en JavaScript. Par conséquent, sa valeur ne dépend pas de l'endroit où la méthode a été confirmée. Mais cela dépend plus de l'objet "avant le point".

Le concept donné de “this” a à la fois des avantages et des inconvénients. D'une part, vous pouvez utiliser la fonction pour une variété d'objets. D'autre part, plus de flexibilité, plus de chances de faire des erreurs. Votre objectif devrait être d'apprendre à travailler avec lui pour obtenir des avantages et éviter des erreurs.

Les Fonctions Flèches n'ont pas de "this"

Les fonctions flèches sont uniques en ce qu'elles n'ont pas leur propre “this”. Dans le cas où vous commencez à le référencer à partir d'une telle fonction, il sera pris à partir d'une fonction “normal” externe.

Dans l'exemple suivant, arrow() utilise this de la méthode : site.welcome().

Javascript "this" in arrow functions
let site = { name: "W3Docs", welcome() { let arrow = () => console.log(this.name); arrow(); } }; site.welcome(); // W3Docs

La méthode spéciale de fonction flèche est particulièrement utile lorsque vous ne souhaitez pas avoir un "this" séparé mais que vous voulez le prendre d'un contexte extérieur.

Heure du Quiz : Testez Vos Compétences!

Prêt à relever le défi de ce que vous avez appris ? Plongez dans nos quiz interactifs pour approfondir votre compréhension et renforcer vos connaissances de manière ludique.

Trouvez-vous cela utile?