1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
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&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>
|
