diff options
author | julieng <julien.gattelier@gmail.com> | 2021-08-03 08:03:23 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-03 08:08:25 +0200 |
commit | bf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch) | |
tree | c101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/reference/functions/set | |
parent | 844f5103992238c0c23203286dad16a466e89c97 (diff) | |
download | translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2 translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip |
convert content to md
Diffstat (limited to 'files/fr/web/javascript/reference/functions/set')
-rw-r--r-- | files/fr/web/javascript/reference/functions/set/index.md | 150 |
1 files changed, 64 insertions, 86 deletions
diff --git a/files/fr/web/javascript/reference/functions/set/index.md b/files/fr/web/javascript/reference/functions/set/index.md index 2e7778875e..4ef288d7bc 100644 --- a/files/fr/web/javascript/reference/functions/set/index.md +++ b/files/fr/web/javascript/reference/functions/set/index.md @@ -9,82 +9,81 @@ tags: translation_of: Web/JavaScript/Reference/Functions/set original_slug: Web/JavaScript/Reference/Fonctions/set --- -<div>{{jsSidebar("Functions")}}</div> +{{jsSidebar("Functions")}} -<p>La syntaxe <strong><code>set</code></strong> permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.</p> +La syntaxe **`set`** permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété. -<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div> +{{EmbedInteractiveExample("pages/js/functions-setter.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . .}} -{set [expression](<em>val</em>) { . . .}}</pre> + {set prop(val) { . . .}} + {set [expression](val) { . . .}} -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>prop</code></dt> - <dd>Le nom de la propriété à lier à la fonction.</dd> - <dt><code>val</code></dt> - <dd>Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à <code>prop.</code></dd> - <dt><code>expression</code></dt> - <dd>Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.</dd> -</dl> +- `prop` + - : Le nom de la propriété à lier à la fonction. +- `val` + - : Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à `prop.` +- `expression` + - : Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction. -<h2 id="Description">Description</h2> +## Description -<p>En JavaScript, un mutateur (ou <em>setter</em> en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (<em>getters</em>) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.</p> +En JavaScript, un mutateur (ou _setter_ en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (_getters_) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété. -<p>On notera que <code>set</code> :</p> +On notera que `set` : -<div> -<ul> - <li>peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères</li> - <li>doit avoir exactement un paramètre (voir l'article « <a class="external" href="https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> » (en anglais) pour plus d'informations)</li> - <li>ne doit pas apparaître dans un littéral objet qui possède un autre <code>set</code> ou une autre propriété avec la même clé :<br> - ( <code>{ set x(v) { }, set x(v) { } }</code> et <code>{ x: ..., set x(v) { } }</code> seront interdits)</li> -</ul> -</div> +- peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères +- doit avoir exactement un paramètre (voir l'article « [Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments](https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/) » (en anglais) pour plus d'informations) +- ne doit pas apparaître dans un littéral objet qui possède un autre `set` ou une autre propriété avec la même clé : + ( `{ set x(v) { }, set x(v) { } }` et `{ x: ..., set x(v) { } }` seront interdits) -<p>On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.</p> +On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Définir_un_mutateur_sur_de_nouveaux_objets_avec_un_littéral_objet">Définir un mutateur sur de nouveaux objets avec un littéral objet</h3> +### Définir un mutateur sur de nouveaux objets avec un littéral objet -<p>Dans l'exemple qui suit, on définit une pseudo-propriété <code>courant</code> pour un objet <code>o</code> qui, lorsqu'elle recevra une valeur, mettra à jour la propriété <code>log</code> avec la valeur reçue :</p> +Dans l'exemple qui suit, on définit une pseudo-propriété `courant` pour un objet `o` qui, lorsqu'elle recevra une valeur, mettra à jour la propriété `log` avec la valeur reçue : -<pre class="brush: js">var o = { +```js +var o = { set courant (str) { this.log[this.log.length] = str; }, log: [] } -</pre> +``` -<p>On notera que <code>courant</code> n'est pas défini. Toute tentative pour y accéder renverra <code>undefined</code>.</p> +On notera que `courant` n'est pas défini. Toute tentative pour y accéder renverra `undefined`. -<h3 id="Supprimer_un_mutateur_grâce_à_l'opérateur_delete">Supprimer un mutateur grâce à l'opérateur <code>delete</code></h3> +### Supprimer un mutateur grâce à l'opérateur `delete` -<p>Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} :</p> +Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} : -<pre class="brush: js">delete o.courant; -</pre> +```js +delete o.courant; +``` -<h3 id="Définir_un_mutateur_sur_un_objet_existant_avec_defineProperty">Définir un mutateur sur un objet existant avec <code>defineProperty</code></h3> +### Définir un mutateur sur un objet existant avec `defineProperty` -<p>On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}.</p> +On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}. -<pre class="brush: js">var o = { a:0 }; +```js +var o = { a:0 }; Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } }); o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a' -console.log(o.a) // 5</pre> +console.log(o.a) // 5 +``` -<h3 id="Utiliser_un_nom_de_propriété_calculé">Utiliser un nom de propriété calculé</h3> +### Utiliser un nom de propriété calculé -<pre class="brush: js">var expr = "toto"; +```js +var expr = "toto"; var obj = { bidule: "truc", @@ -94,46 +93,25 @@ var obj = { console.log(obj.bidule); // "truc" obj.toto = "bidule"; // le mutateur est utilisé console.log(obj.bidule); // "bidule" -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Ajout des noms de propriétés calculés</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.functions.set")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Fonctions/get","get")}}</li> - <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li> - <li>{{jsxref("Object.defineProperty()")}}</li> - <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> - <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Définir des accesseurs et des mutateurs</a>, dans le Guide JavaScript</li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------- | +| {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}} | {{Spec2('ES5.1')}} | Définition initiale | +| {{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES6')}} | Ajout des noms de propriétés calculés | +| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.functions.set")}} + +## Voir aussi + +- {{jsxref("Fonctions/get","get")}} +- {{jsxref("Opérateurs/L_opérateur_delete","delete")}} +- {{jsxref("Object.defineProperty()")}} +- {{jsxref("Object.defineGetter", "__defineGetter__")}} +- {{jsxref("Object.defineSetter", "__defineSetter__")}} +- [Définir des accesseurs et des mutateurs](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters), dans le Guide JavaScript |