aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/javascript/reference/objets_globaux/object/create/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/javascript/reference/objets_globaux/object/create/index.html')
-rw-r--r--files/fr/web/javascript/reference/objets_globaux/object/create/index.html304
1 files changed, 304 insertions, 0 deletions
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/create/index.html b/files/fr/web/javascript/reference/objets_globaux/object/create/index.html
new file mode 100644
index 0000000000..67a36a268a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/create/index.html
@@ -0,0 +1,304 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/create
+tags:
+ - ECMAScript 5
+ - JavaScript
+ - Méthode
+ - Object
+ - Reference
+ - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.create()</strong></code> crée un nouvel objet avec un prototype donné et des propriétés données.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-create.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.create(<var>proto</var>)
+Object.create(proto, <em>objetP</em><var>ropriétés</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>proto</code></dt>
+ <dd>L'objet qui sera le prototype du nouvel objet créé.</dd>
+ <dt><code>objetPropriétés</code></dt>
+ <dd>Paramètre optionnel. S'il est fourni et qu'il ne vaut pas {{jsxref("undefined")}}, il sera utilisé comme un objet dont les propriétés propres (celles qui ne sont pas héritées par la chaîne de prototypes) et énumérables définiront des descripteurs pour les propriétés à ajouter au nouvel objet, avec les mêmes noms. Ces propriétés correspondent au deuxième argument de {{jsxref("Object.defineProperties()")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet qui dispose du prototype et des propriétés indiquées.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre <code>objetPropriétés</code> vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="L'héritage_classique_avec_Object.create()">L'héritage classique avec <code>Object.create()</code></h3>
+
+<p>Dans l'exemple ci-dessous, on utilise <code>Object.create()</code> afin de réaliser un héritage de classe. Ce modèle ne supporte que l'héritage unique (un objet hérite directement uniquement d'un autre objet) car JavaScript ne gère pas l'héritage multiple.</p>
+
+<pre class="brush: js">// Forme, la classe parente
+function Forme() {
+ this.x = 0;
+ this.y = 0;
+}
+
+// Méthode de la classe parente
+Forme.prototype.déplacer = function(x, y) {
+ this.x += x;
+ this.y += y;
+ console.info('Forme déplacée.');
+};
+
+// Rectangle - classe fille
+function Rectangle() {
+ // on appelle le constructeur parent
+ Forme.call(this);
+}
+
+// La classe fille surcharge la classe parente
+Rectangle.prototype = Object.create(Forme.prototype);
+
+// Si on ne définit pas le constructeur avec Rectangle, il récupèrera le constructeur
+// Forme (le parent).
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('instance de Rectangle ? ', (rect instanceof Rectangle));
+// true
+console.log('une instance de Forme ? ', (rect instanceof Forme));
+ // true
+rect.déplacer(1, 1);
+// Affiche 'Forme déplacée.'
+</pre>
+
+<p>Si on souhaite hériter de plusieurs objets, on peut utiliser des <em>mixins</em>.</p>
+
+<pre class="brush: js">function MaClasse() {
+ ClasseParente1.call(this);
+ ClasseParente2.call(this);
+}
+
+MaClasse.prototype = Object.create(ClasseParente1.prototype); // héritage d'une classe
+Object.assign(MaClasse.prototype, ClasseParente2.prototype); // mixin pour une autre
+MaClasse.prototype.constructor = MaClasse; // On réaffecte le constructeur
+
+MaClasse.prototype.maMéthode = function() {
+ // faire quelque chose
+};
+</pre>
+
+<p>Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (<code>ClassParente2</code>) sur le prototype de la classe fille (<code>MaClasse</code>), les rendant disponibles pour toutes les instances de <code>MaClasse</code>. <code>Object.assign()</code> a été introduit avec ES2015 et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign#Prothèse_d'émulation_(polyfill)">une prothèse d'émulation (polyfill)</a> est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> ou <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code> (Lodash) peuvent être utilisées.</p>
+
+<h3 id="Utiliser_l'argument_objetPropriétés_avec_Object.create()">Utiliser l'argument <code>objetPropriétés</code> avec <code>Object.create()</code></h3>
+
+<pre class="brush: js">var o;
+
+// on crée un objet avec null
+// comme prototype
+o = Object.create(null);
+
+
+o = {};
+// est équivalent à :
+o = Object.create(Object.prototype);
+
+
+// Exemple où on crée un objet avec quelques propriétés
+// (On voit ici que le second paramètres fait correspondre les clés
+// avec des descripteurs de propriétés.)
+o = Object.create(Object.prototype, {
+ // toto est une propriété de donnée
+ toto: { writable: true, configurable: true, value: 'hello' },
+ // truc est une propriété d'accesseur/mutateur
+ truc: {
+ configurable: false,
+ get: function() { return 10; },
+ set: function(value) { console.log('Définir `o.truc` à', value); }
+/* avec les accesseurs ES2015 on aura :
+ get() { return 10; },
+ set(value) { console.log('Définir `o.truc` à', value); } */
+ }
+});
+
+
+function Constructeur() {}
+o = new Constructeur();
+// est équivalent à :
+o = Object.create(Constructeur.prototype);
+// Bien entendu, si la fonction Constructeur
+// possède des instructions pour l'initialisation,
+// Object.create() ne pourra pas le reproduire
+
+
+// on crée un nouvel objet dont le prototype est
+// un nouvel objet vide et on y ajoute une propriété
+// 'p' qui vaut 42
+o = Object.create({}, { p: { value: 42 } });
+
+// par défaut, les propriétés ne sont PAS
+// écrivables, énumérables ou configurables
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+ console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// Pour définir une propriété selon ES3
+o2 = Object.create({}, {
+ p: {
+ value: 42,
+ writable: true,
+ enumerable: true,
+ configurable: true
+ }
+});
+
+// Équivalent à
+// o2 = Object.create({p: 42});
+</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('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES2015', '#sec-object.create', 'Object.create')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
+ <td>{{Spec2('ESDraft')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.create")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>Le billet de John Resig sur <code><a href="https://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></code> (en anglais)</li>
+</ul>
+
+<div id="SLO_balloon_obj" style="display: block;">
+<div class="SLO_ImTranslatorLogo" id="SLO_button" style="display: none; opacity: 1;"></div>
+
+<div id="SLO_shadow_translation_result2" style="display: none;"></div>
+
+<div id="SLO_shadow_translator" style="display: none; left: 63px; top: 0px; box-shadow: rgb(186, 185, 181) 0px 0px 0px;">
+<div id="SLO_planshet">
+<div id="SLO_arrow_up"></div>
+
+<div id="SLO_Bproviders">
+<div class="SLO_BL_LABLE_ON" id="SLO_P0" title="Google">G</div>
+
+<div class="SLO_BL_LABLE_ON" id="SLO_P1" title="Microsoft">M</div>
+
+<div class="SLO_BL_LABLE_ON" id="SLO_P2" title="Translator">T</div>
+</div>
+
+<div id="SLO_alert_bbl" style="display: none;">
+<div id="SLHKclose"></div>
+
+<div id="SLO_alert_cont"></div>
+</div>
+
+<div id="SLO_TB">
+<table id="SLO_tables">
+ <tbody>
+ <tr>
+ <td class="SLO_td"><input></td>
+ <td class="SLO_td"><select><option value="auto">Détecter la langue</option><option value="af">Afrikaans</option><option value="sq">Albanais</option><option value="de">Allemand</option><option value="am">Amharique</option><option value="en">Anglais</option><option value="ar">Arabe</option><option value="hy">Arménien</option><option value="az">Azéri</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Biélorusse</option><option value="my">Birman</option><option value="bs">Bosniaque</option><option value="bg">Bulgare</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinois Simp</option><option value="zh-TW">Chinois Trad</option><option value="si">Cingalais</option><option value="ko">Coréen</option><option value="co">Corse</option><option value="ht">Créole haïtien</option><option value="hr">Croate</option><option value="da">Danois</option><option value="es">Espagnol</option><option value="eo">Espéranto</option><option value="et">Estonien</option><option value="fi">Finnois</option><option value="fr">Français</option><option value="fy">Frison</option><option value="gd">Gaélique Écosse</option><option value="gl">Galicien</option><option value="cy">Gallois</option><option value="ka">Géorgien</option><option value="el">Grec</option><option value="gu">Gudjarati</option><option value="ha">Haoussa</option><option value="haw">Hawaïen</option><option value="iw">Hébreu</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hongrois</option><option value="ig">Igbo</option><option value="id">Indonésien</option><option value="ga">Irlandais</option><option value="is">Islandais</option><option value="it">Italien</option><option value="ja">Japonais</option><option value="jw">Javanais</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ky">Kirghiz</option><option value="ku">Kurde</option><option value="lo">Laotien</option><option value="la">Latin</option><option value="lv">Letton</option><option value="lt">Lituanien</option><option value="lb">Luxembourgeois</option><option value="mk">Macédonien</option><option value="ms">Malaisien</option><option value="ml">Malayalam</option><option value="mg">Malgache</option><option value="mt">Maltais</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="nl">Néerlandais</option><option value="ne">Népalais</option><option value="no">Norvégien</option><option value="uz">Ouzbek</option><option value="ps">Pachtô</option><option value="pa">Panjabi</option><option value="fa">Persan</option><option value="pl">Polonais</option><option value="pt">Portugais</option><option value="ro">Roumain</option><option value="ru">Russe</option><option value="sm">Samoan</option><option value="sr">Serbe</option><option value="st">Sesotho</option><option value="sn">Shona</option><option value="sd">Sindhî</option><option value="sk">Slovaque</option><option value="sl">Slovène</option><option value="so">Somali</option><option value="su">Soudanais</option><option value="sv">Suédois</option><option value="sw">Swahili</option><option value="tg">Tadjik</option><option value="tl">Tagalog</option><option value="ta">Tamoul</option><option value="cs">Tchèque</option><option value="te">Telugu</option><option value="th">Thaï</option><option value="tr">Turc</option><option value="uk">Ukrainien</option><option value="ur">Urdu</option><option value="vi">Vietnamien</option><option value="xh">Xhosa</option><option value="yi">Yiddish</option><option value="yo">Yorouba</option><option value="zu">Zoulou</option></select></td>
+ <td class="SLO_td">
+ <div id="SLO_switch_b" title="Inverser les langues"></div>
+ </td>
+ <td class="SLO_td"><select><option value="af">Afrikaans</option><option value="sq">Albanais</option><option value="de">Allemand</option><option value="am">Amharique</option><option value="en">Anglais</option><option value="ar">Arabe</option><option value="hy">Arménien</option><option value="az">Azéri</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Biélorusse</option><option value="my">Birman</option><option value="bs">Bosniaque</option><option value="bg">Bulgare</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinois Simp</option><option value="zh-TW">Chinois Trad</option><option value="si">Cingalais</option><option value="ko">Coréen</option><option value="co">Corse</option><option value="ht">Créole haïtien</option><option value="hr">Croate</option><option value="da">Danois</option><option selected value="es">Espagnol</option><option value="eo">Espéranto</option><option value="et">Estonien</option><option value="fi">Finnois</option><option value="fr">Français</option><option value="fy">Frison</option><option value="gd">Gaélique Écosse</option><option value="gl">Galicien</option><option value="cy">Gallois</option><option value="ka">Géorgien</option><option value="el">Grec</option><option value="gu">Gudjarati</option><option value="ha">Haoussa</option><option value="haw">Hawaïen</option><option value="iw">Hébreu</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hongrois</option><option value="ig">Igbo</option><option value="id">Indonésien</option><option value="ga">Irlandais</option><option value="is">Islandais</option><option value="it">Italien</option><option value="ja">Japonais</option><option value="jw">Javanais</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ky">Kirghiz</option><option value="ku">Kurde</option><option value="lo">Laotien</option><option value="la">Latin</option><option value="lv">Letton</option><option value="lt">Lituanien</option><option value="lb">Luxembourgeois</option><option value="mk">Macédonien</option><option value="ms">Malaisien</option><option value="ml">Malayalam</option><option value="mg">Malgache</option><option value="mt">Maltais</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="nl">Néerlandais</option><option value="ne">Népalais</option><option value="no">Norvégien</option><option value="uz">Ouzbek</option><option value="ps">Pachtô</option><option value="pa">Panjabi</option><option value="fa">Persan</option><option value="pl">Polonais</option><option value="pt">Portugais</option><option value="ro">Roumain</option><option value="ru">Russe</option><option value="sm">Samoan</option><option value="sr">Serbe</option><option value="st">Sesotho</option><option value="sn">Shona</option><option value="sd">Sindhî</option><option value="sk">Slovaque</option><option value="sl">Slovène</option><option value="so">Somali</option><option value="su">Soudanais</option><option value="sv">Suédois</option><option value="sw">Swahili</option><option value="tg">Tadjik</option><option value="tl">Tagalog</option><option value="ta">Tamoul</option><option value="cs">Tchèque</option><option value="te">Telugu</option><option value="th">Thaï</option><option value="tr">Turc</option><option value="uk">Ukrainien</option><option value="ur">Urdu</option><option value="vi">Vietnamien</option><option value="xh">Xhosa</option><option value="yi">Yiddish</option><option value="yo">Yorouba</option><option value="zu">Zoulou</option></select></td>
+ <td class="SLO_td"></td>
+ <td class="SLO_td">
+ <div id="SLO_TTS_voice" title="Anglais"></div>
+ </td>
+ <td class="SLO_td">
+ <div class="SLO_copy" id="SLO_copy" title="Copier"></div>
+ </td>
+ <td class="SLO_td">
+ <div id="SLO_bbl_font_patch"></div>
+
+ <div class="SLO_bbl_font" id="SLO_bbl_font" title="Taille de police"></div>
+ </td>
+ <td class="SLO_td">
+ <div id="SLO_bbl_help" title="Aide"></div>
+ </td>
+ <td class="SLO_td">
+ <div class="SLO_pin_off" id="SLO_pin" title="Fixer la fenêtre pop-up"></div>
+ </td>
+ </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SLO_shadow_translation_result"></div>
+
+<div class="SLO_loading" id="SLO_loading"></div>
+
+<div id="SLO_player2"></div>
+
+<div id="SLO_alert100">Fonction Sound est limitée à 200 caractères</div>
+
+<div id="SLO_Balloon_options" style="background: rgb(255, 255, 255);">
+<div id="SLO_arrow_down"></div>
+
+<table id="SLO_tbl_opt" style="width: 100%;">
+ <tbody>
+ <tr>
+ <td><input></td>
+ <td>
+ <div id="SLO_BBL_IMG" title="Afficher le bouton ImTranslator 3 secondes"></div>
+ </td>
+ <td><a class="SLO_options" title="Afficher les options">Options</a> : <a class="SLO_options" title="Historique des traductions">Historique</a> : <a class="SLO_options" title="Commentaires">Commentaires</a> : <a class="SLO_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faire une contribution">Donate</a></td>
+ <td><span id="SLO_Balloon_Close" title="Fermer">Fermer</span></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>