diff options
Diffstat (limited to 'files/fr/web/javascript/reference/classes/extends')
| -rw-r--r-- | files/fr/web/javascript/reference/classes/extends/index.md | 101 |
1 files changed, 43 insertions, 58 deletions
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) |