diff options
Diffstat (limited to 'files/fr/web/javascript/reference/operators/class')
| -rw-r--r-- | files/fr/web/javascript/reference/operators/class/index.md | 103 |
1 files changed, 40 insertions, 63 deletions
diff --git a/files/fr/web/javascript/reference/operators/class/index.md b/files/fr/web/javascript/reference/operators/class/index.md index 0b9f789d4c..bb3c259708 100644 --- a/files/fr/web/javascript/reference/operators/class/index.md +++ b/files/fr/web/javascript/reference/operators/class/index.md @@ -9,31 +9,32 @@ tags: translation_of: Web/JavaScript/Reference/Operators/class original_slug: Web/JavaScript/Reference/Opérateurs/class --- -<div>{{JSSidebar("Operators")}}</div> +{{JSSidebar("Operators")}} -<p>Une <strong>expression de classe</strong> est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expressions de fonctions</a>, les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.</p> +Une **expression de classe** est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux [expressions de fonctions](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function), les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes. -<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div> +{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var MaClasse = class [nomClasse] [extends] { - // corps de la classe -};</pre> + var MaClasse = class [nomClasse] [extends] { + // corps de la classe + }; -<h2 id="Description">Description</h2> +## Description -<p>Une expression de classe utilise une syntaxe similaire à celle d'une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">instruction de classe</a>. En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours <code>"function"</code>.</p> +Une expression de classe utilise une syntaxe similaire à celle d'une [instruction de classe](/fr/docs/Web/JavaScript/Reference/Instructions/class). En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours `"function"`. -<p>Le corps d'une classe sera exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (pour les instructions et les expressions de classe).</p> +Le corps d'une classe sera exécuté en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) (pour les instructions et les expressions de classe). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Une_expression_simple">Une expression simple</h3> +### Une expression simple -<p>Ici, on utilise une expression de classe anonyme qu'on lie à la variable <code>Toto</code>.</p> +Ici, on utilise une expression de classe anonyme qu'on lie à la variable `Toto`. -<pre class="brush: js">var Toto = class { +```js +var Toto = class { constructor() {} truc() { return "Coucou monde !"; @@ -43,13 +44,14 @@ original_slug: Web/JavaScript/Reference/Opérateurs/class var instance = new Toto(); instance.truc(); // "Coucou monde !" Toto.name; // "Toto" -</pre> +``` -<h3 id="Des_expressions_nommées">Des expressions nommées</h3> +### Des expressions nommées -<p>Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.</p> +Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe. -<pre class="brush: js">// TBD +```js +// TBD var Toto = class TotoNommé { constructor() {} quiEstLa() { @@ -61,48 +63,23 @@ var truc = new Toto; truc.quiEstLa(); // "TotoNommmé" TotoNommé.name; // ReferenceError Toto.name; // "TotoNommé" -</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.operators.class")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">Les expressions <code>function</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Les 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('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.operators.class")}} + +## Voir aussi + +- [Les expressions `function`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function) +- [Les déclaration `class`](/fr/docs/Web/JavaScript/Reference/Instructions/class) +- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes) |