diff options
| -rw-r--r-- | files/fr/web/javascript/reference/classes/constructor/index.html | 202 |
1 files changed, 135 insertions, 67 deletions
diff --git a/files/fr/web/javascript/reference/classes/constructor/index.html b/files/fr/web/javascript/reference/classes/constructor/index.html index 0fd5c8941a..f488f06dc5 100644 --- a/files/fr/web/javascript/reference/classes/constructor/index.html +++ b/files/fr/web/javascript/reference/classes/constructor/index.html @@ -2,103 +2,171 @@ title: constructor slug: Web/JavaScript/Reference/Classes/constructor tags: + - Classes - ECMAScript 2015 - JavaScript - - Reference + - Language feature translation_of: Web/JavaScript/Reference/Classes/constructor +browser-compat: javascript.classes.constructor --- -<div>{{jsSidebar}}</div> +<div>{{jsSidebar("Classes")}}</div> -<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é {{jsxref("Opérateurs/class","class")}}.</p> +<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> <div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<h2 id="syntax">Syntaxe</h2> -<h2 id="Syntaxe">Syntaxe</h2> +<pre class="brush: js">constructor() { ... } +constructor(argument0) { ... } +constructor(argument0, argument1) { ... } +constructor(argument0, argument1, ... , argumentN) { ... }</pre> -<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre> +<h2 id="description">Description</h2> -<h2 id="Description">Description</h2> +<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> -<p>Il ne peut y avoir qu'une seule méthode utilisant le mot-clé <code>constructor</code> au sein d'une classe. Une exception {{jsxref("SyntaxError")}} sera levée si la classe contient plusieurs méthodes <code>constructor</code>.</p> +<pre class="brush: js">class Person { + constructor(name) { + this.name = name; + } + + introduce() { + console.log(`Hello, my name is ${this.name}`); + } +} + +const otto = new Person('Otto'); -<p>Le constructeur peut utiliser le mot-clé {{jsxref("Opérateurs/super","super")}} afin d'appeler le constructeur de la classe parente.</p> +otto.introduce();</pre> -<p>Si on ne définit pas une méthode <code>constructor</code>, un constructeur par défaut sera utilisé.</p> +<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> -<h2 id="Exemples">Exemples</h2> +<pre class="brush: js">constructor() {}</pre> -<h3 id="Utiliser_la_méthode_constructor">Utiliser la méthode <code>constructor</code></h3> +<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> -<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> :</p> +<pre class="brush: js">constructor(...args) { + super(...args); +}</pre> + +<p>Cela permet à un code comme celui-ci de fonctionner :</p> -<pre class="brush: js notranslate">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é'; +<pre class="brush: js">class ValidationError extends Error { + printCustomerMessage() { + return `La validation a échoué :-( (détails : ${this.message})`; } +} - get aire() { - return this.hauteur * this.largeur; +try { + throw new ValidationError("Numéro de téléphone invalide"); +} catch (error) { + if (error instanceof ValidationError) { + console.log(error.name); // Il s'agit d'une erreur au lieu de ValidationError ! + console.log(error.printCustomerMessage()); + } else { + console.log('Erreur inconnue', error); + throw error; } +}</pre> - set aire(valeur) { - this.aire = valeur; +<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> + +<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> + +<pre class="brush: js">class ValidationError extends Error { + constructor(message) { + super(message); // appelle le constructeur de la classe parent + this.name = 'ValidationError'; + this.code = '42'; + } + + printCustomerMessage() { + return `La validation a échoué :-( (détails : ${this.message}, code : ${this.code})`; + } +} + +try { + throw new ValidationError("Numéro de téléphone invalide"); +} catch (error) { + if (error instanceof ValidationError) { + console.log(error.name); // Maintenant, c'est une ValidationError ! + console.log(error.printCustomerMessage()); + } else { + console.log('Unknown error', error); + throw error; } }</pre> -<h3 id="Utiliser_un_constructeur_par_défaut">Utiliser un constructeur par défaut</h3> +<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> -<p>Si vous ne définissez pas de méthode <code>constructor</code>, un constructeur par défaut sera utilisé. Pour les classes de base, le constructeur par défaut sera :</p> +<h2 id="examples">Exemples</h2> -<pre class="brush: js notranslate">constructor() {}</pre> +<h3 id="using_the_constructor_method">Utilisation de la méthode du <code>constructor</code></h3> -<p>Pour les classes dérivées, le constructeur par défaut sera :</p> +<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> -<pre class="brush: js notranslate">constructor(...args) { - super(...args); +<pre class="brush: 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. + super(length, length); + // NOTE : Dans les classes dérivées, `super()` doit être appelé avant de pouvoir + // utiliser `this`. Si vous ne le faites pas, cela provoquera une ReferenceError. + this.name = 'Carré'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.height = value**0.5; + this.width = value**0.5; + } +}</pre> + +<h3 id="another_example">Un autre exemple</h3> + +<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> + +<pre class="brush: js">class Polygon { + constructor() { + this.name = "Polygone"; + } +} + +class Square extends Polygon { + constructor() { + super(); + } } -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-constructor', 'constructor')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("javascript.classes.constructor")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> + +class Rectangle {} + +Object.setPrototypeOf(Square.prototype, Rectangle.prototype); + +console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false +console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true + +let newInstance = new Square(); +console.log(newInstance.name); // Polygone</pre> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="see_also">Voir aussi</h2> <ul> - <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super()</a></code></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/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> + <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> |