From a8e79ff8821e22772e43f08fe9781354963e452e Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 10:36:25 +0200 Subject: [PATCH 1/9] docs: add first article tranlated section --- .../02-property-accessors/article-fr.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 1-js/07-object-properties/02-property-accessors/article-fr.md diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md new file mode 100644 index 000000000..a62404f7c --- /dev/null +++ b/1-js/07-object-properties/02-property-accessors/article-fr.md @@ -0,0 +1,8 @@ + +# Getters et Setters de propriété + +Il y a deux sortes de proriétés d'objet. + +Le premier type est *les propriétés de données*. Nous savons déjà comment travaillez avec. Toutes les propriétés que nous avons utilisé jusqu'à maintenant étaient des propriétés de données. + +Le second type de propriété est quelque chose de nouveau. C'est un accesseur de propriété. Ce sont essentiellement des fonctions qui exécute une récupération ou une déclaration de valeur, mais qui ressemblent à une propriété normale pour le code extérieur. \ No newline at end of file From 719c4482ed8060309f6d130b54d9a11c8f6a31f7 Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 11:06:55 +0200 Subject: [PATCH 2/9] docs: add second section translation --- .../02-property-accessors/article-fr.md | 92 ++++++++++++++++++- 1 file changed, 91 insertions(+), 1 deletion(-) diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md index a62404f7c..d25a81c72 100644 --- a/1-js/07-object-properties/02-property-accessors/article-fr.md +++ b/1-js/07-object-properties/02-property-accessors/article-fr.md @@ -5,4 +5,94 @@ Il y a deux sortes de proriétés d'objet. Le premier type est *les propriétés de données*. Nous savons déjà comment travaillez avec. Toutes les propriétés que nous avons utilisé jusqu'à maintenant étaient des propriétés de données. -Le second type de propriété est quelque chose de nouveau. C'est un accesseur de propriété. Ce sont essentiellement des fonctions qui exécute une récupération ou une déclaration de valeur, mais qui ressemblent à une propriété normale pour le code extérieur. \ No newline at end of file +Le second type de propriété est quelque chose de nouveau. C'est un accesseur de propriété. Ce sont essentiellement des fonctions qui exécute une récupération ou une déclaration de valeur, mais qui ressemblent à une propriété normale pour le code extérieur. + +## Getters et Setters + +Les accesseurs de propriétés sont représentés par des méthodes "getter" et "setter". Dans un objet littéral elles se demarquent par `get` et `set` : + +```js +let obj = { + *!*get propName()*/!* { + // Getter, le code va récupérer obj.propName + }, + + *!*set propName(value)*/!* { + // Setter, le code va définir obj.propName = value + } +}; +``` + +Le getter sert quand `obj.propName` est lu, le setter -- quand c'est assigné. + +Par exemple, nous avons un objet `user` avec `name` et `surname` : + +```js +let user = { + name: "John", + surname: "Smith" +}; +``` + +Maintenant nous voulons ajouter une propriété `fullName`, qui devrait être `"John Smith"`. Bien sûr, nous ne voulons pas copier-coller l'information existante, donc nous pouvons implementer un accesseur : + +```js run +let user = { + name: "John", + surname: "Smith", + +*!* + get fullName() { + return `${this.name} ${this.surname}`; + } +*/!* +}; + +*!* +alert(user.fullName); // John Smith +*/!* +``` + +De l'extérieur, un accesseur de propriété ressemble à une propriété normale. C'est l'idée d'un accesseur. Nous n'*appellons* pas `user.fullName` comme une fonction, nous la *lisons* normallement : le getter agit sans le faire savoir. + +Pour l'instant, `fullName` n'a qu'un getter. Si nous essayions d'assigner `user.fullName=`, il y aura une erreur : + +```js run +let user = { + get fullName() { + return `...`; + } +}; + +*!* +user.fullName = "Test"; // Erreur (la propriété n'a qu'un getter) +*/!* +``` + +Corrigeons cela en ajoutant un setter pour `user.fullName` : + + +```js run +let user = { + name: "John", + surname: "Smith", + + get fullName() { + return `${this.name} ${this.surname}`; + }, + +*!* + set fullName(value) { + [this.name, this.surname] = value.split(" "); + } +*/!* +}; + +// Le setter est exécuté avec la valeur donnée. +user.fullName = "Alice Cooper"; + +alert(user.name); // Alice +alert(user.surname); // Cooper +``` + +Comme résultat, nous avons une propriété "virtuelle" `fullName`. Elle est lisible et ecrivable. \ No newline at end of file From 821cf2427f5a28842ec8a507b98074c6df23e4ca Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 11:21:23 +0200 Subject: [PATCH 3/9] docs: add third section translation --- .../02-property-accessors/article-fr.md | 57 ++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md index d25a81c72..a7fc11f93 100644 --- a/1-js/07-object-properties/02-property-accessors/article-fr.md +++ b/1-js/07-object-properties/02-property-accessors/article-fr.md @@ -95,4 +95,59 @@ alert(user.name); // Alice alert(user.surname); // Cooper ``` -Comme résultat, nous avons une propriété "virtuelle" `fullName`. Elle est lisible et ecrivable. \ No newline at end of file +Comme résultat, nous avons une propriété "virtuelle" `fullName`. Elle est lisible et ecrivable. + +## Descripteurs d'accesseur + +Les descripteurs d'accesseur de propriété sont différents de ceux pour les propriété de données. + +Pour les accesseurs de propriétés, il n'y a pas de `value` ou `writable`, à la place il y a les fonctions `get` et `set`. + +Un descripteur d'accesseur peut avoir : + +- **`get`** -- une fonction sans arguments, pour la lecture de propriété, +- **`set`** -- une fonction avec un argument, qui est appelée lorsque la propriété change de valeur, +- **`enumerable`** -- identique aux propriétés de données +- **`configurable`** -- identique aux propriétés de données + +Par exemple, pour créer un accesseur `fullName` avec `defineProperty`, on peut passer un descripteur avec `get` et `set` : + +```js run +let user = { + name: "John", + surname: "Smith" +}; + +*!* +Object.defineProperty(user, 'fullName', { + get() { + return `${this.name} ${this.surname}`; + }, + + set(value) { + [this.name, this.surname] = value.split(" "); + } +*/!* +}); + +alert(user.fullName); // John Smith + +for(let key in user) alert(key); // name, surname +``` + +Veuillez notez qu'une propriété peut être soit un accesseur (qui a les méthodes `get/set`) ou une propriété de donnes (qui a `value`), pas les deux. + +Si nous essayons de fournir les deux `get` and `value` dans le même descripteur, il y aura une erreur : + +```js run +*!* +// Error: Invalid property descriptor. +*/!* +Object.defineProperty({}, 'prop', { + get() { + return 1 + }, + + value: 2 +}); +``` \ No newline at end of file From be00e6d83015b8e3e76d747203560a2c83993e2a Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 11:32:39 +0200 Subject: [PATCH 4/9] docs: translate new section --- .../02-property-accessors/article-fr.md | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md index a7fc11f93..f5dcb7989 100644 --- a/1-js/07-object-properties/02-property-accessors/article-fr.md +++ b/1-js/07-object-properties/02-property-accessors/article-fr.md @@ -150,4 +150,35 @@ Object.defineProperty({}, 'prop', { value: 2 }); -``` \ No newline at end of file +``` + +## Des getters/setters plus intelligent + +Les Getters/setters peuvent être utilisés comme des enveloppes autour des "réelles" valeurs de propriété pour gagner plus de contrôles sur leurs opérations. + +Par exemple, si nous voulons interdire les noms trop court pour `user`, nous pouvons avoir un setter `name` and garder la valeur dans une propriété séparée `_name` : + +```js run +let user = { + get name() { + return this._name; + }, + + set name(value) { + if (value.length < 4) { + alert("Name is too short, need at least 4 characters"); + return; + } + this._name = value; + } +}; + +user.name = "Pete"; +alert(user.name); // Pete + +user.name = ""; // Le nom est trop court... +``` + +Donc, le nom est stocké dans la propriété `_name`, et l'accés est fait par le getter et le setter. + +Techniquement, le code extérieur est capable d'accéder directement à la propriété en utilisant `user._name`. Mais il y une convention très connue selon laquelle les propriétés commençant par un underscore `"_"` sont internes et ne devraient pas être touché depuis l'extérieur des objets. \ No newline at end of file From d315a86c7dbad05fc86da49b04cd306478312ef3 Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 12:08:11 +0200 Subject: [PATCH 5/9] docs: finish translation --- .../02-property-accessors/article-fr.md | 62 ++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md index f5dcb7989..1c1c42eca 100644 --- a/1-js/07-object-properties/02-property-accessors/article-fr.md +++ b/1-js/07-object-properties/02-property-accessors/article-fr.md @@ -181,4 +181,64 @@ user.name = ""; // Le nom est trop court... Donc, le nom est stocké dans la propriété `_name`, et l'accés est fait par le getter et le setter. -Techniquement, le code extérieur est capable d'accéder directement à la propriété en utilisant `user._name`. Mais il y une convention très connue selon laquelle les propriétés commençant par un underscore `"_"` sont internes et ne devraient pas être touché depuis l'extérieur des objets. \ No newline at end of file +Techniquement, le code extérieur est capable d'accéder directement à la propriété en utilisant `user._name`. Mais il y une convention très connue selon laquelle les propriétés commençant par un underscore `"_"` sont internes et ne devraient pas être touché depuis l'extérieur des objets. + +## Utilisation pour la compatibilité + +Un des avantages dans l'utilisation des accesseurs et qu'ils permettent de prendre le contrôle sur un propriété de données "normale" à tout moment en la remplaçant par un getter et un setter et modifiant son comportement. + +Imaginons que nous commencions des objets utilisateur en utilisant des propriétés de données `name` et `age` : + +```js +function User(name, age) { + this.name = name; + this.age = age; +} + +let john = new User("John", 25); + +alert( john.age ); // 25 +``` + +...Mais tôt ou tard, les choses pourraient changer. Au lieu d'`age` on pourrait decider de stocker `birthday`, parce que c'est plus précis et plus pratique : + +```js +function User(name, birthday) { + this.name = name; + this.birthday = birthday; +} + +let john = new User("John", new Date(1992, 6, 1)); +``` + +Maintenant que fait-on avec l'ancien code qui utilise toujours la propriété `age` ? + +On peut esssayer de trouver tous les endroits où on utilisent `age` et les modifier, mais ça prend du temps and ça peut être compliqué à faire si le code est utilisé par plusieurs personnes. En plus, `age` est une bonne chose à avoir dans `user`, n'est ce pas ? + +Gardons-le. + +Ajoutons un getter pour `age` et résolvons le problème : + +```js run no-beautify +function User(name, birthday) { + this.name = name; + this.birthday = birthday; + +*!* + // Age est calculé à partir de la date actuelle et de birthday + Object.defineProperty(this, "age", { + get() { + let todayYear = new Date().getFullYear(); + return todayYear - this.birthday.getFullYear(); + } + }); +*/!* +} + +let john = new User("John", new Date(1992, 6, 1)); + +alert( john.birthday ); // birthday est disponible +alert( john.age ); // ...Ainsi que l'age +``` + +Maintenant l'ancien code fonctionne aussi et nous avons une propriété additionnelle. \ No newline at end of file From 08ad12f5a4acf184d29630adc083d2cfaa1dd653 Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 12:18:29 +0200 Subject: [PATCH 6/9] docs: fix typo in first section --- 1-js/07-object-properties/02-property-accessors/article-fr.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md index 1c1c42eca..af8f21358 100644 --- a/1-js/07-object-properties/02-property-accessors/article-fr.md +++ b/1-js/07-object-properties/02-property-accessors/article-fr.md @@ -3,9 +3,9 @@ Il y a deux sortes de proriétés d'objet. -Le premier type est *les propriétés de données*. Nous savons déjà comment travaillez avec. Toutes les propriétés que nous avons utilisé jusqu'à maintenant étaient des propriétés de données. +Le premier type est *les propriétés de données*. Nous savons déjà comment travaillez avec. Toutes les propriétés que nous avons utilisés jusqu'à maintenant étaient des propriétés de données. -Le second type de propriété est quelque chose de nouveau. C'est un accesseur de propriété. Ce sont essentiellement des fonctions qui exécute une récupération ou une déclaration de valeur, mais qui ressemblent à une propriété normale pour le code extérieur. +Le second type de propriété est quelque chose de nouveau. C'est un accesseur de propriété. Ce sont essentiellement des fonctions qui exécutent une récupération ou une déclaration de valeur, mais qui ressemblent à une propriété normale pour le code extérieur. ## Getters et Setters From 05e45dd7252b4e5bec86f5bb4388f099bd5604b1 Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 12:31:30 +0200 Subject: [PATCH 7/9] docs: fix typos in 2nd section and translate comment --- .../02-property-accessors/article-fr.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md index af8f21358..18464cb98 100644 --- a/1-js/07-object-properties/02-property-accessors/article-fr.md +++ b/1-js/07-object-properties/02-property-accessors/article-fr.md @@ -23,7 +23,7 @@ let obj = { }; ``` -Le getter sert quand `obj.propName` est lu, le setter -- quand c'est assigné. +Le getter fonctionne quand `obj.propName` est lu, le setter -- quand il s'agit d'une assignation. Par exemple, nous avons un objet `user` avec `name` et `surname` : @@ -34,7 +34,7 @@ let user = { }; ``` -Maintenant nous voulons ajouter une propriété `fullName`, qui devrait être `"John Smith"`. Bien sûr, nous ne voulons pas copier-coller l'information existante, donc nous pouvons implementer un accesseur : +Maintenant nous voulons ajouter une propriété `fullName`, qui devrait être `"John Smith"`. Bien sûr, nous ne voulons pas copier-coller l'information existante, donc nous pouvons implémenter un accesseur : ```js run let user = { @@ -53,9 +53,9 @@ alert(user.fullName); // John Smith */!* ``` -De l'extérieur, un accesseur de propriété ressemble à une propriété normale. C'est l'idée d'un accesseur. Nous n'*appellons* pas `user.fullName` comme une fonction, nous la *lisons* normallement : le getter agit sans le faire savoir. +De l'extérieur, un accesseur de propriété ressemble à une propriété normale. C'est l'idée d'un accesseur. Nous n'*appellons* pas `user.fullName` comme une fonction, nous la *lisons* normalement : le getter agit en arrière plan. -Pour l'instant, `fullName` n'a qu'un getter. Si nous essayions d'assigner `user.fullName=`, il y aura une erreur : +Pour l'instant, `fullName` n'a qu'un getter. Si nous essayons d'assigner `user.fullName=`, il y aura une erreur : ```js run let user = { @@ -106,7 +106,7 @@ Pour les accesseurs de propriétés, il n'y a pas de `value` ou `writable`, à l Un descripteur d'accesseur peut avoir : - **`get`** -- une fonction sans arguments, pour la lecture de propriété, -- **`set`** -- une fonction avec un argument, qui est appelée lorsque la propriété change de valeur, +- **`set`** -- une fonction avec un argument, qui fonctionne lorsque la propriété change de valeur, - **`enumerable`** -- identique aux propriétés de données - **`configurable`** -- identique aux propriétés de données @@ -135,13 +135,13 @@ alert(user.fullName); // John Smith for(let key in user) alert(key); // name, surname ``` -Veuillez notez qu'une propriété peut être soit un accesseur (qui a les méthodes `get/set`) ou une propriété de donnes (qui a `value`), pas les deux. +Veuillez notez qu'une propriété peut être soit un accesseur (qui a les méthodes `get/set`) ou une propriété de données (qui a `value`), pas les deux. Si nous essayons de fournir les deux `get` and `value` dans le même descripteur, il y aura une erreur : ```js run *!* -// Error: Invalid property descriptor. +// Erreur : Descripteur de propriété invalide. */!* Object.defineProperty({}, 'prop', { get() { @@ -152,11 +152,11 @@ Object.defineProperty({}, 'prop', { }); ``` -## Des getters/setters plus intelligent +## Des getters/setters plus intelligents Les Getters/setters peuvent être utilisés comme des enveloppes autour des "réelles" valeurs de propriété pour gagner plus de contrôles sur leurs opérations. -Par exemple, si nous voulons interdire les noms trop court pour `user`, nous pouvons avoir un setter `name` and garder la valeur dans une propriété séparée `_name` : +Par exemple, si nous voulions interdire les noms trop court pour `user`, nous pourrions avoir un setter `name` et garder la valeur dans une propriété séparée `_name` : ```js run let user = { @@ -181,7 +181,7 @@ user.name = ""; // Le nom est trop court... Donc, le nom est stocké dans la propriété `_name`, et l'accés est fait par le getter et le setter. -Techniquement, le code extérieur est capable d'accéder directement à la propriété en utilisant `user._name`. Mais il y une convention très connue selon laquelle les propriétés commençant par un underscore `"_"` sont internes et ne devraient pas être touché depuis l'extérieur des objets. +Techniquement, le code extérieur est capable d'accéder directement à la propriété en utilisant `user._name`. Mais il y a une convention très connue, selon laquelle les propriétés commençant par un underscore `"_"` sont internes et ne devraient pas être touchées depuis l'extérieur des objets. ## Utilisation pour la compatibilité From 48c2348ec88458b3d68d186ac2349f57bbed983d Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 12:33:37 +0200 Subject: [PATCH 8/9] docs: fix typo --- .../02-property-accessors/article-fr.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md index 18464cb98..84770d923 100644 --- a/1-js/07-object-properties/02-property-accessors/article-fr.md +++ b/1-js/07-object-properties/02-property-accessors/article-fr.md @@ -185,7 +185,7 @@ Techniquement, le code extérieur est capable d'accéder directement à la propr ## Utilisation pour la compatibilité -Un des avantages dans l'utilisation des accesseurs et qu'ils permettent de prendre le contrôle sur un propriété de données "normale" à tout moment en la remplaçant par un getter et un setter et modifiant son comportement. +Un des avantages de l'utilisation des accesseurs et qu'ils permettent de prendre le contrôle sur un propriété de données "normale" à tout moment, en la remplaçant par un getter et un setter et modifiant son comportement. Imaginons que nous commencions des objets utilisateur en utilisant des propriétés de données `name` et `age` : @@ -213,7 +213,7 @@ let john = new User("John", new Date(1992, 6, 1)); Maintenant que fait-on avec l'ancien code qui utilise toujours la propriété `age` ? -On peut esssayer de trouver tous les endroits où on utilisent `age` et les modifier, mais ça prend du temps and ça peut être compliqué à faire si le code est utilisé par plusieurs personnes. En plus, `age` est une bonne chose à avoir dans `user`, n'est ce pas ? +On peut essayer de trouver tous les endroits où on utilisent `age` et les modifier, mais ça prend du temps et ça peut être compliqué à faire si le code est utilisé par plusieurs personnes. En plus, `age` est une bonne chose à avoir dans `user`, n'est ce pas ? Gardons-le. @@ -225,7 +225,7 @@ function User(name, birthday) { this.birthday = birthday; *!* - // Age est calculé à partir de la date actuelle et de birthday + // age est calculé à partir de la date actuelle et de birthday Object.defineProperty(this, "age", { get() { let todayYear = new Date().getFullYear(); @@ -241,4 +241,4 @@ alert( john.birthday ); // birthday est disponible alert( john.age ); // ...Ainsi que l'age ``` -Maintenant l'ancien code fonctionne aussi et nous avons une propriété additionnelle. \ No newline at end of file +Maintenant l'ancien code fonctionne toujours et nous avons une propriété additionnelle. \ No newline at end of file From 3a1bc645cee01870d00086989e69a3de1995e25d Mon Sep 17 00:00:00 2001 From: Mecopi Date: Thu, 19 Oct 2023 12:34:46 +0200 Subject: [PATCH 9/9] rename file --- .../02-property-accessors/article-fr.md | 244 ------------------ .../02-property-accessors/article.md | 96 +++---- 2 files changed, 48 insertions(+), 292 deletions(-) delete mode 100644 1-js/07-object-properties/02-property-accessors/article-fr.md diff --git a/1-js/07-object-properties/02-property-accessors/article-fr.md b/1-js/07-object-properties/02-property-accessors/article-fr.md deleted file mode 100644 index 84770d923..000000000 --- a/1-js/07-object-properties/02-property-accessors/article-fr.md +++ /dev/null @@ -1,244 +0,0 @@ - -# Getters et Setters de propriété - -Il y a deux sortes de proriétés d'objet. - -Le premier type est *les propriétés de données*. Nous savons déjà comment travaillez avec. Toutes les propriétés que nous avons utilisés jusqu'à maintenant étaient des propriétés de données. - -Le second type de propriété est quelque chose de nouveau. C'est un accesseur de propriété. Ce sont essentiellement des fonctions qui exécutent une récupération ou une déclaration de valeur, mais qui ressemblent à une propriété normale pour le code extérieur. - -## Getters et Setters - -Les accesseurs de propriétés sont représentés par des méthodes "getter" et "setter". Dans un objet littéral elles se demarquent par `get` et `set` : - -```js -let obj = { - *!*get propName()*/!* { - // Getter, le code va récupérer obj.propName - }, - - *!*set propName(value)*/!* { - // Setter, le code va définir obj.propName = value - } -}; -``` - -Le getter fonctionne quand `obj.propName` est lu, le setter -- quand il s'agit d'une assignation. - -Par exemple, nous avons un objet `user` avec `name` et `surname` : - -```js -let user = { - name: "John", - surname: "Smith" -}; -``` - -Maintenant nous voulons ajouter une propriété `fullName`, qui devrait être `"John Smith"`. Bien sûr, nous ne voulons pas copier-coller l'information existante, donc nous pouvons implémenter un accesseur : - -```js run -let user = { - name: "John", - surname: "Smith", - -*!* - get fullName() { - return `${this.name} ${this.surname}`; - } -*/!* -}; - -*!* -alert(user.fullName); // John Smith -*/!* -``` - -De l'extérieur, un accesseur de propriété ressemble à une propriété normale. C'est l'idée d'un accesseur. Nous n'*appellons* pas `user.fullName` comme une fonction, nous la *lisons* normalement : le getter agit en arrière plan. - -Pour l'instant, `fullName` n'a qu'un getter. Si nous essayons d'assigner `user.fullName=`, il y aura une erreur : - -```js run -let user = { - get fullName() { - return `...`; - } -}; - -*!* -user.fullName = "Test"; // Erreur (la propriété n'a qu'un getter) -*/!* -``` - -Corrigeons cela en ajoutant un setter pour `user.fullName` : - - -```js run -let user = { - name: "John", - surname: "Smith", - - get fullName() { - return `${this.name} ${this.surname}`; - }, - -*!* - set fullName(value) { - [this.name, this.surname] = value.split(" "); - } -*/!* -}; - -// Le setter est exécuté avec la valeur donnée. -user.fullName = "Alice Cooper"; - -alert(user.name); // Alice -alert(user.surname); // Cooper -``` - -Comme résultat, nous avons une propriété "virtuelle" `fullName`. Elle est lisible et ecrivable. - -## Descripteurs d'accesseur - -Les descripteurs d'accesseur de propriété sont différents de ceux pour les propriété de données. - -Pour les accesseurs de propriétés, il n'y a pas de `value` ou `writable`, à la place il y a les fonctions `get` et `set`. - -Un descripteur d'accesseur peut avoir : - -- **`get`** -- une fonction sans arguments, pour la lecture de propriété, -- **`set`** -- une fonction avec un argument, qui fonctionne lorsque la propriété change de valeur, -- **`enumerable`** -- identique aux propriétés de données -- **`configurable`** -- identique aux propriétés de données - -Par exemple, pour créer un accesseur `fullName` avec `defineProperty`, on peut passer un descripteur avec `get` et `set` : - -```js run -let user = { - name: "John", - surname: "Smith" -}; - -*!* -Object.defineProperty(user, 'fullName', { - get() { - return `${this.name} ${this.surname}`; - }, - - set(value) { - [this.name, this.surname] = value.split(" "); - } -*/!* -}); - -alert(user.fullName); // John Smith - -for(let key in user) alert(key); // name, surname -``` - -Veuillez notez qu'une propriété peut être soit un accesseur (qui a les méthodes `get/set`) ou une propriété de données (qui a `value`), pas les deux. - -Si nous essayons de fournir les deux `get` and `value` dans le même descripteur, il y aura une erreur : - -```js run -*!* -// Erreur : Descripteur de propriété invalide. -*/!* -Object.defineProperty({}, 'prop', { - get() { - return 1 - }, - - value: 2 -}); -``` - -## Des getters/setters plus intelligents - -Les Getters/setters peuvent être utilisés comme des enveloppes autour des "réelles" valeurs de propriété pour gagner plus de contrôles sur leurs opérations. - -Par exemple, si nous voulions interdire les noms trop court pour `user`, nous pourrions avoir un setter `name` et garder la valeur dans une propriété séparée `_name` : - -```js run -let user = { - get name() { - return this._name; - }, - - set name(value) { - if (value.length < 4) { - alert("Name is too short, need at least 4 characters"); - return; - } - this._name = value; - } -}; - -user.name = "Pete"; -alert(user.name); // Pete - -user.name = ""; // Le nom est trop court... -``` - -Donc, le nom est stocké dans la propriété `_name`, et l'accés est fait par le getter et le setter. - -Techniquement, le code extérieur est capable d'accéder directement à la propriété en utilisant `user._name`. Mais il y a une convention très connue, selon laquelle les propriétés commençant par un underscore `"_"` sont internes et ne devraient pas être touchées depuis l'extérieur des objets. - -## Utilisation pour la compatibilité - -Un des avantages de l'utilisation des accesseurs et qu'ils permettent de prendre le contrôle sur un propriété de données "normale" à tout moment, en la remplaçant par un getter et un setter et modifiant son comportement. - -Imaginons que nous commencions des objets utilisateur en utilisant des propriétés de données `name` et `age` : - -```js -function User(name, age) { - this.name = name; - this.age = age; -} - -let john = new User("John", 25); - -alert( john.age ); // 25 -``` - -...Mais tôt ou tard, les choses pourraient changer. Au lieu d'`age` on pourrait decider de stocker `birthday`, parce que c'est plus précis et plus pratique : - -```js -function User(name, birthday) { - this.name = name; - this.birthday = birthday; -} - -let john = new User("John", new Date(1992, 6, 1)); -``` - -Maintenant que fait-on avec l'ancien code qui utilise toujours la propriété `age` ? - -On peut essayer de trouver tous les endroits où on utilisent `age` et les modifier, mais ça prend du temps et ça peut être compliqué à faire si le code est utilisé par plusieurs personnes. En plus, `age` est une bonne chose à avoir dans `user`, n'est ce pas ? - -Gardons-le. - -Ajoutons un getter pour `age` et résolvons le problème : - -```js run no-beautify -function User(name, birthday) { - this.name = name; - this.birthday = birthday; - -*!* - // age est calculé à partir de la date actuelle et de birthday - Object.defineProperty(this, "age", { - get() { - let todayYear = new Date().getFullYear(); - return todayYear - this.birthday.getFullYear(); - } - }); -*/!* -} - -let john = new User("John", new Date(1992, 6, 1)); - -alert( john.birthday ); // birthday est disponible -alert( john.age ); // ...Ainsi que l'age -``` - -Maintenant l'ancien code fonctionne toujours et nous avons une propriété additionnelle. \ No newline at end of file diff --git a/1-js/07-object-properties/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md index c2aa35d53..84770d923 100644 --- a/1-js/07-object-properties/02-property-accessors/article.md +++ b/1-js/07-object-properties/02-property-accessors/article.md @@ -1,31 +1,31 @@ -# Property getters and setters +# Getters et Setters de propriété -There are two kinds of object properties. +Il y a deux sortes de proriétés d'objet. -The first kind is *data properties*. We already know how to work with them. All properties that we've been using until now were data properties. +Le premier type est *les propriétés de données*. Nous savons déjà comment travaillez avec. Toutes les propriétés que nous avons utilisés jusqu'à maintenant étaient des propriétés de données. -The second type of property is something new. It's an *accessor property*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code. +Le second type de propriété est quelque chose de nouveau. C'est un accesseur de propriété. Ce sont essentiellement des fonctions qui exécutent une récupération ou une déclaration de valeur, mais qui ressemblent à une propriété normale pour le code extérieur. -## Getters and setters +## Getters et Setters -Accessor properties are represented by "getter" and "setter" methods. In an object literal they are denoted by `get` and `set`: +Les accesseurs de propriétés sont représentés par des méthodes "getter" et "setter". Dans un objet littéral elles se demarquent par `get` et `set` : ```js let obj = { *!*get propName()*/!* { - // getter, the code executed on getting obj.propName + // Getter, le code va récupérer obj.propName }, *!*set propName(value)*/!* { - // setter, the code executed on setting obj.propName = value + // Setter, le code va définir obj.propName = value } }; ``` -The getter works when `obj.propName` is read, the setter -- when it is assigned. +Le getter fonctionne quand `obj.propName` est lu, le setter -- quand il s'agit d'une assignation. -For instance, we have a `user` object with `name` and `surname`: +Par exemple, nous avons un objet `user` avec `name` et `surname` : ```js let user = { @@ -34,7 +34,7 @@ let user = { }; ``` -Now we want to add a `fullName` property, that should be `"John Smith"`. Of course, we don't want to copy-paste existing information, so we can implement it as an accessor: +Maintenant nous voulons ajouter une propriété `fullName`, qui devrait être `"John Smith"`. Bien sûr, nous ne voulons pas copier-coller l'information existante, donc nous pouvons implémenter un accesseur : ```js run let user = { @@ -53,9 +53,9 @@ alert(user.fullName); // John Smith */!* ``` -From the outside, an accessor property looks like a regular one. That's the idea of accessor properties. We don't *call* `user.fullName` as a function, we *read* it normally: the getter runs behind the scenes. +De l'extérieur, un accesseur de propriété ressemble à une propriété normale. C'est l'idée d'un accesseur. Nous n'*appellons* pas `user.fullName` comme une fonction, nous la *lisons* normalement : le getter agit en arrière plan. -As of now, `fullName` has only a getter. If we attempt to assign `user.fullName=`, there will be an error: +Pour l'instant, `fullName` n'a qu'un getter. Si nous essayons d'assigner `user.fullName=`, il y aura une erreur : ```js run let user = { @@ -65,11 +65,12 @@ let user = { }; *!* -user.fullName = "Test"; // Error (property has only a getter) +user.fullName = "Test"; // Erreur (la propriété n'a qu'un getter) */!* ``` -Let's fix it by adding a setter for `user.fullName`: +Corrigeons cela en ajoutant un setter pour `user.fullName` : + ```js run let user = { @@ -87,29 +88,29 @@ let user = { */!* }; -// set fullName is executed with the given value. +// Le setter est exécuté avec la valeur donnée. user.fullName = "Alice Cooper"; alert(user.name); // Alice alert(user.surname); // Cooper ``` -As the result, we have a "virtual" property `fullName`. It is readable and writable. +Comme résultat, nous avons une propriété "virtuelle" `fullName`. Elle est lisible et ecrivable. -## Accessor descriptors +## Descripteurs d'accesseur -Descriptors for accessor properties are different from those for data properties. +Les descripteurs d'accesseur de propriété sont différents de ceux pour les propriété de données. -For accessor properties, there is no `value` or `writable`, but instead there are `get` and `set` functions. +Pour les accesseurs de propriétés, il n'y a pas de `value` ou `writable`, à la place il y a les fonctions `get` et `set`. -That is, an accessor descriptor may have: +Un descripteur d'accesseur peut avoir : -- **`get`** -- a function without arguments, that works when a property is read, -- **`set`** -- a function with one argument, that is called when the property is set, -- **`enumerable`** -- same as for data properties, -- **`configurable`** -- same as for data properties. +- **`get`** -- une fonction sans arguments, pour la lecture de propriété, +- **`set`** -- une fonction avec un argument, qui fonctionne lorsque la propriété change de valeur, +- **`enumerable`** -- identique aux propriétés de données +- **`configurable`** -- identique aux propriétés de données -For instance, to create an accessor `fullName` with `defineProperty`, we can pass a descriptor with `get` and `set`: +Par exemple, pour créer un accesseur `fullName` avec `defineProperty`, on peut passer un descripteur avec `get` et `set` : ```js run let user = { @@ -134,13 +135,13 @@ alert(user.fullName); // John Smith for(let key in user) alert(key); // name, surname ``` -Please note that a property can be either an accessor (has `get/set` methods) or a data property (has a `value`), not both. +Veuillez notez qu'une propriété peut être soit un accesseur (qui a les méthodes `get/set`) ou une propriété de données (qui a `value`), pas les deux. -If we try to supply both `get` and `value` in the same descriptor, there will be an error: +Si nous essayons de fournir les deux `get` and `value` dans le même descripteur, il y aura une erreur : ```js run *!* -// Error: Invalid property descriptor. +// Erreur : Descripteur de propriété invalide. */!* Object.defineProperty({}, 'prop', { get() { @@ -151,11 +152,11 @@ Object.defineProperty({}, 'prop', { }); ``` -## Smarter getters/setters +## Des getters/setters plus intelligents -Getters/setters can be used as wrappers over "real" property values to gain more control over operations with them. +Les Getters/setters peuvent être utilisés comme des enveloppes autour des "réelles" valeurs de propriété pour gagner plus de contrôles sur leurs opérations. -For instance, if we want to forbid too short names for `user`, we can have a setter `name` and keep the value in a separate property `_name`: +Par exemple, si nous voulions interdire les noms trop court pour `user`, nous pourrions avoir un setter `name` et garder la valeur dans une propriété séparée `_name` : ```js run let user = { @@ -175,19 +176,18 @@ let user = { user.name = "Pete"; alert(user.name); // Pete -user.name = ""; // Name is too short... +user.name = ""; // Le nom est trop court... ``` -So, the name is stored in `_name` property, and the access is done via getter and setter. - -Technically, external code is able to access the name directly by using `user._name`. But there is a widely known convention that properties starting with an underscore `"_"` are internal and should not be touched from outside the object. +Donc, le nom est stocké dans la propriété `_name`, et l'accés est fait par le getter et le setter. +Techniquement, le code extérieur est capable d'accéder directement à la propriété en utilisant `user._name`. Mais il y a une convention très connue, selon laquelle les propriétés commençant par un underscore `"_"` sont internes et ne devraient pas être touchées depuis l'extérieur des objets. -## Using for compatibility +## Utilisation pour la compatibilité -One of the great uses of accessors is that they allow to take control over a "regular" data property at any moment by replacing it with a getter and a setter and tweak its behavior. +Un des avantages de l'utilisation des accesseurs et qu'ils permettent de prendre le contrôle sur un propriété de données "normale" à tout moment, en la remplaçant par un getter et un setter et modifiant son comportement. -Imagine we started implementing user objects using data properties `name` and `age`: +Imaginons que nous commencions des objets utilisateur en utilisant des propriétés de données `name` et `age` : ```js function User(name, age) { @@ -200,7 +200,7 @@ let john = new User("John", 25); alert( john.age ); // 25 ``` -...But sooner or later, things may change. Instead of `age` we may decide to store `birthday`, because it's more precise and convenient: +...Mais tôt ou tard, les choses pourraient changer. Au lieu d'`age` on pourrait decider de stocker `birthday`, parce que c'est plus précis et plus pratique : ```js function User(name, birthday) { @@ -211,13 +211,13 @@ function User(name, birthday) { let john = new User("John", new Date(1992, 6, 1)); ``` -Now what to do with the old code that still uses `age` property? +Maintenant que fait-on avec l'ancien code qui utilise toujours la propriété `age` ? -We can try to find all such places and fix them, but that takes time and can be hard to do if that code is used by many other people. And besides, `age` is a nice thing to have in `user`, right? +On peut essayer de trouver tous les endroits où on utilisent `age` et les modifier, mais ça prend du temps et ça peut être compliqué à faire si le code est utilisé par plusieurs personnes. En plus, `age` est une bonne chose à avoir dans `user`, n'est ce pas ? -Let's keep it. +Gardons-le. -Adding a getter for `age` solves the problem: +Ajoutons un getter pour `age` et résolvons le problème : ```js run no-beautify function User(name, birthday) { @@ -225,7 +225,7 @@ function User(name, birthday) { this.birthday = birthday; *!* - // age is calculated from the current date and birthday + // age est calculé à partir de la date actuelle et de birthday Object.defineProperty(this, "age", { get() { let todayYear = new Date().getFullYear(); @@ -237,8 +237,8 @@ function User(name, birthday) { let john = new User("John", new Date(1992, 6, 1)); -alert( john.birthday ); // birthday is available -alert( john.age ); // ...as well as the age +alert( john.birthday ); // birthday est disponible +alert( john.age ); // ...Ainsi que l'age ``` -Now the old code works too and we've got a nice additional property. +Maintenant l'ancien code fonctionne toujours et nous avons une propriété additionnelle. \ No newline at end of file pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy