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/classes | |
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/classes')
6 files changed, 458 insertions, 474 deletions
diff --git a/files/fr/web/javascript/reference/classes/constructor/index.md b/files/fr/web/javascript/reference/classes/constructor/index.md index f488f06dc5..ea9682c80d 100644 --- a/files/fr/web/javascript/reference/classes/constructor/index.md +++ b/files/fr/web/javascript/reference/classes/constructor/index.md @@ -9,24 +9,27 @@ tags: translation_of: Web/JavaScript/Reference/Classes/constructor browser-compat: javascript.classes.constructor --- -<div>{{jsSidebar("Classes")}}</div> +{{jsSidebar("Classes")}} -<p>La méthode <strong><code>constructor</code></strong> est une méthode qui est utilisée pour créer et initialiser un objet lorsqu'on utilise le mot clé <a href="/fr/docs/Web/JavaScript/Reference/Statements/class"><code>class</code></a>.</p> +La méthode **`constructor`** est une méthode qui est utilisée pour créer et initialiser un objet lorsqu'on utilise le mot clé [`class`](/fr/docs/Web/JavaScript/Reference/Statements/class). -<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div> +{{EmbedInteractiveExample("pages/js/classes-constructor.html")}} -<h2 id="syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">constructor() { ... } +```js +constructor() { ... } constructor(argument0) { ... } constructor(argument0, argument1) { ... } -constructor(argument0, argument1, ... , argumentN) { ... }</pre> +constructor(argument0, argument1, ... , argumentN) { ... } +``` -<h2 id="description">Description</h2> +## Description -<p>Un constructeur vous permet de fournir toute initialisation personnalisée qui doit être effectuée avant que toute autre méthode puisse être appelée sur un objet instancié.</p> +Un constructeur vous permet de fournir toute initialisation personnalisée qui doit être effectuée avant que toute autre méthode puisse être appelée sur un objet instancié. -<pre class="brush: js">class Person { +```js +class Person { constructor(name) { this.name = name; } @@ -38,21 +41,27 @@ constructor(argument0, argument1, ... , argumentN) { ... }</pre> const otto = new Person('Otto'); -otto.introduce();</pre> +otto.introduce(); +``` -<p>Si vous ne fournissez pas votre propre constructeur, alors un constructeur par défaut sera fourni pour vous. Si votre classe est une classe de base, le constructeur par défaut est vide :</p> +Si vous ne fournissez pas votre propre constructeur, alors un constructeur par défaut sera fourni pour vous. Si votre classe est une classe de base, le constructeur par défaut est vide : -<pre class="brush: js">constructor() {}</pre> +```js +constructor() {} +``` -<p>Si votre classe est une classe dérivée, le constructeur par défaut appelle le constructeur parent, en transmettant tous les arguments qui ont été fournis :</p> +Si votre classe est une classe dérivée, le constructeur par défaut appelle le constructeur parent, en transmettant tous les arguments qui ont été fournis : -<pre class="brush: js">constructor(...args) { +```js +constructor(...args) { super(...args); -}</pre> +} +``` -<p>Cela permet à un code comme celui-ci de fonctionner :</p> +Cela permet à un code comme celui-ci de fonctionner : -<pre class="brush: js">class ValidationError extends Error { +```js +class ValidationError extends Error { printCustomerMessage() { return `La validation a échoué :-( (détails : ${this.message})`; } @@ -68,13 +77,15 @@ try { console.log('Erreur inconnue', error); throw error; } -}</pre> +} +``` -<p>La classe <code>ValidationError</code> n'a pas besoin d'un constructeur explicite, car elle n'a pas besoin de faire d'initialisation personnalisée. Le constructeur par défaut se charge alors d'initialiser le parent <code>Error</code> à partir de l'argument qui lui est fourni.</p> +La classe `ValidationError` n'a pas besoin d'un constructeur explicite, car elle n'a pas besoin de faire d'initialisation personnalisée. Le constructeur par défaut se charge alors d'initialiser le parent `Error` à partir de l'argument qui lui est fourni. -<p>Cependant, si vous fournissez votre propre constructeur, et que votre classe dérive d'une certaine classe parente, alors vous devez appeler explicitement le constructeur de la classe parente en utilisant <code>super</code>. Par exemple :</p> +Cependant, si vous fournissez votre propre constructeur, et que votre classe dérive d'une certaine classe parente, alors vous devez appeler explicitement le constructeur de la classe parente en utilisant `super`. Par exemple : -<pre class="brush: js">class ValidationError extends Error { +```js +class ValidationError extends Error { constructor(message) { super(message); // appelle le constructeur de la classe parent this.name = 'ValidationError'; @@ -96,17 +107,19 @@ try { console.log('Unknown error', error); throw error; } -}</pre> +} +``` -<p>Il ne peut y avoir qu'une seule méthode spéciale portant le nom « <code>constructor</code> » dans une classe. Avoir plus d'une occurrence d'une méthode <code>constructor</code> dans une classe lancera une erreur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError"><code>SyntaxError</code></a>.</p> +Il ne peut y avoir qu'une seule méthode spéciale portant le nom « `constructor` » dans une classe. Avoir plus d'une occurrence d'une méthode `constructor` dans une classe lancera une erreur [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError). -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="using_the_constructor_method">Utilisation de la méthode du <code>constructor</code></h3> +### Utilisation de la méthode du `constructor` -<p>Cet extrait de code est tiré de l'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">échantillon de classes</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">démo en direct</a>).</p> +Cet extrait de code est tiré de l'[échantillon de classes](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) ([démo en direct](https://googlechrome.github.io/samples/classes-es6/index.html)). -<pre class="brush: js">class Square extends Polygon { +```js +class Square extends Polygon { constructor(length) { // Ici, on appelle le constructeur de la classe parente avec des longueurs // fournies pour la largeur et la hauteur du polygone. @@ -124,13 +137,15 @@ try { this.height = value**0.5; this.width = value**0.5; } -}</pre> +} +``` -<h3 id="another_example">Un autre exemple</h3> +### Un autre exemple -<p>Ici, le prototype de la classe <code>Square</code> est modifié — mais le constructeur de sa classe de base <code>Polygon</code> est toujours appelé lorsqu'une nouvelle instance d'un carré est créée.</p> +Ici, le prototype de la classe `Square` est modifié — mais le constructeur de sa classe de base `Polygon` est toujours appelé lorsqu'une nouvelle instance d'un carré est créée. -<pre class="brush: js">class Polygon { +```js +class Polygon { constructor() { this.name = "Polygone"; } @@ -150,23 +165,21 @@ console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //fa console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true let newInstance = new Square(); -console.log(newInstance.name); // Polygone</pre> +console.log(newInstance.name); // Polygone +``` -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/class">Expression <code>class</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/class">Déclaration <code>class</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes"><code>Classes</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">Object.prototype.constructor</a> - </li> -</ul> +- [`super()`](/fr/docs/Web/JavaScript/Reference/Operators/super) +- [Expression `class`](/fr/docs/Web/JavaScript/Reference/Operators/class) +- [Déclaration `class`](/fr/docs/Web/JavaScript/Reference/Statements/class) +- [`Classes`](/fr/docs/Web/JavaScript/Reference/Classes) +- [Object.prototype.constructor](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) diff --git a/files/fr/web/javascript/reference/classes/extends/index.md b/files/fr/web/javascript/reference/classes/extends/index.md index 8e3af50594..2dee751c38 100644 --- a/files/fr/web/javascript/reference/classes/extends/index.md +++ b/files/fr/web/javascript/reference/classes/extends/index.md @@ -7,32 +7,30 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Classes/extends --- -<div>{{jsSidebar("Classes")}}</div> +{{jsSidebar("Classes")}} -<p>Le mot-clé <strong><code>extends</code></strong> est utilisé dans les <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">déclarations</a> et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/class">expressions de classes</a> afin de signifier qu'un type représenté par une classe hérite d'un autre type.</p> +Le mot-clé **`extends`** est utilisé dans les [déclarations](/fr/docs/Web/JavaScript/Reference/Instructions/class) et [expressions de classes](/fr/docs/Web/JavaScript/Reference/Opérateurs/class) afin de signifier qu'un type représenté par une classe hérite d'un autre type. +{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}} +## Syntaxe -<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div> + class ClasseFille extends ClasseParente { ... } -<h2 id="Syntaxe">Syntaxe</h2> +## Description -<pre class="syntaxbox">class ClasseFille extends ClasseParente { ... } -</pre> +Le mot-clé `extends` peut être utilisé pour créer des sous-classes de classes existantes (natives ou non). -<h2 id="Description">Description</h2> +La propriété `.prototype` d'une classe fille (aussi appelée une _extension_) doit être un {{jsxref("Object")}} ou {{jsxref("null")}}. -<p>Le mot-clé <code>extends</code> peut être utilisé pour créer des sous-classes de classes existantes (natives ou non).</p> +## Exemples -<p>La propriété <code>.prototype</code> d'une classe fille (aussi appelée une <em>extension</em>) doit être un {{jsxref("Object")}} ou {{jsxref("null")}}.</p> +### Utiliser `extends` -<h2 id="Exemples">Exemples</h2> +Ce fragment de code est tiré de [cet exemple](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) et crée une classe `Carré` qui hérite de `Polygone` : -<h3 id="Utiliser_extends">Utiliser <code>extends</code></h3> - -<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a> et crée une classe <code>Carré</code> qui hérite de <code>Polygone</code> :</p> - -<pre class="brush: js">class Carré extends Polygone { +```js +class Carré extends Polygone { constructor(longueur) { // On utilise le constructeur de la classe parente // avec le mot-clé super @@ -47,13 +45,15 @@ translation_of: Web/JavaScript/Reference/Classes/extends return this.hauteur * this.largeur; } -}</pre> +} +``` -<h3 id="Utiliser_extends_avec_des_objets_natifs">Utiliser <code>extends</code> avec des objets natifs</h3> +### Utiliser `extends` avec des objets natifs -<p>Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour {{jsxref("Date")}} :</p> +Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour {{jsxref("Date")}} : -<pre class="brush: js">class maDate extends Date { +```js +class maDate extends Date { constructor() { super(); } @@ -62,15 +62,17 @@ translation_of: Web/JavaScript/Reference/Classes/extends var mois = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sep','Oct','Nov','Déc']; return this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear(); } -}</pre> +} +``` -<p>Ces exemples sont extraits de ces deux pages : <a href="https://googlechrome.github.io/samples/classes-es6/index.html">démonstration</a>, <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">source</a>.</p> +Ces exemples sont extraits de ces deux pages : [démonstration](https://googlechrome.github.io/samples/classes-es6/index.html), [source](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html). -<h3 id="Étendre_null">Étendre <code>null</code></h3> +### Étendre `null` -<p>Étendre {{jsxref("null")}} se fait comme avec une classe normale sauf que l'objet prototype n'hérite pas de {{jsxref("Object.prototype")}}.</p> +Étendre {{jsxref("null")}} se fait comme avec une classe normale sauf que l'objet prototype n'hérite pas de {{jsxref("Object.prototype")}}. -<pre class="brush: js">class extensionNull extends null { +```js +class extensionNull extends null { constructor() {} } @@ -78,37 +80,20 @@ Object.getPrototypeOf(extensionNull); // Function.prototype Object.getPrototypeOf(extensionNull.prototype); // null new extensionNull(); // ReferenceError -</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('ES2015', '#sec-class-definitions', 'extends')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.classes.extends")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> - <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code></li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-class-definitions', 'extends')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-class-definitions', 'extends')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.classes.extends")}} + +## Voir aussi + +- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes) +- [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) diff --git a/files/fr/web/javascript/reference/classes/index.md b/files/fr/web/javascript/reference/classes/index.md index 33721a3faa..2808bc1d39 100644 --- a/files/fr/web/javascript/reference/classes/index.md +++ b/files/fr/web/javascript/reference/classes/index.md @@ -9,39 +9,43 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Classes --- -<div>{{JsSidebar("Classes")}}</div> +{{JsSidebar("Classes")}} -<p>Les classes JavaScript ont été introduites avec ECMAScript 2015. Elles sont un « sucre syntaxique » par rapport à l'héritage prototypal. En effet, cette syntaxe n'introduit pas un nouveau modèle d'héritage dans JavaScript ! Elle fournit uniquement une syntaxe plus simple pour créer des objets et manipuler l'héritage.</p> +Les classes JavaScript ont été introduites avec ECMAScript 2015. Elles sont un « sucre syntaxique » par rapport à l'héritage prototypal. En effet, cette syntaxe n'introduit pas un nouveau modèle d'héritage dans JavaScript ! Elle fournit uniquement une syntaxe plus simple pour créer des objets et manipuler l'héritage. -<h2 id="Définir_des_classes">Définir des classes</h2> +## Définir des classes -<p>En réalité, les classes sont juste des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">fonctions</a> spéciales. Ainsi, les classes sont définies de la même façon que les fonctions : par déclaration, ou par expression.</p> +En réalité, les classes sont juste des [fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) spéciales. Ainsi, les classes sont définies de la même façon que les fonctions : par déclaration, ou par expression. -<h3 id="Les_déclarations_de_classes">Les déclarations de classes</h3> +### Les déclarations de classes -<p>Pour utiliser une déclaration de classe simple, on utilisera le mot-clé <code>class</code>, suivi par le nom de la classe que l'on déclare (ici « Rectangle »).</p> +Pour utiliser une déclaration de classe simple, on utilisera le mot-clé `class`, suivi par le nom de la classe que l'on déclare (ici « Rectangle »). -<pre class="brush: js">class Rectangle { +```js +class Rectangle { constructor(hauteur, largeur) { this.hauteur = hauteur; this.largeur = largeur; } -}</pre> +} +``` -<h4 id="Remontée_des_déclarations_(hoisting)">Remontée des déclarations (<em>hoisting</em>)</h4> +#### Remontée des déclarations (_hoisting_) -<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations de fonctions</a> sont remontées dans le code. En revanche, ce n'est pas le cas pour les déclarations de classes. Ainsi, il est nécessaire de déclarer la classe avant de l'instancier. Dans le cas contraire, on obtient une {{jsxref("ReferenceError")}} :</p> +[Les déclarations de fonctions](/fr/docs/Web/JavaScript/Reference/Instructions/function) sont remontées dans le code. En revanche, ce n'est pas le cas pour les déclarations de classes. Ainsi, il est nécessaire de déclarer la classe avant de l'instancier. Dans le cas contraire, on obtient une {{jsxref("ReferenceError")}} : -<pre class="brush: js example-bad">const p = new Rectangle(); // ReferenceError +```js example-bad +const p = new Rectangle(); // ReferenceError class Rectangle {} -</pre> +``` -<h3 id="Les_expressions_de_classes">Les expressions de classes</h3> +### Les expressions de classes -<p>Il est possible d'utiliser des expressions de classes, nommées ou anonymes. Si on utilise un nom dans l'expression, ce nom ne sera accessible que depuis le corps de la classe via la propriété {{jsxref("Function.name", "name")}} (cette valeur ne sera pas directement accessible pour les instances).</p> +Il est possible d'utiliser des expressions de classes, nommées ou anonymes. Si on utilise un nom dans l'expression, ce nom ne sera accessible que depuis le corps de la classe via la propriété {{jsxref("Function.name", "name")}} (cette valeur ne sera pas directement accessible pour les instances). -<pre class="brush: js">// anonyme +```js +// anonyme let Rectangle = class { constructor(hauteur, largeur) { this.hauteur = hauteur; @@ -56,31 +60,30 @@ let Rectangle = class Rectangle { this.largeur = largeur; } }; -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> Les mêmes règles s'appliquent aux expressions de classes en ce qui concerne la remontée (<em>hoisting</em>) des classes (cf. le paragraphe précédent sur les remontées des déclarations de classe).</p> -</div> +> **Note :** Les mêmes règles s'appliquent aux expressions de classes en ce qui concerne la remontée (_hoisting_) des classes (cf. le paragraphe précédent sur les remontées des déclarations de classe). -<h2 id="Corps_d'une_classe_et_définition_des_méthodes">Corps d'une classe et définition des méthodes</h2> +## Corps d'une classe et définition des méthodes -<p>Le corps d'une classe est la partie contenue entre les accolades. C'est dans cette partie que l'on définit les propriétés d'une classe comme ses méthodes et son constructeur.</p> +Le corps d'une classe est la partie contenue entre les accolades. C'est dans cette partie que l'on définit les propriétés d'une classe comme ses méthodes et son constructeur. -<h3 id="Mode_strict">Mode strict</h3> +### Mode strict -<p>Le corps des classes, pour les expressions et pour les déclarations de classes, est exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (autrement dit, le constructeur, les méthodes statiques, le prototype, les accesseurs (<em>getters</em>) et mutateurs (<em>setters</em>) sont exécutés en mode strict).</p> +Le corps des classes, pour les expressions et pour les déclarations de classes, est exécuté en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) (autrement dit, le constructeur, les méthodes statiques, le prototype, les accesseurs (_getters_) et mutateurs (_setters_) sont exécutés en mode strict). -<h3 id="Constructeur">Constructeur</h3> +### Constructeur -<p>La méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> est une méthode spéciale qui permet de créer et d'initialiser les objet créés avec une classe. Il ne peut y avoir qu'une seule méthode avec le nom "constructor" pour une classe donnée. Si la classe contient plusieurs occurences d'une méthode <code>constructor</code>, cela provoquera une exception {{jsxref("SyntaxError")}}.</p> +La méthode [`constructor`](/fr/docs/Web/JavaScript/Reference/Classes/constructor) est une méthode spéciale qui permet de créer et d'initialiser les objet créés avec une classe. Il ne peut y avoir qu'une seule méthode avec le nom "constructor" pour une classe donnée. Si la classe contient plusieurs occurences d'une méthode `constructor`, cela provoquera une exception {{jsxref("SyntaxError")}}. -<p>Le constructeur ainsi déclaré peut utiliser le mot-clé <code>super</code> afin d'appeler le constructeur de la classe parente.</p> +Le constructeur ainsi déclaré peut utiliser le mot-clé `super` afin d'appeler le constructeur de la classe parente. -<h3 id="Méthodes_de_prototype">Méthodes de prototype</h3> +### Méthodes de prototype -<p>Voir aussi les définitions de méthode.</p> +Voir aussi les définitions de méthode. -<pre class="brush: js">class Rectangle { +```js +class Rectangle { constructor(hauteur, largeur) { this.hauteur = hauteur; this.largeur = largeur; @@ -97,13 +100,15 @@ let Rectangle = class Rectangle { const carré = new Rectangle(10, 10); -console.log(carré.area);</pre> +console.log(carré.area); +``` -<h3 id="Méthodes_statiques">Méthodes statiques</h3> +### Méthodes statiques -<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/static">static</a></code> permet de définir une méthode statique pour une classe. Les méthodes statiques sont appelées par rapport à la classe entière et non par rapport à une <a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet#L'instance">instance</a> donnée (ces méthodes ne peuvent pas être appelées « depuis » une instance). Ces méthodes sont généralement utilisées sous formes d'utilitaires au sein d'applications.</p> +Le mot-clé [`static`](/fr/docs/Web/JavaScript/Reference/Classes/static) permet de définir une méthode statique pour une classe. Les méthodes statiques sont appelées par rapport à la classe entière et non par rapport à une [instance](/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet#L'instance) donnée (ces méthodes ne peuvent pas être appelées « depuis » une instance). Ces méthodes sont généralement utilisées sous formes d'utilitaires au sein d'applications. -<pre class="brush: js">class Point { +```js +class Point { constructor(x, y) { this.x = x; this.y = y; @@ -119,13 +124,15 @@ console.log(carré.area);</pre> const p1 = new Point(5, 5); const p2 = new Point(10, 10); -console.log(Point.distance(p1, p2));</pre> +console.log(Point.distance(p1, p2)); +``` -<h3 id="Gestion_de_this_pour_le_prototype_et_les_méthodes_statiques">Gestion de <code>this</code> pour le prototype et les méthodes statiques</h3> +### Gestion de `this` pour le prototype et les méthodes statiques -<p>Lorsqu'une méthode statique ou une méthode liée au prototype est appelée sans valeur <code>this</code>, celle-ci vaudra <code>undefined</code> au sein de la fonction. Il n'y aura pas d'autodétermination de <code>this</code> (<em>autoboxing</em> en anglais). On aura le même résultat si on invoque ces fonctions dans du code non-strict car les fonctions liées aux classes sont exécutées en mode strict.</p> +Lorsqu'une méthode statique ou une méthode liée au prototype est appelée sans valeur `this`, celle-ci vaudra `undefined` au sein de la fonction. Il n'y aura pas d'autodétermination de `this` (_autoboxing_ en anglais). On aura le même résultat si on invoque ces fonctions dans du code non-strict car les fonctions liées aux classes sont exécutées en mode strict. -<pre class="brush: js">class Animal { +```js +class Animal { crie() { return this; } @@ -141,13 +148,15 @@ crie(); // undefined Animal.mange(); // class Animal let mange = Animal.mange; -mange(); // undefined</pre> +mange(); // undefined +``` -<p>Si on écrit le code avec des fonctions traditionnelles plutôt qu'avec des classes et qu'on utilise le mode non-strict, l'autodétermination de <code>this</code> sera faite en fonction du contexte dans lequel la fonction a été appelée. Si la valeur initiale est <code>undefined</code>, <code>this</code> correspondra à l'objet global.</p> +Si on écrit le code avec des fonctions traditionnelles plutôt qu'avec des classes et qu'on utilise le mode non-strict, l'autodétermination de `this` sera faite en fonction du contexte dans lequel la fonction a été appelée. Si la valeur initiale est `undefined`, `this` correspondra à l'objet global. -<p>L'autodétermination de <code>this</code> n'a pas lieu en mode strict, la valeur <code>this</code> est passée telle quelle.</p> +L'autodétermination de `this` n'a pas lieu en mode strict, la valeur `this` est passée telle quelle. -<pre class="brush: js">function Animal() { } +```js +function Animal() { } Animal.prototype.crie = function() { return this; @@ -163,75 +172,80 @@ crie(); // l'objet global let mange = Animal.mange; mange(); // l'objet global -</pre> +``` -<h3 id="Propriétés_des_instances">Propriétés des instances</h3> +### Propriétés des instances -<p>Les propriétés des instances doivent être définies dans les méthodes de la classe :</p> +Les propriétés des instances doivent être définies dans les méthodes de la classe : -<pre class="brush: js">class Rectangle { +```js +class Rectangle { constructor(hauteur, largeur) { this.hauteur = hauteur; this.largeur = largeur; } -}</pre> +} +``` -<p>Les propriétés statiques ou les données relatives au prototype doivent être définies en dehors de la déclaration comportant le corps de la classe :</p> +Les propriétés statiques ou les données relatives au prototype doivent être définies en dehors de la déclaration comportant le corps de la classe : -<pre class="brush: js">Rectangle.largeurStatique = 20; -Rectangle.prototype.largeurProto = 25;</pre> +```js +Rectangle.largeurStatique = 20; +Rectangle.prototype.largeurProto = 25; +``` -<h3 id="Déclarations_de_champs">Déclarations de champs</h3> +### Déclarations de champs -<p>{{SeeCompatTable}}</p> +{{SeeCompatTable}} -<div class="warning"> -<p><strong>Attention :</strong> Les déclarations de champs publics et privés sont une <a href="https://github.com/tc39/proposal-class-fields">fonctionnalité expérimentale actuellement proposée pour être intégrée dans le standard ECMAScript</a>. Elle n'est pas implémentée par la majorité des navigateurs mais on peut émuler cette fonctionnalité en utilisant un système de compilation tel que <a href="https://babeljs.io/">Babel</a>.</p> -</div> +> **Attention :** Les déclarations de champs publics et privés sont une [fonctionnalité expérimentale actuellement proposée pour être intégrée dans le standard ECMAScript](https://github.com/tc39/proposal-class-fields). Elle n'est pas implémentée par la majorité des navigateurs mais on peut émuler cette fonctionnalité en utilisant un système de compilation tel que [Babel](https://babeljs.io/). -<h4 id="Déclarations_de_champs_publics">Déclarations de champs publics</h4> +#### Déclarations de champs publics -<p>En utilisant la syntaxe pour la déclaration des champs, on peut réécrire l'exemple précédent de la façon suivante :</p> +En utilisant la syntaxe pour la déclaration des champs, on peut réécrire l'exemple précédent de la façon suivante : -<pre class="brush: js">class Rectangle { +```js +class Rectangle { hauteur = 0; largeur; constructor(hauteur, largeur) { this.hauteur = hauteur; this.largeur = largeur; } -}</pre> +} +``` -<p>En déclarant les champs en préalable, il est plus facile de comprendre la classe dans son ensemble. De plus, on s'assure que les champs soient toujours présents.</p> +En déclarant les champs en préalable, il est plus facile de comprendre la classe dans son ensemble. De plus, on s'assure que les champs soient toujours présents. -<p>Comme on peut le voir dans cet exemple, les champs peuvent éventuellement être déclarés avec une valeur par défaut.</p> +Comme on peut le voir dans cet exemple, les champs peuvent éventuellement être déclarés avec une valeur par défaut. -<h4 id="Déclarations_de_champs_privés">Déclarations de champs privés</h4> +#### Déclarations de champs privés -<p>En utilisant des champs privés, on peut revoir la définition de la façon suivante :</p> +En utilisant des champs privés, on peut revoir la définition de la façon suivante : -<pre class="brush: js">class Rectangle { +```js +class Rectangle { #hauteur = 0; #largeur; constructor(hauteur, largeur){ this.#hauteur = hauteur; this.#largeur = largeur; } -}</pre> +} +``` -<p>Si on utilise les champs privés hors de la classe, cela génèrera une erreur. Ces champs ne peuvent être lus ou modifiés que depuis le corps de la classe. En évitant d'exposer des éléments à l'extérieur, on s'assure que les portions de code qui consomment cette classe n'utilise pas ses détails internes et on peut alors maintenir la classe dans son ensemble et modifier les détails internes si besoin.</p> +Si on utilise les champs privés hors de la classe, cela génèrera une erreur. Ces champs ne peuvent être lus ou modifiés que depuis le corps de la classe. En évitant d'exposer des éléments à l'extérieur, on s'assure que les portions de code qui consomment cette classe n'utilise pas ses détails internes et on peut alors maintenir la classe dans son ensemble et modifier les détails internes si besoin. -<div class="note"> -<p><strong>Note :</strong> Les champs privés doivent nécessairement être déclarés en premier dans les déclarations de champ.</p> -</div> +> **Note :** Les champs privés doivent nécessairement être déclarés en premier dans les déclarations de champ. -<p>Il n'est pas possible de créer des champs privés <em>a posteriori</em> au moment où on leur affecterait une valeur. Autrement dit, il est possible de déclarer une variable normale au moment voulu lorsqu'on lui affecte une valeur tandis que pour les champs privés, ces derniers doivent être déclarés (éventuellement initialisés) en amont, au début du corps de la classe.</p> +Il n'est pas possible de créer des champs privés _a posteriori_ au moment où on leur affecterait une valeur. Autrement dit, il est possible de déclarer une variable normale au moment voulu lorsqu'on lui affecte une valeur tandis que pour les champs privés, ces derniers doivent être déclarés (éventuellement initialisés) en amont, au début du corps de la classe. -<h2 id="Créer_une_sous-classe_avec_extends">Créer une sous-classe avec <code>extends</code></h2> +## Créer une sous-classe avec `extends` -<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code>, utilisé dans les déclarations ou les expressions de classes, permet de créer une classe qui hérite d'une autre classe (on parle aussi de « sous-classe » ou de « classe-fille »).</p> +Le mot-clé [`extends`](/fr/docs/Web/JavaScript/Reference/Classes/extends), utilisé dans les déclarations ou les expressions de classes, permet de créer une classe qui hérite d'une autre classe (on parle aussi de « sous-classe » ou de « classe-fille »). -<pre class="brush: js">class Animal { +```js +class Animal { constructor(nom) { this.nom = nom; } @@ -248,13 +262,15 @@ class Chien extends Animal { parle() { console.log(`${this.nom} aboie.`); } -}</pre> +} +``` -<p>Si on déclare un constructeur dans une classe fille, on doit utiliser <code>super()</code> avant <code>this</code>.</p> +Si on déclare un constructeur dans une classe fille, on doit utiliser `super()` avant `this`. -<p>On peut également étendre des classes plus <em>traditionnelles</em> basées sur des constructeurs fonctionnels :</p> +On peut également étendre des classes plus _traditionnelles_ basées sur des constructeurs fonctionnels : -<pre class="brush: js">function Animal (nom) { +```js +function Animal (nom) { this.nom = nom; } Animal.prototype.crie = function () { @@ -271,11 +287,13 @@ class Chien extends Animal { let c = new Chien('Ida'); c.crie(); // Ida fait du bruit. -// Ida aboie.</pre> +// Ida aboie. +``` -<p>En revanche, les classes ne permettent pas d'étendre des objets classiques non-constructibles. Si on souhaite créer un lien d'héritage en un objet et une classe, on utilisera {{jsxref("Object.setPrototypeOf()")}} :</p> +En revanche, les classes ne permettent pas d'étendre des objets classiques non-constructibles. Si on souhaite créer un lien d'héritage en un objet et une classe, on utilisera {{jsxref("Object.setPrototypeOf()")}} : -<pre class="brush: js">const Animal = { +```js +const Animal = { crie() { console.log(`${this.nom} fait du bruit.`); } @@ -295,30 +313,34 @@ Object.setPrototypeOf(Chien.prototype, Animal); let d = new Chien('Ida'); d.crie(); // Ida fait du bruit -// Ida aboie.</pre> +// Ida aboie. +``` -<h2 id="Le_symbole_species">Le symbole <code>species</code></h2> +## Le symbole `species` -<p>Lorsqu'on souhaite renvoyer des objets {{jsxref("Array")}} avec une sous-classe <code>MonArray</code>, on peut utiliser symbole <code>species</code> pour surcharger le constructeur par défaut.</p> +Lorsqu'on souhaite renvoyer des objets {{jsxref("Array")}} avec une sous-classe `MonArray`, on peut utiliser symbole `species` pour surcharger le constructeur par défaut. -<p>Par exemple, si, lorsqu'on utilise des méthodes comme {{jsxref("Array.map","map()")}} qui renvoient le constructeur par défaut et qu'on veut qu'elles renvoient <code>Array</code> plutôt que <code>MonArray</code>, on utilisera {{jsxref("Symbol.species")}} :</p> +Par exemple, si, lorsqu'on utilise des méthodes comme {{jsxref("Array.map","map()")}} qui renvoient le constructeur par défaut et qu'on veut qu'elles renvoient `Array` plutôt que `MonArray`, on utilisera {{jsxref("Symbol.species")}} : -<pre class="brush: js">class MonArray extends Array { +```js +class MonArray extends Array { // On surcharge species // avec le constructeur Array du parent static get [Symbol.species]() { return Array; } } let a = new MonArray(1,2,3); -let mapped = a.map(x => x * x); +let mapped = a.map(x => x * x); console.log(mapped instanceof MonArray); // false -console.log(mapped instanceof Array); // true</pre> +console.log(mapped instanceof Array); // true +``` -<h2 id="Utiliser_super_pour_la_classe_parente">Utiliser super pour la classe parente</h2> +## Utiliser super pour la classe parente -<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code> est utilisé pour appeler les fonctions rattachées à un objet parent.</p> +Le mot-clé [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) est utilisé pour appeler les fonctions rattachées à un objet parent. -<pre class="brush: js">class Chat { +```js +class Chat { constructor(nom) { this.nom = nom; } @@ -334,78 +356,55 @@ class Lion extends Chat { console.log(`${this.nom} rugit.`); } } -</pre> +``` -<h2 id="Les_mix-ins">Les <em>mix-ins</em></h2> +## Les _mix-ins_ -<p>Les sous-classes abstraites ou <em>mix-ins</em> sont des modèles (<em>templates</em>) pour des classes. Une classe ECMAScript ne peut avoir qu'une seule classe parente et il n'est donc pas possible, par exemple, d'hériter de plusieurs classes dont une classe abstraite. La fonctionnalité dont on souhaite disposer doit être fournie par la classe parente.</p> +Les sous-classes abstraites ou _mix-ins_ sont des modèles (_templates_) pour des classes. Une classe ECMAScript ne peut avoir qu'une seule classe parente et il n'est donc pas possible, par exemple, d'hériter de plusieurs classes dont une classe abstraite. La fonctionnalité dont on souhaite disposer doit être fournie par la classe parente. -<p>Une fonction peut prendre une classe parente en entrée et renvoyer une classe fille qui étend cette classe parente. Cela peut permettre d'émuler les <em>mix-ins</em> avec ECMAScript.</p> +Une fonction peut prendre une classe parente en entrée et renvoyer une classe fille qui étend cette classe parente. Cela peut permettre d'émuler les _mix-ins_ avec ECMAScript. -<pre class="brush: js">let calculetteMixin = Base => class extends Base { +```js +let calculetteMixin = Base => class extends Base { calc() { } }; -let aleatoireMixin = Base => class extends Base { +let aleatoireMixin = Base => class extends Base { randomiseur() { } }; -</pre> +``` -<p>Une classe utilisant ces <em>mix-ins</em> peut alors être écrite de cette façon :</p> +Une classe utilisant ces _mix-ins_ peut alors être écrite de cette façon : -<pre class="brush: js">class Toto { } +```js +class Toto { } class Truc extends calculetteMixin(aleatoireMixin(Toto)) { } -</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('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.classes")}}</p> - -<h2 id="Utilisation_via_l'éditeur_multiligne_dans_Firefox">Utilisation via l'éditeur multiligne dans Firefox</h2> - -<p>Une classe ne peut pas être redéfinie. Si vous testez votre code via l'éditeur multiligne JavaScript de Firefox (Outils > Développement web > Editeur multiligne JavaScript) et que vous exécutez à plusieurs reprises votre code avec la définition d'une classe, vous obtiendrez une exception SyntaxError : <em>redeclaration of let <class-name></em>.</p> - -<p>Pour relancer une définition, il faut utiliser le menu Exécuter > Recharger et exécuter. À ce sujet, voir le bug {{bug("1428672")}}.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li> - <li>{{jsxref("Instructions/class", "Les déclarations de classes","",1)}}</li> - <li>{{jsxref("Opérateurs/class", "Les expressions de classes","",1)}}</li> - <li>{{jsxref("Opérateurs/super", "super")}}</li> - <li><a href="https://tech.mozfr.org/post/2015/07/29/ES6-en-details-%3A-les-classes">Billet sur les classes (traduction en français)</a></li> - <li><a href="https://github.com/tc39/proposal-class-fields">Champs publics et privés pour les classes (proposition de niveau 3)</a></li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.classes")}} + +## Utilisation via l'éditeur multiligne dans Firefox + +Une classe ne peut pas être redéfinie. Si vous testez votre code via l'éditeur multiligne JavaScript de Firefox (Outils > Développement web > Editeur multiligne JavaScript) et que vous exécutez à plusieurs reprises votre code avec la définition d'une classe, vous obtiendrez une exception SyntaxError : _redeclaration of let \<class-name>_. + +Pour relancer une définition, il faut utiliser le menu Exécuter > Recharger et exécuter. À ce sujet, voir le bug {{bug("1428672")}}. + +## Voir aussi + +- [Les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) +- {{jsxref("Instructions/class", "Les déclarations de classes","",1)}} +- {{jsxref("Opérateurs/class", "Les expressions de classes","",1)}} +- {{jsxref("Opérateurs/super", "super")}} +- [Billet sur les classes (traduction en français)](https://tech.mozfr.org/post/2015/07/29/ES6-en-details-%3A-les-classes) +- [Champs publics et privés pour les classes (proposition de niveau 3)](https://github.com/tc39/proposal-class-fields) diff --git a/files/fr/web/javascript/reference/classes/private_class_fields/index.md b/files/fr/web/javascript/reference/classes/private_class_fields/index.md index 9d1187b01d..45ad084074 100644 --- a/files/fr/web/javascript/reference/classes/private_class_fields/index.md +++ b/files/fr/web/javascript/reference/classes/private_class_fields/index.md @@ -7,36 +7,34 @@ tags: - JavaScript translation_of: Web/JavaScript/Reference/Classes/Private_class_fields --- -<div>{{JsSidebar("Classes")}}</div> +{{JsSidebar("Classes")}}Les propriétés de classe sont publiques par défaut et peuvent être lues et modifiées à l'extérieur de la classe. Cependant, [une proposition expérimentale](https://github.com/tc39/proposal-class-fields), permettant de définir des variables privées dans une classe avec le préfixe `#`, est disponible. -<div>Les propriétés de classe sont publiques par défaut et peuvent être lues et modifiées à l'extérieur de la classe. Cependant, <a href="https://github.com/tc39/proposal-class-fields">une proposition expérimentale</a>, permettant de définir des variables privées dans une classe avec le préfixe <code>#</code>, est disponible.</div> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> + class ClassWithPrivateField { + #privateField + } -<pre class="syntaxbox notranslate">class ClassWithPrivateField { - #privateField -} + class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world' + } + } -class ClassWithPrivateMethod { - #privateMethod() { - return 'hello world' - } -} - -class ClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD -} -</pre> + class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + } -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Champs_privés_statiques">Champs privés statiques</h3> +### Champs privés statiques -<p>Les champs privés sont accessibles depuis le constructeur et depuis l'intérieur de la déclaration de la classe elle-même.</p> +Les champs privés sont accessibles depuis le constructeur et depuis l'intérieur de la déclaration de la classe elle-même. -<p>La limitation des variables statiques ne pouvant être appelées que par des méthodes statiques tient toujours.</p> +La limitation des variables statiques ne pouvant être appelées que par des méthodes statiques tient toujours. -<pre class="brush: js notranslate">class ClassWithPrivateStaticField { +```js +class ClassWithPrivateStaticField { static #PRIVATE_STATIC_FIELD static publicStaticMethod() { @@ -45,15 +43,17 @@ class ClassWithPrivateStaticField { } } -console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre> +console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42) +``` -<p>Les champs statiques privés sont ajoutés au constructeur de la classe au moment de l'évaluation de classe..</p> +Les champs statiques privés sont ajoutés au constructeur de la classe au moment de l'évaluation de classe.. -<p>Il y a une restriction de provenance sur les champs statiques privés. Seule la classe qui a défini un champ statique privé peut y accéder.</p> +Il y a une restriction de provenance sur les champs statiques privés. Seule la classe qui a défini un champ statique privé peut y accéder. -<p>Ceci peut conduire à un comportement inattendu lors de l'utilisation de <strong><code>this</code></strong>.</p> +Ceci peut conduire à un comportement inattendu lors de l'utilisation de **`this`**. -<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField { +```js +class BaseClassWithPrivateStaticField { static #PRIVATE_STATIC_FIELD static basePublicStaticMethod() { @@ -71,15 +71,16 @@ try { } catch(e) { error = e} console.assert(error instanceof TypeError) -</pre> +``` -<h3 id="Champs_dinstance_privés">Champs d'instance privés</h3> +### Champs d'instance privés -<p>Les champs d'instance privés sont déclarés avec des <strong>noms</strong> à <strong># </strong>(prononcés "<em>noms à hash</em>", "<em>hash names</em>" en anglais), qui sont des identifieurs préfixés par <code>#</code>. Le <code>#</code> fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès.</p> +Les champs d'instance privés sont déclarés avec des **noms** à **#** (prononcés "_noms à hash_", "_hash names_" en anglais), qui sont des identifieurs préfixés par `#`. Le `#` fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès. -<p>L'encapsulation est forcée par le langage. C'est une erreur de syntaxe que de faire référence aux noms à <code>#</code> en dehors de leur portée.</p> +L'encapsulation est forcée par le langage. C'est une erreur de syntaxe que de faire référence aux noms à `#` en dehors de leur portée. -<pre class="brush: js notranslate">class ClassWithPrivateField { +```js +class ClassWithPrivateField { #privateField constructor() { @@ -90,17 +91,18 @@ console.assert(error instanceof TypeError) const instance = new ClassWithPrivateField() instance.#privateField === 42 // Erreur de syntaxe -</pre> +``` -<h3 id="Méthodes_Privées">Méthodes Privées</h3> +### Méthodes Privées -<h4 id="Méthodes_statiques_privées">Méthodes statiques privées</h4> +#### Méthodes statiques privées -<p>Comme leur équivalents publics, les méthodes statiques privées sont appelées dans la classe elle-même, pas dans les instances de la classe. Comme les champs statiques privés, elles ne sont accessibles que depuis l'intérieur de la déclaration de la classe.</p> +Comme leur équivalents publics, les méthodes statiques privées sont appelées dans la classe elle-même, pas dans les instances de la classe. Comme les champs statiques privés, elles ne sont accessibles que depuis l'intérieur de la déclaration de la classe. -<p>Les méthodes statiques privées peuvent être des fonctions génératrices, asynchrones et génératrices asynchrones.</p> +Les méthodes statiques privées peuvent être des fonctions génératrices, asynchrones et génératrices asynchrones. -<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod { +```js +class ClassWithPrivateStaticMethod { static #privateStaticMethod() { return 42 } @@ -116,11 +118,12 @@ instance.#privateField === 42 // Erreur de syntaxe console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42); -</pre> +``` -<p>Cela peut conduire à un comportement inattendu lors de l'utilisation de <strong><code>this</code></strong>. Dans l'exemple suivant, <code>this</code> fait référence à la classe <code>Derived</code> (pas à la classe <code>Base</code>) lorsqu'on essaie d'appeler <code>Derived.publicStaticMethod2()</code>, et fait ainsi apparaître la même "restriction de provenance" que mentionné ci-dessus :</p> +Cela peut conduire à un comportement inattendu lors de l'utilisation de **`this`**. Dans l'exemple suivant, `this` fait référence à la classe `Derived` (pas à la classe `Base`) lorsqu'on essaie d'appeler `Derived.publicStaticMethod2()`, et fait ainsi apparaître la même "restriction de provenance" que mentionné ci-dessus : -<pre class="brush: js notranslate">class Base { +```js +class Base { static #privateStaticMethod() { return 42; } @@ -136,13 +139,14 @@ class Derived extends Base {} console.log(Derived.publicStaticMethod1()); // 42 console.log(Derived.publicStaticMethod2()); // TypeError -</pre> +``` -<h4 id="Méthodes_dinstance_privées">Méthodes d'instance privées</h4> +#### Méthodes d'instance privées -<p>Les méthodes d'instance privées sont des méthodes disponibles dans les instances de classe privées, dont l'accès est restreint de la même manière que les champs d'instance privés.</p> +Les méthodes d'instance privées sont des méthodes disponibles dans les instances de classe privées, dont l'accès est restreint de la même manière que les champs d'instance privés. -<pre class="brush: js notranslate">class ClassWithPrivateMethod { +```js +class ClassWithPrivateMethod { #privateMethod() { return 'hello world' } @@ -154,11 +158,13 @@ console.log(Derived.publicStaticMethod2()); // TypeError const instance = new ClassWithPrivateMethod() console.log(instance.getPrivateMessage()) -// expected output: "hello world"</pre> +// expected output: "hello world" +``` -<p>Les méthodes d'instance privées peuvent être des fonctions génératrices, asynchones ou génératrices asynchrones. Des accesseurs (getters) et des mutateurs (setters) privés sont aussi posibles :</p> +Les méthodes d'instance privées peuvent être des fonctions génératrices, asynchones ou génératrices asynchrones. Des accesseurs (getters) et des mutateurs (setters) privés sont aussi posibles : -<pre class="brush: js notranslate">class ClassWithPrivateAccessor { +```js +class ClassWithPrivateAccessor { #message get #decoratedMessage() { @@ -176,32 +182,19 @@ console.log(instance.getPrivateMessage()) new ClassWithPrivateAccessor(); // expected output: "✨hello world✨" -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td> - </tr> - </tbody> -</table> +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications +| Spécification | +| ---------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}} | +## Compatibilité des navigateurs -<p>{{Compat("javascript.classes.private_class_fields")}}</p> +{{Compat("javascript.classes.private_class_fields")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes/Class_fields">Champs de classe publiques</a></li> - <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> -</ul> +- [Champs de classe publiques](/fr/docs/Web/JavaScript/Reference/Classes/Class_fields) +- [The Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html) diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.md b/files/fr/web/javascript/reference/classes/public_class_fields/index.md index 80b3096c8a..8630e5e473 100644 --- a/files/fr/web/javascript/reference/classes/public_class_fields/index.md +++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.md @@ -8,64 +8,65 @@ tags: translation_of: Web/JavaScript/Reference/Classes/Public_class_fields original_slug: Web/JavaScript/Reference/Classes/Class_fields --- -<div>{{JsSidebar("Classes")}}{{SeeCompatTable}}</div> +{{JsSidebar("Classes")}}{{SeeCompatTable}} -<div class="note"> -<p><strong>Note :</strong> Cette page décrit des fonctionnalités expérimentales.</p> +> **Note :** Cette page décrit des fonctionnalités expérimentales. +> +> Les déclarations de champs, tant publics que privés, sont [une fonctionnalité expérimentale (étape 3)](https://github.com/tc39/proposal-class-fields) proposée au [TC39](https://tc39.github.io/beta/), le comité des standards JavaScript. +> +> La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que [Babel](https://babeljs.io/). Voir [l'information de compatibilité](/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility) ci-dessous. -<p>Les déclarations de champs, tant publics que privés, sont <a href="https://github.com/tc39/proposal-class-fields">une fonctionnalité expérimentale (étape 3)</a> proposée au <a href="https://tc39.github.io/beta/">TC39</a>, le comité des standards JavaScript.</p> +Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype. -<p>La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que <a href="https://babeljs.io/">Babel</a>. Voir <a href="/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility">l'information de compatibilité</a> ci-dessous.</p> -</div> +## Syntaxe -<p>Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype.</p> + class ClasseAvecChampDInstance { + champDInstance = 'champ d\'instance' + } -<h2 id="Syntaxe">Syntaxe</h2> + class ClasseAvecChampStatique { + static champStatique = 'champ statique' + } -<pre class="syntaxbox notranslate">class ClasseAvecChampDInstance { - champDInstance = 'champ d\'instance' -} - -class ClasseAvecChampStatique { - static champStatique = 'champ statique' -} - -class ClasseAvecMethodeDInstancePublique { - methodePublique() { - return 'hello world' - } -} -</pre> + class ClasseAvecMethodeDInstancePublique { + methodePublique() { + return 'hello world' + } + } -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Champs_statiques_publics">Champs statiques publics</h3> +### Champs statiques publics -<p>Les champs statiques publics sont utiles lorsque vous voulez qu'un champ n'existe qu'une seule fois par classe, pas dans chaque instance que vous créez. Cela est utile pour des caches, une configuration fixe, ou tout autres données dont vous n'avez pas besoin qu'elles soient répliquées à travers les instances.</p> +Les champs statiques publics sont utiles lorsque vous voulez qu'un champ n'existe qu'une seule fois par classe, pas dans chaque instance que vous créez. Cela est utile pour des caches, une configuration fixe, ou tout autres données dont vous n'avez pas besoin qu'elles soient répliquées à travers les instances. -<p>Les champs statiques publics sont déclarés en utilisant le mot-clé <code>static</code>. Ils sont ajoutés au constructeur de la classe au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. On y accède à nouveau à partir du constructeur de la classe.</p> +Les champs statiques publics sont déclarés en utilisant le mot-clé `static`. Ils sont ajoutés au constructeur de la classe au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. On y accède à nouveau à partir du constructeur de la classe. -<pre class="brush: js notranslate">class ClasseAvecChampStatique { +```js +class ClasseAvecChampStatique { static champStatique = 'champ statique' } console.log(ClasseAvecChampStatique.champStatique) // affichage attendu : "champ statique" -</pre> +``` -<p>Les champs sans initialiseur sont initialisés à <code>undefined</code>.</p> +Les champs sans initialiseur sont initialisés à `undefined`. -<pre class="brush: js notranslate">class ClasseAvecChampStatique { +```js +class ClasseAvecChampStatique { static champStatique } console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique')) console.log(ClasseAvecChampStatique.champStatique) -// affichage attendu : "undefined"</pre> +// affichage attendu : "undefined" +``` -<p>Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, mais on peut y accéder via la chaîne de prototypes.</p> +Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, mais on peut y accéder via la chaîne de prototypes. -<pre class="brush: js notranslate">class ClasseAvecChampStatique { +```js +class ClasseAvecChampStatique { static champStatiqueDeBase = 'champ de base' } @@ -77,11 +78,13 @@ console.log(SousClasseAvecChampStatique.sousChampStatique) // affichage attendu : "champ de la sous-classe" console.log(SousClasseAvecChampStatique.champStatiqueDeBase) -// affichage attendu : "champ de base"</pre> +// affichage attendu : "champ de base" +``` -<p>Lors de l'initialisation des champs, <code>this</code> fait référence au constructeur de la classe. Vous pouvez aussi le référencer par son nom, et utiliser <code>super</code> pour obtenir le constructeur de la superclasse (s'il en existe un) :</p> +Lors de l'initialisation des champs, `this` fait référence au constructeur de la classe. Vous pouvez aussi le référencer par son nom, et utiliser `super` pour obtenir le constructeur de la superclasse (s'il en existe un) : -<pre class="brush: js notranslate">class ClasseAvecChampStatique { +```js +class ClasseAvecChampStatique { static champStatiqueDeBase = 'champ statique de base' static autreChampStatiqueDeBase = this.champStatiqueDeBase @@ -97,36 +100,41 @@ console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase) console.log(SousClasseAvecChampStatique.sousChampStatique) // affichage attendu : "affichage de la méthode statique de base" -</pre> +``` -<h3 id="Champs_dinstance_publics">Champs d'instance publics</h3> +### Champs d'instance publics -<p>Les champs d'instance publics existent dans chaque instance créée d'une classe. En déclarant un champ public, vous pouvez vous assurer que le champ est toujours présent, et que la définition de la classe est davantage auto-documentée.</p> +Les champs d'instance publics existent dans chaque instance créée d'une classe. En déclarant un champ public, vous pouvez vous assurer que le champ est toujours présent, et que la définition de la classe est davantage auto-documentée. -<p>Les champs d'instance publics sont ajoutés grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}, soit au moment de la construction dans la classe de base (avant que le corps du constructeur ne soit exécuté), soit juste après le retour de <code>super()</code> dans une sous-classe.</p> +Les champs d'instance publics sont ajoutés grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}, soit au moment de la construction dans la classe de base (avant que le corps du constructeur ne soit exécuté), soit juste après le retour de `super()` dans une sous-classe. -<pre class="brush: js notranslate">class ClasseAvecChampDInstance { +```js +class ClasseAvecChampDInstance { champDInstance = 'champ d\'instance' } const instance = new ClasseAvecChampDInstance() console.log(instance.champDInstance) -// affichage attendu : "champ d'instance"</pre> +// affichage attendu : "champ d'instance" +``` -<p>Les champs sans initialiseur sont initialisés à <code>undefined</code>.</p> +Les champs sans initialiseur sont initialisés à `undefined`. -<pre class="brush: js notranslate">class ClasseAvecChampDInstance { +```js +class ClasseAvecChampDInstance { champdDInstance } const instance = new ClasseAvecChampDInstance() console.assert(instance.hasOwnProperty('champDInstance')) console.log(instance.champDInstance); -// affichage attendu : "undefined"</pre> +// affichage attendu : "undefined" +``` -<p>À l'instar des propriétés, les noms de champ peuvent être calculés :</p> +À l'instar des propriétés, les noms de champ peuvent être calculés : -<pre class="brush: js notranslate">const PREFIXE = 'prefixe'; +```js +const PREFIXE = 'prefixe'; class ClasseAvecNomDeChampCalcule { [`${PREFIXE}Champ`] = 'champ préfixé' @@ -134,11 +142,13 @@ class ClasseAvecNomDeChampCalcule { const instance = new ClasseAvecNomDeChampCalcule() console.log(instance.prefixeChamp) -// affichage attendu : "champ préfixé"</pre> +// affichage attendu : "champ préfixé" +``` -<p>Lors de l'initialisation des champs, <code>this</code> fait référence à l'instance en cours de construction. Tout comme dans les méthodes d'instance publiques, si vous êtes dans une sous-classe, vous pouvez accéder au prototype de la superclasse en utilisant <code>super</code>.</p> +Lors de l'initialisation des champs, `this` fait référence à l'instance en cours de construction. Tout comme dans les méthodes d'instance publiques, si vous êtes dans une sous-classe, vous pouvez accéder au prototype de la superclasse en utilisant `super`. -<pre class="brush: js notranslate">class ClasseAvecChampDInstance { +```js +class ClasseAvecChampDInstance { champDInstanceDeBase = 'champ de base' autreChampDInstanceDeBase = this.champDInstanceDeBase methodeDInstanceDeBase() { return 'affichage de la méthode de base' } @@ -155,30 +165,34 @@ console.log(base.autreChampDInstanceDeBase) // affichage attendu : "champ de base" console.log(sous.sousChampDInstance) -// affichage attendu : "affichage de la méthode de base"</pre> +// affichage attendu : "affichage de la méthode de base" +``` -<h3 id="Méthodes_publiques">Méthodes publiques</h3> +### Méthodes publiques -<h4 id="Méthodes_statiques_publiques">Méthodes statiques publiques</h4> +#### Méthodes statiques publiques -<p>Le mot-clé <code><strong>static</strong></code> définit une méthode statique pour une classe. Les méthodes statiques ne sont pas appelées dans les instances de la classe. A la place, elles le sont dans la classe elle-même. Ce sont souvent des méthodes utilitaires, comme des fonctions pour créer ou cloner des objets.</p> +Le mot-clé **`static`** définit une méthode statique pour une classe. Les méthodes statiques ne sont pas appelées dans les instances de la classe. A la place, elles le sont dans la classe elle-même. Ce sont souvent des méthodes utilitaires, comme des fonctions pour créer ou cloner des objets. -<pre class="brush: js notranslate">class ClasseAvecMethodeStatique { +```js +class ClasseAvecMethodeStatique { static methodeStatique() { return 'la méthode statique a été appelée.'; } } console.log(ClasseAvecMethodeStatique.methodeStatique()); -// affichage attendu : "la méthode statique a été appelée."</pre> +// affichage attendu : "la méthode statique a été appelée." +``` -<p>Les méthodes statiques sont ajoutées au constructeur de la classe grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} au moment de l'évaluation de la classe. Ces méthodes peuvent être écrites, ne sont pas énumérables et sont configurables.</p> +Les méthodes statiques sont ajoutées au constructeur de la classe grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} au moment de l'évaluation de la classe. Ces méthodes peuvent être écrites, ne sont pas énumérables et sont configurables. -<h4 id="Méthodes_dinstance_publiques">Méthodes d'instance publiques</h4> +#### Méthodes d'instance publiques -<p>Comme leur nom l'implique, les méthodes d'instance publiques sont des fonctions disponibles dans les instances de la classe.</p> +Comme leur nom l'implique, les méthodes d'instance publiques sont des fonctions disponibles dans les instances de la classe. -<pre class="brush: js notranslate">class ClasseAvecMethodeDInstancePublique { +```js +class ClasseAvecMethodeDInstancePublique { methodePublique() { return 'hello world' } @@ -186,21 +200,25 @@ console.log(ClasseAvecMethodeStatique.methodeStatique()); const instance = new ClasseAvecMethodeDInstancePublique() console.log(instance.methodePublique()) -// affichage attendu : "hello world"</pre> +// affichage attendu : "hello world" +``` -<p>Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables.</p> +Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables. -<p>Vous pouvez utiliser des fonctions génératrices, asynchrones et génératrices asynchrones.</p> +Vous pouvez utiliser des fonctions génératrices, asynchrones et génératrices asynchrones. -<pre class="brush: js notranslate">class ClasseAvecMethodesFantaisie { +```js +class ClasseAvecMethodesFantaisie { *methodeGeneratrice() { } async methodeAsynchrone() { } async *methodeGeneratriceAsynchrone() { } -}</pre> +} +``` -<p>A l'intérieur des méthodes d'instance, <code>this</code> fait référence à l'instance elle-même. Dans les sous-classes, <code>super</code> vous donne accès au prototype de la superclasse, ce qui vous permet d'appeler les méthodes de la superclasse.</p> +A l'intérieur des méthodes d'instance, `this` fait référence à l'instance elle-même. Dans les sous-classes, `super` vous donne accès au prototype de la superclasse, ce qui vous permet d'appeler les méthodes de la superclasse. -<pre class="brush: js notranslate">class ClasseDeBase { +```js +class ClasseDeBase { msg = 'hello world' methodePubliqueDeBase() { return this.msg @@ -216,11 +234,12 @@ class SousClasse extends ClasseDeBase { const instance = new SousClasse() console.log(instance.sousMethodePublique()) // affichage attendu : "hello world" -</pre> +``` -<p>Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/get">get</a> et <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/set">set</a> pour déclarer un accesseur ou un mutateur publique d'une instance.</p> +Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe [get](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/get) et [set](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/set) pour déclarer un accesseur ou un mutateur publique d'une instance. -<pre class="brush: js notranslate">class ClasseAvecGetSet { +```js +class ClasseAvecGetSet { #msg = 'hello world' get msg() { return this.#msg @@ -237,29 +256,18 @@ console.log(instance.msg); instance.msg = 'gâteau'; console.log(instance.msg); // affichage attendu : "hello gâteau" -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td> - </tr> - </tbody> -</table> +| Spécification | +| ---------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.classes.public_class_fields")}}</p> +{{Compat("javascript.classes.public_class_fields")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> -</ul> +- [The Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html) diff --git a/files/fr/web/javascript/reference/classes/static/index.md b/files/fr/web/javascript/reference/classes/static/index.md index f93abc7411..f08b2b5a94 100644 --- a/files/fr/web/javascript/reference/classes/static/index.md +++ b/files/fr/web/javascript/reference/classes/static/index.md @@ -8,33 +8,32 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Classes/static --- -<div>{{jsSidebar("Classes")}}</div> +{{jsSidebar("Classes")}} -<p>Le mot-clé <code><strong>static</strong></code> permet de définir une méthode statique d'une classe. Les méthodes statiques ne sont pas disponibles sur les instances d'une classe mais sont appelées sur la classe elle-même. Les méthodes statiques sont généralement des fonctions utilitaires (qui peuvent permettre de créer ou de cloner des objets par exemple).</p> +Le mot-clé **`static`** permet de définir une méthode statique d'une classe. Les méthodes statiques ne sont pas disponibles sur les instances d'une classe mais sont appelées sur la classe elle-même. Les méthodes statiques sont généralement des fonctions utilitaires (qui peuvent permettre de créer ou de cloner des objets par exemple). -<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div> +{{EmbedInteractiveExample("pages/js/classes-static.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">static <em>nomMéthode()</em> { ... }</pre> + static nomMéthode() { ... } -<h2 id="Description">Description</h2> +## Description -<p>Les méthodes statiques sont utilisées lorsque la méthode ne s'applique qu'à la classe elle-même et pas à ses instances. Les méthodes statiques sont généralement utilisées pour créer des fonctions utilitaires.</p> +Les méthodes statiques sont utilisées lorsque la méthode ne s'applique qu'à la classe elle-même et pas à ses instances. Les méthodes statiques sont généralement utilisées pour créer des fonctions utilitaires. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_classique">Exemple classique</h3> +### Exemple classique -<p>Dans l'exemple qui suit, on illustre :</p> +Dans l'exemple qui suit, on illustre : -<ul> - <li>comment une classe implémente une méthode statique</li> - <li>comment une classe avec une propriété statique peut être déclinée avec une sous-classe</li> - <li>comment une méthode statique peut ou ne peut pas être appelé</li> -</ul> +- comment une classe implémente une méthode statique +- comment une classe avec une propriété statique peut être déclinée avec une sous-classe +- comment une méthode statique peut ou ne peut pas être appelé -<pre class="brush: js">class Triple { +```js +class Triple { static triple(n) { if (n === undefined) { n = 1; @@ -55,13 +54,14 @@ console.log(SuperTriple.triple(4)); // 144 var tp = new Triple(); console.log(SuperTriple.triple(4)); // 144 (pas d'impact de l'affectation du parent) console.log(tp.triple()); // tp.triple n'est pas une fonction -</pre> +``` -<h3 id="Utilisation_depuis_une_autre_méthode_statique">Utilisation depuis une autre méthode statique</h3> +### Utilisation depuis une autre méthode statique -<p>Afin d'appeler une autre méthode statique dans une méthode statique, on pourra utiliser {{jsxref("Opérateurs/L_opérateur_this","this")}}.</p> +Afin d'appeler une autre méthode statique dans une méthode statique, on pourra utiliser {{jsxref("Opérateurs/L_opérateur_this","this")}}. -<pre class="brush: js">class StaticMethodCall { +```js +class StaticMethodCall { static staticMethod() { return 'Méthode statique appelée'; } @@ -72,13 +72,15 @@ console.log(tp.triple()); // tp.triple n'est pas une fonction StaticMethodCall.staticMethod(); // 'Méthode statique appelée' StaticMethodCall.anotherStaticMethod(); -// 'Méthode statique appelée depuis une autre statique'</pre> +// 'Méthode statique appelée depuis une autre statique' +``` -<h3 id="Depuis_les_constructeurs_de_classes_et_les_autres_méthodes">Depuis les constructeurs de classes et les autres méthodes</h3> +### Depuis les constructeurs de classes et les autres méthodes -<p>Les méthodes statiques ne sont pas directement accessibles via le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>. Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique <code>NomDeClasse.MéthodeStatique()</code> (comme pour les autres appels en dehors de la classe) ou avec la propriété <code>constructor</code> : <code>this.constructor.MéthodeStatique()</code>.</p> +Les méthodes statiques ne sont pas directement accessibles via le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique `NomDeClasse.MéthodeStatique()` (comme pour les autres appels en dehors de la classe) ou avec la propriété `constructor` : `this.constructor.MéthodeStatique()`. -<pre class="brush: js">class StaticMethodCall{ +```js +class StaticMethodCall{ constructor(){ console.log(StaticMethodCall.staticMethod()); // 'appel de la méthode statique' @@ -90,38 +92,22 @@ StaticMethodCall.anotherStaticMethod(); static staticMethod(){ return 'appel de la méthode statique.'; } -}</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('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.classes.static")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/class">Expression <code>class</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Déclaration <code>class</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> -</ul> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.classes.static")}} + +## Voir aussi + +- [Expression `class`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/class) +- [Déclaration `class`](/fr/docs/Web/JavaScript/Reference/Instructions/class) +- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes) |