diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
| commit | fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch) | |
| tree | 51b7edfc370236684a203f4e69ae67bb7d24b549 /files/fr/web/javascript/reference/classes/extends | |
| parent | 04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff) | |
| parent | eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff) | |
| download | translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2 translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip | |
Merge branch 'main' into 20210818-Glossary/Type
Diffstat (limited to 'files/fr/web/javascript/reference/classes/extends')
| -rw-r--r-- | files/fr/web/javascript/reference/classes/extends/index.html | 114 | ||||
| -rw-r--r-- | files/fr/web/javascript/reference/classes/extends/index.md | 99 |
2 files changed, 99 insertions, 114 deletions
diff --git a/files/fr/web/javascript/reference/classes/extends/index.html b/files/fr/web/javascript/reference/classes/extends/index.html deleted file mode 100644 index 8e3af50594..0000000000 --- a/files/fr/web/javascript/reference/classes/extends/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: extends -slug: Web/JavaScript/Reference/Classes/extends -tags: - - ECMAScript 2015 - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Classes/extends ---- -<div>{{jsSidebar("Classes")}}</div> - -<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> - - - -<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">class ClasseFille extends ClasseParente { ... } -</pre> - -<h2 id="Description">Description</h2> - -<p>Le mot-clé <code>extends</code> peut être utilisé pour créer des sous-classes de classes existantes (natives ou non).</p> - -<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> - -<h2 id="Exemples">Exemples</h2> - -<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 { - constructor(longueur) { - // On utilise le constructeur de la classe parente - // avec le mot-clé super - super(longueur, longueur); - // Pour les classes dérivées, super() doit être appelé avant de - // pouvoir utiliser 'this' sinon cela provoque une exception - // ReferenceError - this.nom = 'Carré'; - } - - get aire() { - return this.hauteur * this.largeur; - } - -}</pre> - -<h3 id="Utiliser_extends_avec_des_objets_natifs">Utiliser <code>extends</code> avec des objets natifs</h3> - -<p>Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour {{jsxref("Date")}} :</p> - -<pre class="brush: js">class maDate extends Date { - constructor() { - super(); - } - - getFormattedDate() { - 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> - -<h3 id="Étendre_null">Étendre <code>null</code></h3> - -<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> - -<pre class="brush: js">class extensionNull extends null { - constructor() {} -} - -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> diff --git a/files/fr/web/javascript/reference/classes/extends/index.md b/files/fr/web/javascript/reference/classes/extends/index.md new file mode 100644 index 0000000000..2dee751c38 --- /dev/null +++ b/files/fr/web/javascript/reference/classes/extends/index.md @@ -0,0 +1,99 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - ECMAScript 2015 + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Classes/extends +--- +{{jsSidebar("Classes")}} + +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 + + class ClasseFille extends ClasseParente { ... } + +## Description + +Le mot-clé `extends` peut être utilisé pour créer des sous-classes de classes existantes (natives ou non). + +La propriété `.prototype` d'une classe fille (aussi appelée une _extension_) doit être un {{jsxref("Object")}} ou {{jsxref("null")}}. + +## Exemples + +### Utiliser `extends` + +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` : + +```js +class Carré extends Polygone { + constructor(longueur) { + // On utilise le constructeur de la classe parente + // avec le mot-clé super + super(longueur, longueur); + // Pour les classes dérivées, super() doit être appelé avant de + // pouvoir utiliser 'this' sinon cela provoque une exception + // ReferenceError + this.nom = 'Carré'; + } + + get aire() { + return this.hauteur * this.largeur; + } + +} +``` + +### Utiliser `extends` avec des objets natifs + +Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour {{jsxref("Date")}} : + +```js +class maDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + 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(); + } +} +``` + +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). + +### Étendre `null` + +Étendre {{jsxref("null")}} se fait comme avec une classe normale sauf que l'objet prototype n'hérite pas de {{jsxref("Object.prototype")}}. + +```js +class extensionNull extends null { + constructor() {} +} + +Object.getPrototypeOf(extensionNull); // Function.prototype +Object.getPrototypeOf(extensionNull.prototype); // null + +new extensionNull(); // ReferenceError +``` + +## 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) |
