diff options
Diffstat (limited to 'files/fr/web/javascript/reference/objets_globaux/object')
45 files changed, 6414 insertions, 0 deletions
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html b/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html new file mode 100644 index 0000000000..8fdbdde216 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html @@ -0,0 +1,219 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Objets_globaux/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.assign()</strong></code> est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. Cette méthode renvoie l'objet cible.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-assign.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.assign(<var>cible</var>, ...<var>sources</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>cible</code></dt> + <dd>L'objet cible.</dd> + <dt><code>sources</code></dt> + <dd>Le(s) objet(s) source(s).</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet cible, éventuellement modifié, est renvoyé.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>Object.assign</code> permet de ne copier que les propriétés énumérables et propres (les propriétés qui ne sont pas héritées) depuis un objet source vers un objet cible. Elle utilise <code>[[Get]]</code> sur l'objet source et <code>[[Set]]</code> sur l'objet cible, ainsi, elle déclenchera les accesseurs/mutateurs. De cette façon, elle <em>affecte</em> les propriétés plutôt que de juste les copier ou d'en définir de nouvelles. Aussi, il est déconseillé d'utiliser cette méthode si on souhaite uniquement fusionner de nouvelles propriétés dans un prototype si un des objets sources contient des accesseurs. Pour uniquement copier les définitions des propriétés (y compris leur énumérabilité) dans des prototypes, on utilisera plutôt {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.defineProperty()")}}.</p> + +<p>Les propriétés {{jsxref("String")}} et {{jsxref("Symbol")}} sont copiées. Les propriétés de l'objet cible sont surchargées par celles de l'objet source si elles ont la même clé.</p> + +<p>En cas d'erreur, si une propriété n'est pas accessible en écriture par exemple, une exception {{jsxref("TypeError")}} sera levée mais l'objet cible aura été modifié avec les propriétés ajoutées avant l'erreur.</p> + +<p><code>Object.assign</code> ne donnera pas d'erreur si on fournit les valeurs {{jsxref("null")}} ou {{jsxref("undefined")}} pour la valeur source.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Cloner_un_objet">Cloner un objet</h3> + +<pre class="brush: js">var obj = { a: 1 }; +var copie = Object.assign({}, obj); +console.log(copie); // {a: 1}</pre> + +<div class="note"> +<p><strong>Note :</strong> Attention, pour un clone réel (<em>deep clone</em>), il faudra utiliser d'autres méthodes car <code>Object.assign()</code> ne copie que les valeurs des propriétés depuis l'objet source, il ne recopie pas intégralement une nouvelle propriété. Si la valeur est une référence à un objet, il copiera uniquement la référence.</p> +</div> + +<h3 id="Fusionner_des_objets">Fusionner des objets</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { b: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, l'objet cible est aussi modifié +</pre> + +<h3 id="Fusionner_des_objets_partageant_des_propriétés">Fusionner des objets partageant des propriétés</h3> + +<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 }; +var o2 = { b: 2, c: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +</pre> + +<p>Les propriétés communes sont surchargées selon l'ordre des paramètres.</p> + +<h3 id="Copier_des_propriétés_symboliques">Copier des propriétés symboliques</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { [Symbol('toto')]: 2 }; + +var obj = Object.assign({}, o1, o2); +console.log(obj); // { a: 1, [Symbol("toto")]: 2 } +// Attention : dans Firefox le symbole n'est pas affiché +// en raison du bug 1207182 +console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(toto)] +</pre> + +<h3 id="Les_propriétés_héritées_et_les_propriétés_non-énumérables_ne_peuvent_être_copiées">Les propriétés héritées et les propriétés non-énumérables ne peuvent être copiées</h3> + +<pre class="brush: js">var obj = Object.create({ toto: 1 }, { // toto est héritée + truc: { + value: 2 // truc est non-enumerable (par défaut) + }, + bidule: { + value: 3, + enumerable: true // bidule est une propriété propre et énumérable + } +}); + +var copie = Object.assign({}, obj); +console.log(copie); // { bidule: 3 } +</pre> + +<h3 id="Les_types_primitifs_seront_passés_en_objets">Les types primitifs seront passés en objets</h3> + +<pre class="brush: js">var v1 = 'abc'; +var v2 = true; +var v3 = 10; +var v4 = Symbol('toto') + +var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// Les valeurs primitives seront converties, null et undefined seront ignorés. +// Note : seules les chaînes peuvent avoir des propriétés énumérables. +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +</pre> + +<h3 id="Les_exceptions_interrompent_la_copie">Les exceptions interrompent la copie</h3> + +<pre class="brush: js">var target = Object.defineProperty({}, 'toto', { + value: 1, + writable: false +}); // target.toto est en lecture seule + +Object.assign(target, { truc: 2 }, { toto2: 3, toto: 3, toto3: 3 }, { bidule: 4 }); +// TypeError: "toto" est en lecture seule +// L'exception est levée lorsqu'on affecte target.toto + +console.log(target.truc); // 2, le premier objet source est bien copié +console.log(target.toto2); // 3, la première propriété du deuxième objet source est bien copiée +console.log(target.toto); // 1, on a une exception ici +console.log(target.toto3); // undefined, assign est terminé toto3 ne sera pas copié +console.log(target.bidule);// undefined, le troisième objet source ne sera pas copié non plus. +</pre> + +<h3 id="Copier_des_accesseurs">Copier des accesseurs</h3> + +<pre class="brush: js">var obj = { + toto: 1, + get truc() { + return 2; + } +}; + +var copie = Object.assign({}, obj); +console.log(copie); +// { toto: 1, truc: 2 }, la valeur de copie.truc +// est la valeur renvoyée par l'accesseur d'obj.truc. + +// Voici une fonction qui copie les descripteurs +// dans leur intégralité +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + // Par défaut, Object.assign copie également + // les symboles énumérables + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +var copie = completeAssign({}, obj); +console.log(copie); +// { toto:1, get truc() { return 2 } }</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</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.assign")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Le caractère énumérable des propriétés</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition#Utiliser_la_décomposition_avec_les_littéraux_objet">La décomposition des littéraux objets</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html b/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html new file mode 100644 index 0000000000..4630ec0f1e --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html @@ -0,0 +1,233 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Objets_globaux/Object/constructor +tags: + - JavaScript + - Object + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>constructor</strong></code> renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme <code>1</code>, <code>true</code> et <code>"test"</code>.</p> + +<h2 id="Description">Description</h2> + +<p>Tous les objets héritent d'une propriété <code>constructor</code> de leur prototype (à l'exception de ceux créés avec <code>Object.create(null)</code>). Les objets créés sans constructeur (c'est-à-dire avec des littéraux) auront le constructeur correspondant au type du littéral :</p> + +<pre class="brush:js">var o = {}; +o.constructor === Object; // true + +var a = []; +a.constructor === Array; // true + +var n = new Number(3) +n.constructor === Number; // true</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Afficher_le_constructeur_d'un_objet">Afficher le constructeur d'un objet</h3> + +<p>L'exemple ci-dessous crée un constructeur <code>Arbre</code>, et un objet de ce type, <code>monArbre</code>. Le script affiche ensuite la propriété <code>constructor</code> de l'objet <code>monArbre</code> :</p> + +<pre class="brush:js">function Arbre(nom) { + this.nom = nom; +} + +var monArbre = new Arbre("Sequoia"); +console.log( "monArbre.constructor vaut " + monArbre.constructor );</pre> + +<p>Cet exemple produira le résultat suivant :</p> + +<pre class="brush:js">monArbre.constructor vaut function Arbre(nom) { + this.nom = nom; +}</pre> + +<h3 id="Modifier_le_constructeur_d'un_objet">Modifier le constructeur d'un objet</h3> + +<p>Dans l'exemple suivant, on illustre comment modifier la valeur d'un constructeur pour les objets génériques. Dans l'exemple suivant, seules les valeurs <code>true</code>, <code>1</code> et <code>"test"</code> ne seront pas affectées car leurs constructeurs sont en lecture seule uniquement. Cet exemple montre qu'il ne faut pas se reposer de façon aveugle sur la propriété <code>constructor</code> d'un objet.</p> + +<pre class="brush:js">function Type () {} + +var types = [ + new Array(), + [], + new Boolean(), + true, // restera tel quel + new Date(), + new Error(), + new Function(), + function () {}, + Math, + new Number(), + 1, // restera tel quel + new Object(), + {}, + new RegExp(), + /(?:)/, + new String(), + 'test' // restera tel quel +]; + +for (var i = 0; i < types.length; i++) { + types[i].constructor = Type; + types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()]; +} + +console.log(types.join('\n')); +</pre> + +<p>L'exemple produira le résultat suivant :</p> + +<pre class="brush: js">function Type() {},false, +function Type() {},false, +function Type() {},false,false +function Boolean() { + [native code] +},false,true +function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600 +function Type() {},false,Error +function Type() {},false,function anonymous() { + +} +function Type() {},false,function () {} +function Type() {},false,[object Math] +function Type() {},false,0 +function Number() { + [native code] +},false,1 +function Type() {},false,[object Object] +function Type() {},false,[object Object] +function Type() {},false,/(?:)/ +function Type() {},false,/(?:)/ +function Type() {},false, +function String() { + [native code] +},false,test +</pre> + +<h3 id="Modifier_le_constructeur_d'une_fonction">Modifier le constructeur d'une fonction</h3> + +<p>La plupart du temps, cette propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec <code><strong>new</strong></code> et en « attachant » la chaîne de prototypes.</p> + +<pre class="brush: js">function Parent() {} +Parent.prototype.parentMethod = function parentMethod() {}; + +function Child() {} +// on redefinit le prototype de child afin qu'il pointe vers celui de Parent +Child.prototype = Object.create(Parent.prototype); + +Child.prototype.constructor = Child; // on renvoie le constructeur original Child</pre> + +<p>Pourquoi faut-il écrire cette dernière ligne ? Eh bien, ça dépend.</p> + +<p>Essayons de définir les cas où il est nécessaire de réaffecter le constructeur original et les cas où c'est superflu.</p> + +<p>Imaginons que l'objet possède une méthode <code>create()</code> qui lui permette de créer un autre exemplaire :</p> + +<pre class="brush: js">function Parent() {}; +function CreatedConstructor() {} + +CreatedConstructor.prototype = Object.create(Parent.prototype); + +CreatedConstructor.prototype.create = function create() { + return new this.constructor(); +} + +new CreatedConstructor().create().create(); +// error undefined is not a function car constructor === Parent</pre> + +<p>Dans l'exemple précédent, on a une exception car le constructeur pointe vers <code>Parent</code>.</p> + +<p>Pour éviter cet écueil, il suffit d'affecter le bon constructeur (celui qui sera utilisé ensuite) :</p> + +<pre class="brush: js">function Parent() {}; +function CreatedConstructor() {} + +CreatedConstructor.prototype = Object.create(Parent.prototype); +// On réaffecte le bon constructeur afin de l'utiliser plus loin +CreatedConstructor.prototype.constructor = CreatedConstructor; + +CreatedConstructor.prototype.create = function create() { + return new this.constructor(); +} + +new CreatedConstructor().create().create(); +// pas d'exception cette fois-ci</pre> + +<p>Prenons un autre exemple :</p> + +<pre class="brush: js">function ParentWithStatic() {} + +ParentWithStatic.startPosition = { x: 0, y:0 }; +ParentWithStatic.getStartPosition = function getStartPosition() { + return this.startPosition; +} + +function Child(x, y) { + this.position = { + x: x, + y: y + }; +} + +Child.prototype = Object.create(ParentWithStatic.prototype); +Child.prototype.constructor = Child; + +Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() { + var position = this.position; + var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, since the constructor is Child + + return { + offsetX: startPosition.x - position.x, + offsetY: startPosition.y - position.y + } +};</pre> + +<p>Ici, il faudra conserverr le constructeur parent si on veut que le code fonctionne correctement.</p> + +<p>En résumé, lorsqu'on paramètre manuellement le constructeur, on peut obtenir des résultats sources de confusion. La plupart du temps, la propriété <code>constructor</code> n'est pas utilisée et la réaffecter n'est pas nécessaire.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</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.constructor")}}</p> +</div> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/count/index.html b/files/fr/web/javascript/reference/objets_globaux/object/count/index.html new file mode 100644 index 0000000000..03dfa86bde --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/count/index.html @@ -0,0 +1,42 @@ +--- +title: Object.prototype.__count__ +slug: Web/JavaScript/Reference/Objets_globaux/Object/count +tags: + - JavaScript + - Object + - Obsolete + - Propriété + - Prototype + - Reference +translation_of: Archive/Web/JavaScript/Object.count +--- +<div>{{JSRef}}{{Non-standard_Header}}{{obsolete_header("gecko2")}}</div> + +<p>La propriété <strong><code>__count__</code></strong> était utilisée pour compter les propriétés énumérables d'un objet mais a été retiréee.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.__count__</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">{ 1: 1 }.__count__ // 1 +[].__count__ // 0 +[1].__count__ // 1 +[1, /* trou */, 2, 3].__count__ // 3</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété n'appartient à aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.count")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/04/06/more-changes-coming-to-spidermonkey-the-magical-__count__-property-of-objects-is-being-removed/">[Billet de blog] More changes coming to SpiderMonkey: the magical __count__ property is being removed</a> (en anglais)</li> +</ul> 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&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> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html new file mode 100644 index 0000000000..77c16bfe51 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html @@ -0,0 +1,103 @@ +--- +title: Object.prototype.__defineGetter__() +slug: Web/JavaScript/Reference/Objets_globaux/Object/defineGetter +tags: + - Déprécié + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p><strong>Attention :</strong> Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">la syntaxe d'initialisation d'objets</a>. Toutefois, <code>__defineGetter__</code> est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.</p> +</div> + +<p>La méthode <code><strong>__defineGetter__</strong></code> permet de lier une propriété d'un objet à une fonction à exécuter lorsqu'on accède à la propriété.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Une chaîne de caractères contenant le nom de la propriété à lier à la fonction donnée.</dd> + <dt><code>func</code></dt> + <dd>Une fonction à utiliser à chaque fois qu'on accède à la propriété.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>__defineGetter__</code> permet de définir un {{jsxref("Opérateurs/L_opérateur_get", "accesseur", "", 1)}} sur un objet pré-existant.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// Méthode non-standard et dépréciée + +var o = {}; +o.__defineGetter__('gimmeFive', function() { return 5; }); +console.log(o.gimmeFive); // 5 + + +// Façon standard + +// En utilisant l'opérateur get +var o = { get gimmeFive() { return 5; } }; +console.log(o.gimmeFive); // 5 + +// En utilisant Object.defineProperty +var o = {}; +Object.defineProperty(o, 'gimmeFive', { + get: function() { + return 5; + } +}); +console.log(o.gimmeFive); // 5 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</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.defineGetter")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li> + <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_get", "get")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : définir des getters et setters</a></li> + <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Billet de blog] Deprecation of __defineGetter__ and __defineSetter__</a> (en anglais)</li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html b/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html new file mode 100644 index 0000000000..01647f7dec --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html @@ -0,0 +1,201 @@ +--- +title: Object.defineProperties() +slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperties +tags: + - ECMAScript 5 + - JavaScript + - Méthode + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.defineProperties()</strong></code> permet de définir ou de modifier les propriétés d'un objet directement sur celui-ci. La valeur renvoyée est l'objet modifié.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-defineproperties.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.defineProperties(<var>obj</var>, <var>props</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite modifier ou définir certaines propriétés.</dd> + <dt><code>props</code></dt> + <dd>Un objet dont les propriétés propres et énumérables sont des descripteurs de propriétés pour les propriétés à définir ou à modifier. Les descripteurs de propriétés peuvent avoir deux formes (voir {{jsxref("Object.defineProperty()")}} pour plus d'informations) : un descripteur de donnée ou un descripteur d'accesseur.</dd> + <dd>Les descripteurs de donnée et d'accesseur peuvent avoir les clés suivantes : + <dl> + <dt><code>configurable</code></dt> + <dd><code>true</code> si et seulement si le type de ce descripteur peut être modifié et si la propriété peut être supprimée de l'objet.<br> + <strong>Par défaut : <code>false</code>.</strong></dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> si et seulement si la propriété doit être listée lors des énumérations de propriétés de l'objet (quand on liste les propriétés pour une boucle par exemple).<br> + <strong>Par défaut : <code>false</code>.</strong></dd> + </dl> + + <p>Un descripteur de donnée pourra avoir les clés suivantes :</p> + + <dl> + <dt><code>value</code></dt> + <dd>La valeur associée à la propriété. Cela peut être n'importe quelle valeur valide en JavaScript (un nombre, un objet, etc.).<br> + <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd> + <dt><code>writable</code></dt> + <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être modifiée par un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.<br> + <strong>Par défaut : <code>false</code>.</strong></dd> + </dl> + + <p>Un descripteur d'accesseur pourra avoir les clés suivantes :</p> + + <dl> + <dt><code>get</code></dt> + <dd>Une fonction utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur. La fonction renvoyée sera utilisée comme valeur pour la propriété.<br> + <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd> + <dt><code>set</code></dt> + <dd>Une fonction utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas de mutateur. La fonction qui sera utilisée ensuite recevra la nouvelle valeur à affecter à la propriété comme argument.<br> + <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd> + </dl> + + <p>Si un descripteur ne possède aucune clé parmi <code>value</code>, <code>writable</code>, <code>get</code> et <code>set</code>, il sera considéré comme un descripteur de donnée. Si un descripteur possède à la fois les clés <code>value</code>/<code>writable</code> et <code>get</code>/<code>set</code>, une exception sera levée.</p> + </dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet passé à la fonction, éventuellement modifié.</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.defineProperties</code> permet principalement de définir toutes les propriétés de l'objet <code>obj </code>correspondant aux propriétés énumérable de <code>props</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var obj = {}; +Object.defineProperties(obj, { + "propriété1": { + value: true, + writable: true + }, + "propriété2": { + value: "Coucou", + writable: false + } + // etc. +});</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p>Si on considère un environnement <em>pur</em> où tous les noms et toutes les propriétés font référence à leurs valeurs initiales, <code>Object.defineProperties</code> est quasiment équivalent à l'implémentation suivante en JavaScript (voir la note liée à <code>isCallable</code>) :</p> + +<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) { + function convertToDescriptor(desc) { + function hasProperty(obj, prop) { + return Object.prototype.hasOwnProperty.call(obj, prop); + } + + function isCallable(v) { + // NB : à modifier s'il y a plus de types + // que les fonctions qui sont + // appelables (callables) + return typeof v === "function"; + } + + if (typeof desc !== "object" || desc === null) + throw new TypeError("bad desc"); + + var d = {}; + + if (hasProperty(desc, "enumerable")) + d.enumerable = !!desc.enumerable; + if (hasProperty(desc, "configurable")) + d.configurable = !!desc.configurable; + if (hasProperty(desc, "value")) + d.value = desc.value; + if (hasProperty(desc, "writable")) + d.writable = !!desc.writable; + if ( hasProperty(desc, "get") ) { + var g = desc.get; + + if (!isCallable(g) && typeof g !== "undefined") + throw new TypeError("bad get"); + d.get = g; + } + if ( hasProperty(desc, "set") ) { + var s = desc.set; + if (!isCallable(s) && typeof s !== "undefined") + throw new TypeError("bad set"); + d.set = s; + } + + if (("get" in d || "set" in d) && ("value" in d || "writable" in d)) + throw new TypeError("identity-confused descriptor"); + + return d; + } + + if (typeof obj !== "object" || obj === null) + throw new TypeError("bad obj"); + + properties = Object(properties); + + var keys = Object.keys(properties); + var descs = []; + + for (var i = 0; i < keys.length; i++) + descs.push([keys[i], convertToDescriptor(properties[keys[i]])]); + + for (var i = 0; i < descs.length; i++) + Object.defineProperty(obj, descs[i][0], descs[i][1]); + + return obj; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée par JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</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.defineProperties")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Détention et énumération des propriétés</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html new file mode 100644 index 0000000000..e7222df8ba --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html @@ -0,0 +1,421 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperty +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +<div>{{JSRef}}</div> + +<p>La méthode statique <code><strong>Object.defineProperty()</strong></code> permet de définir une nouvelle propriété ou de modifier une propriété existante, directement sur un objet. La méthode renvoie l'objet modifié.</p> + +<div class="note"> +<p><strong>Note :</strong> Cette méthode est directement appelée via le constructeur {{jsxref("Object")}} plutôt que sur les instances de type <code>Object</code>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/object-defineproperty.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.defineProperty(<var>obj</var>, <var>prop</var>, <var>descripteur</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet sur lequel on souhaite définir ou modifier une propriété.</dd> + <dt><code>prop</code></dt> + <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on définit ou qu'on modifie.</dd> + <dt><code>descripteur</code></dt> + <dd>Le descripteur de la propriété qu'on définit ou qu'on modifie.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet qui a été passé à la fonction et qui a éventuellement été modifié.</p> + +<h2 id="Description">Description</h2> + +<p>Cette méthode permet d'ajouter ou de modifier une propriété d'un objet avec une certaine précision. En effet, quand on ajoute une propriété « normalement » (via une affectation), on crée une propriété dont le comportement par défaut fait qu'elle sera listée dans une énumération de propriétés (par exemple avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou via la méthode {{jsxref("Object.keys")}}), dont la valeur peut être changée et qui peut être supprimée via {{jsxref("Opérateurs/L_opérateur_delete","delete")}}. La méthode <code>Object.defineProperty()</code> permet de préciser le comportement attendu, potentiellement différent de celui par défaut.</p> + +<p>Les descripteurs de propriété existent en deux versions : les descripteurs de données et les descripteurs d'accesseur. Un descripteur de données est une propriété qui possède une valeur et qui peut ou non être accessible en écriture. Un descripteur d'accesseur est une propriété décrite par une paire d'accesseur/mutateur (<em>getter/setter</em>) qui sont des fonctions. Un descripteur est un descripteur de données ou un descripteur d'accesseur, il ne peut pas être les deux.</p> + +<p>Les descripteurs de données et d'accesseur sont des objets. Ils partagent les propriétés suivantes (la valeur par défaut indiquée est utilisée lorsqu'on passe par <code>Object.defineProperty()</code>) :</p> + +<dl> + <dt><code>configurable</code></dt> + <dd><code>true</code> si et seulement si le type de ce descripteur de propriété peut être changé et si la propriété peut/pourra être supprimée de l'objet correspondant..<br> + <strong>La valeur par défaut est </strong><strong><code>false</code></strong><strong>.</strong></dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> si et seulement si la propriété apparaît lors de l'énumération des propriétés de l'objet correspondant.<br> + <strong><strong>La valeur par défaut est</strong> </strong><strong><code>false</code></strong><strong>.</strong></dd> +</dl> + +<p>Un descripteur de données possède les propriétés optionnelles suivantes :</p> + +<dl> + <dt><code>value</code></dt> + <dd>La valeur associée à la propriété. Peut être n'importe quelle valeur JavaScript valide (un nombre, un objet, etc.).<br> + <strong>La valeur par défaut est {{jsxref("undefined")}}.</strong></dd> + <dt><code>writable</code></dt> + <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être modifiée en utilisant un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.<br> + <strong><strong>La valeur par défaut est</strong> <code>false</code>.</strong></dd> +</dl> + +<p>Un descripteur d'accesseur possède les propriétés optionnelles suivantes :</p> + +<dl> + <dt><code>get</code></dt> + <dd>Une fonction qui est utilisée comme accesseur (<em>getter</em>) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas d'accesseur. La valeur de retour de la fonction sera utilisée comme valeur pour la propriété. Lorsqu'on accède à la propriété, la fonction est appelée sans argument avec <code>this</code> qui est l'objet pour lequel on souhaite consulter la propriété.<br> + <strong><strong>La valeur par défaut est</strong> {{jsxref("undefined")}}</strong>.</dd> + <dt><code>set</code></dt> + <dd>Une fonction qui est utilisée comme mutateur (<em>setter</em>) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas de mutateur. Pour unique argument, la fonction recevra la nouvelle valeur à affecter à la propriété. Le contexte <code>this</code> passé est l'objet sur lequel on souhaite modifier la propriété.<br> + <strong>La valeur par défaut est {{jsxref("undefined")}}</strong>.</dd> +</dl> + +<p>Si un descripteur ne possède aucune des clés <code>value</code>, <code>writable</code>, <code>get</code> ou <code>set</code>, il est considéré comme un descripteur de données. Si un descripteur possède à la fois une propriété <code>value</code> ou <code>writable</code> et une propriété <code>get</code> ou <code>set</code>, un exception sera déclenchée.</p> + +<p>Il faut garder à l'esprit que ces options ne sont pas nécessairement les descripteurs des propriétés propres. Elles peuvent être héritées et faire partie de la chaine des prototypes. Afin de s'assurer que les valeur par défaut sont préservées, on peut d'abord geler le prototype {{jsxref("Object.prototype")}}, définir toutes les options explicitement ou faire pointer la propriété {{jsxref("Object.prototype.__proto__", "__proto__")}} vers {{jsxref("null")}} (par exemple avec {{jsxref("Object.create","Object.create(null)")}}).</p> + +<pre class="brush:js">var obj = {}; +// en utilisant __proto__ +Object.defineProperty(obj, "clé", { + __proto__: null, // aucune propriété héritée + value: "static" // non énumérable + // non configurable + // non accessible en écriture + // par défaut +}); + +// en étant explicite +Object.defineProperty(obj, "clé", { + enumerable: false, + configurable: false, + writable: false, + value: "static" +}); + +// en recyclant un objet +function avecValeur(valeur) { + var d = avecValeur.d || ( + avecValeur.d = { + enumerable: false, + writable: false, + configurable: false, + value: null + } + ); + if(d.value !== valeur){ + d.value = valeur; + } + return d; +} +// ... autres instructions... puis +Object.defineProperty(obj, "clé", avecValeur("static")); + +// si la méthode freeze est disponible, +// on peut empêcher que du code ajoute des +// propriétés (valeur, get, set, enumerable, +// writable, configurable) au prototype d'Object +(Object.freeze||Object)(Object.prototype);</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Pour plus d'exemples utilisant la méthode <code>Object.defineProperty</code> avec une syntaxe de masque binaire, voir <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty/Exemples_suppl%C3%A9mentaires">les exemples supplémentaires</a>.</p> + +<h3 id="Créer_une_propriété">Créer une propriété</h3> + +<p>Lorsqu'une propriété n'existe pas pour l'objet, <code>Object.defineProperty()</code> créera une nouvelle propriété telle qu'elle est décrite. Certains champs du descripteur peuvent manquer, les valeurs par défaut seront alors utilisées. Tous les booléens ont <code>false</code> pour valeur par défaut. Une propriété définie sans <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> est appelée « générique » et « correspond » à un descripteur de données.</p> + +<pre class="brush: js">var o = {}; // on crée un nouvel objet + +// Exemple d'une propriété ajoutée via defineProperty +// avec un descripteur de données +Object.defineProperty(o, "a", {value : 37, + writable : true, + enumerable : true, + configurable : true}); +// la propriété 'a' existe pour l'objet o et vaut 37 + +// Exemple d'une propriété ajoutée via defineProperty +// avec un descripteur d'accesseur +var valeurB = 38; +Object.defineProperty(o, "b", {get : function(){ return valeurB; }, + set : function(nouvelleValeur){ + valeurB = nouvelleValeur; + }, + enumerable : true, + configurable : true}); +o.b; // 38 +// la propriété 'b' existe pour l'objet o +// et vaut 38 +// La valeur de o.b est désormais toujours +// identique à valeurB, sauf si o.b est redéfini + +// On ne peut pas mélanger les deux : +Object.defineProperty(o, "conflit", { value: 0x9f91102, + get: function() { + return 0xdeadbeef; + } + }); +// une exception TypeError sera lancée : value n'apparaît +// que dans les descripteurs de données +// get n'apparait que dans les descripteurs d'accesseur +</pre> + +<h3 id="Modifier_une_propriété_existante">Modifier une propriété existante</h3> + +<p>Quand une propriété existe d'ores et déjà pour un objet, <code>Object.defineProperty()</code> tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait <code>configurable</code> à <code>false</code> (la propriété est dite non-configurable), aucun attribut, à l'exception de <code>writable</code>, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur.</p> + +<p>Si une propriété est non-configurable, son attribut <code>writable</code> ne peut être mis qu'à <code>false</code>.</p> + +<p>Une exception {{jsxref("TypeError")}} peut être levée quand on essaie de modifier des attributs de propriété non-configurables (en dehors des attributs <code>value</code> et <code>writable</code>) sauf dans le cas où les valeurs souhaitées sont les mêmes que les valeurs courantes.</p> + +<h4 id="Attribut_writable">Attribut <code>writable</code></h4> + +<p>Lorsque l'attribut <code>writable</code> vaut <code>false</code> pour la propriété, cette dernière n'est plus accessible en écriture. Il est impossible de la réaffecter.</p> + +<pre class="brush: js">var o = {}; // On crée un nouvel objet + +Object.defineProperty(o, "a", { value : 37, + writable : false }); + +console.log(o.a); // inscrit 37 dans les journaux (logs) +o.a = 25; // Aucune exception n'est lancée (on aurait une + // exception en mode strict, y compris si la + // valeur souhaitée avait été la même) +console.log(o.a); // inscrit toujours 37. + //L'affectation n'a pas fonctionné.</pre> + +<pre class="brush: js">// En mode strict +(function() { + 'use strict'; + var o = {}; + Object.defineProperty(o, 'b', { + value: 2, + writable: false + }); + o.b = 3; // déclenche une TypeError: "b" est en lecture seule + return o.b; // renvoie 2 sans la ligne précédente +}()); +</pre> + +<p>Comme on l'a vu dans l'exemple, essayer de modifier une propriété non accessible en écriture ne la modifie pas. Cela ne rend pas d'erreur non plus (en mode non-strict).</p> + +<h4 id="Attribut_enumerable">Attribut <code>enumerable</code></h4> + +<p>L'attribut de propriété <code>enumerable</code> permet de définir si la propriété est sélectionnée par {{jsxref("Object.assign()")}} ou via l'opérateur <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">de décomposition</a> (<em>spread</em>). Pour les propriétés qui ne sont pas nommées avec des symboles, les propriétés énumérables correspondent aux propriétés qui sont listées avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou avec la méthode {{jsxref("Object.keys()")}}.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + value: 1, + enumerable: true +}); +Object.defineProperty(o, 'b', { + value: 2, + enumerable: false +}); +Object.defineProperty(o, 'c', { + value: 3 +}); // enumerable vaut false par défaut +o.d = 4; // enumerable vaut true par défaut + // lorsqu'on crée une propriété + // en la définissant +Object.defineProperty(o, Symbol.for('e'), { + value: 5, + enumerable: true +}); +Object.defineProperty(o, Symbol.for('f'), { + value: 6, + enumerable: false +}); + +for (var i in o) { + console.log(i); +} +// affiche 'a' et 'd' (dans un ordre indéfini) + +Object.keys(o); // ['a', 'd'] + +o.propertyIsEnumerable('a'); // true +o.propertyIsEnumerable('b'); // false +o.propertyIsEnumerable('c'); // false +o.propertyIsEnumerable('d'); // true +o.propertyIsEnumerable(Symbol.for('e')); // true +o.propertyIsEnumerable(Symbol.for('f')); // false + +var p = { ...o } +p.a // 1 +p.b // undefined +p.c // undefined +p.d // 4 +p[Symbol.for('e')] // 5 +p[Symbol.for('f')] // undefined +</pre> + +<h4 id="Attribut_configurable">Attribut <code>configurable</code></h4> + +<p>L'attribut <code>configurable</code> permet de contrôler si la propriété peut être supprimée et si les autres attributs de propriété (voir ci-avant), à l'exception de <code>value</code> ou de <code>writable</code>, peuvent être modifiés.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, "a", { get : function(){return 1;}, + configurable : false } ); + +Object.defineProperty(o, "a", {configurable : true}); +// renvoie une TypeError + +Object.defineProperty(o, "a", {enumerable : true}); +// renvoie une TypeError + +Object.defineProperty(o, "a", {set : function(){}}); +// renvoie une TypeError (set était non défini avant) + +Object.defineProperty(o, "a", {get : function(){return 1;}}); +// renvoie une TypeError +// (bien que le nouveau get soit identique au précédent) + +Object.defineProperty(o, "a", {value : 12}); +// renvoie une TypeError + +console.log(o.a); // log 1 +delete o.a; // Rien ne se passe +console.log(o.a); // log 1 +</pre> + +<p>Si l'attribut <code>configurable</code> de <code>o.a</code> avait été <code>true</code>, aucune de ces erreurs n'aurait été renvoyée et la propriété aurait été supprimée au final.</p> + +<h3 id="Ajouter_des_propriétés_et_des_valeurs_par_défaut">Ajouter des propriétés et des valeurs par défaut</h3> + +<p>Il est toujours important de savoir comment les valeurs par défaut sont appliquées. Le comportement est souvent différent entre une affectation simple et l'utilisation de <code>Object.defineProperty()</code>. Par exemple :</p> + +<pre class="brush: js">var o = {}; + +o.a = 1; +// est équivalent à : +Object.defineProperty(o, "a", {value : 1, + writable : true, + configurable : true, + enumerable : true}); + + +// D'un autre côté, +Object.defineProperty(o, "a", {value : 1}); +// sera équivalent à : +Object.defineProperty(o, "a", {value : 1, + writable : false, + configurable : false, + enumerable : false}); +</pre> + +<h3 id="Accesseurs_et_mutateurs_adaptés">Accesseurs et mutateurs adaptés</h3> + +<p>L'exemple ci-dessous illustre comment implémenter un objet qui archive des données. Lorsque la propriété <code>température</code> est définie, on ajoute une entrée au tableau <code>archive</code> :</p> + +<pre class="brush: js">function Archiviste() { + var température = null; + var archive = []; + + Object.defineProperty(this, "température",{ + get: function() { + console.log("accès !"); + return température; + }, + set: function(value) { + température = value; + archive.push({val: température}); + } + }); + + this.getArchive = function() {return archive;}; +} + +var arc = new Archiviste(); +arc.température; // "accès !" +arc.température = 11; +arc.température = 13; +arc.getArchive(); // [{val: 11}, {val: 13}] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">É tat</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td> + <p>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</p> + </td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.defineProperty")}}</p> + +<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2> + +<h3 id="Redéfinir_la_propriété_length_d'un_tableau_(Array)">Redéfinir la propriété <code>length</code> d'un tableau (<code>Array</code>)</h3> + +<p>Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété <code>length</code> est initialement non-configurable, non-enumérable et accessible en écriture (<code>writable</code> vaut <code>true</code>)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété<code> length</code> ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition.</p> + +<p>Les versions de Firefox 4 à 22 renverront une exception {{jsxref("TypeError")}} pour chaque tentative (licite ou non) de modification de la propriété <code>length</code> d'un tableau.</p> + +<p>Pour les versions de Chrome qui implémentent <code>Object.defineProperty()</code>, elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de <code>length</code>. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture.</p> + +<p>Pour les versions de Safari qui implémentent <code>Object.defineProperty()</code> elles ignorent la redéfinition d'une valeur différente de la valeur courante. Toute tentative de modifier l'accès en écriture échouera silencieusement (aucune modification effective, aucune exception renvoyée).</p> + +<p>Seules les versions Internet Explorer 9 et supérieures et Firefox 23 et supérieures semblent supporter complètement la redéfinition de la propriété <code>length</code> pour les tableaux. À l'heure actuelle, il n'est pas conseillé de s'attendre à ce qu'une telle redéfinition fonctionne ou ne fonctionne pas. Même dans le cas où on peut supposer que cela fonctionne de façon cohérente : <a href="https://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">ce n'est pas vraiment une bonne idée de le faire</a> (en anglais).</p> + +<h3 id="Notes_spécifiques_relatives_à_Internet_Explorer_8">Notes spécifiques relatives à Internet Explorer 8</h3> + +<p>Internet Explorer 8 a implémenté une méthode <code>Object.defineProperty()</code> <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">uniquement utilisable sur les objets DOM</a>. Quelques éléments sont à noter :</p> + +<ul> + <li>L'utilisation de <code>Object.defineProperty()</code> sur les objets natifs renvoie une erreur.</li> + <li>Les attributs de propriétés doivent être définis avec certaines valeurs. <code>true</code> (pour <code>Configurable</code>), <code>true</code> (pour <code>enumerable</code>), <code>true</code> (pour <code>writable</code>) pour les descripteurs de données et <code>true</code> pour <code>configurable</code>, <code>false</code> pour <code>enumerable</code> pour les descripteurs d'accesseur. Fournir d'autres valeurs résultera en une erreur (à confirmer).</li> + <li>Pour modifier une propriété, il faut d'abord la supprimer. Si ça n'a pas été fait, elle reste telle quelle.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">Énumérabilité et maîtrise des propriétés</a></li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.prototype.watch()")}}</li> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> + <li>{{jsxref("Opérateurs/L_opérateur_get", "get")}}</li> + <li>{{jsxref("Opérateurs/L_opérateur_set", "set")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty/Exemples_suppl%C3%A9mentaires">Exemples supplémentaires utilisant <code>Object.defineProperty</code></a></li> + <li>{{jsxref("Reflect.defineProperty()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html new file mode 100644 index 0000000000..21dce0f35e --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html @@ -0,0 +1,115 @@ +--- +title: Object.prototype.__defineSetter__() +slug: Web/JavaScript/Reference/Objets_globaux/Object/defineSetter +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p><strong>Attention :</strong> Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">la syntaxe d'initialisation d'objets</a>. Toutefois, <code>__defineGetter__</code> est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.</p> +</div> + +<p>La méthode <code><strong>__defineSetter__</strong></code> permet de lier une propriété d'un objet à une fonction qui sera exécutée pour toute tentative de définition/changement de cette propriété.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.__defineSetter__(<var>prop</var>, <var>fun</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Une chaîne de caractères qui contient le nom de la propriété qu'on souhaite lier à la fonction.</dd> + <dt><code>fun</code></dt> + <dd>Une fonction à appeler pour chaque modification de la propriété. Cette fonction prend la forme suivante : + <pre class="brush: js">function(<var>val</var>) { . . . }</pre> + + <dl> + <dt><code>val</code></dt> + <dd>Un alias pour la variable contenant la nouvelle valeur qu'on souhaite affecter à <code>prop</code>.</dd> + </dl> + </dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>__defineSetter__</code> permet de définir un {{jsxref("Opérateurs/L_opérateur_set", "mutateur", "", 1)}} sur un objet pré-existant.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// Méthode non-standard et dépréciée + +var o = {}; +o.__defineSetter__('valeur', function(val) { this.uneAutreValeur = val; }); +o.valeur = 5; +console.log(o.valeur); // undefined +console.log(o.uneAutreValeur); // 5 + + +// Façons standard + +// En utilisant l'opérateur set +var o = { set valeur(val) { this.uneAutreValeur = val; } }; +o.valeur = 5; +console.log(o.valeur); // undefined +console.log(o.uneAutreValeur); // 5 + +// En utilisant Object.defineProperty +var o = {}; +Object.defineProperty(o, 'valeur', { + set: function(val) { + this.uneAutreValeur = val; + } +}); +o.valeur = 5; +console.log(o.valeur); // undefined +console.log(o.uneAutreValeur); // 5 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</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.defineSetter")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li> + <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_set", "set")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Définir des getters et setters</a></li> + <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Billet de blog] Deprecation of __defineGetter__ and __defineSetter__</a> (en anglais)</li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html new file mode 100644 index 0000000000..3677bdc3f1 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html @@ -0,0 +1,162 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Objets_globaux/Object/entries +tags: + - ECMAScript2016 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.entries()</strong></code> renvoie un tableau des propriétés propres énumérables d'un objet dont la clé est une chaîne de caractères, sous la forme de paires <code>[clé, valeur]</code>, dans le même ordre qu'une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle <code>for-in</code> est différente car elle parcourt la chaîne des prototypes).</p> + +<p>L'ordre du tableau renvoyé par cette méthode ne dépend pas de la façon dont l'objet est défini. S'il faut garantir un certain ordre, on pourra utiliser la méthode {{jsxref("Array.sort()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-entries.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.entries(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite connaître les propriétés propres énumérables dont la clé est une chaîne de caractères, sous la forme de paires <code>[clé, valeur]</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un tableau qui contient les propriétés énumérables propres de l'objet sous la forme de paires <code>[clé, valeur]</code>.</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.entries()</code> renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments) <code>[clé, valeur]</code> qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var obj = { toto: "truc", machin: 42 }; +console.log(Object.entries(obj)); // [ ['toto', 'truc'], ['machin', 42] ] + +// Un objet semblable à un tableau +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] + +// Un objet semblable à un tableau +// dont les clés sont aléatoirement ordonnées +var un_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.entries(un_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] + +// getToto est une propriété non énumérable +var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } }); +mon_obj.toto = "truc"; +console.log(Object.entries(mon_obj)); // [ ['toto', 'truc'] ] + +// un argument de type primitif sera +// converti en un objet +console.log(Object.entries("toto")); // [ ['0', 't'], ['1', 'o'], ['2', 't'], ['3', 'o'] ] + +// Un tableau vide pour les types primitifs qui n'ont pas de propriétés +console.log(Object.entries(100)); // [ ] + +// parcourir les clés-valeurs +var autreObjet = {a:5, b:7, c:9}; + +for (var [cle, valeur] of Object.entries(autreObjet)){ + console.log(cle + ' ' + valeur); +} + +// Ou encore, en utilisant les méthodes génériques +Object.entries(autreObjet).forEach(([clé, valeur]) => { + console.log(clé + ' ' + valeur); +}); +</pre> + +<h3 id="Convertir_un_objet_en_Map">Convertir un objet en <code>Map</code></h3> + +<p>Le constructeur {{jsxref("Map", "new Map()")}} accepte un argument itérable pour décrire les entrées du tableau associatif. Grâce à <code>Object.entries</code>, il est possible de convertir simplement un objet {{jsxref("Object")}} en un objet {{jsxref("Map")}} :</p> + +<pre class="brush: js">var obj = { toto: "truc", machin: 42 }; +var map = new Map(Object.entries(obj)); +console.log(map); // Map { toto: "truc", machin: 42 }</pre> + +<h3 id="Parcourir_un_objet">Parcourir un objet</h3> + +<p>En utilisant <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition#Décomposition_d'un_tableau">la décomposition des tableaux</a>, on peut simplement parcourir les différentes propriétés d'un objet :</p> + +<pre class="brush: js">const obj = { toto: "truc", bidule: 42 }; +Object.entries(obj).forEach( + ([clé, valeur]) => console.log(`${clé}: ${valeur}`) +); +// "toto: truc" +// "bidule: 42"</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p>Afin d'ajouter le support pour <code>Object.entries</code> dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> ou sur le dépôt <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>.</p> + +<p>Vous pouvez également utiliser la prothèse suivante (qui nécessitera la prothèse pour <code>Object.prototype.keys()</code> si on souhaite être compatible avec IE 8 et les versions antérieures) :</p> + +<pre class="brush: js">if (!Object.entries) { + Object.entries = function( obj ){ + var ownProps = Object.keys( obj ), + i = ownProps.length, + resArray = new Array(i); + while (i--) + resArray[i] = [ownProps[i], obj[ownProps[i]]]; + + return resArray; + }; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ES8')}}</td> + <td>Définition initiale.</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.entries")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et rattachement des propriétés</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.fromEntries()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/eval/index.html b/files/fr/web/javascript/reference/objets_globaux/object/eval/index.html new file mode 100644 index 0000000000..ae6e095928 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/eval/index.html @@ -0,0 +1,47 @@ +--- +title: Object.prototype.eval() +slug: Web/JavaScript/Reference/Objets_globaux/Object/eval +tags: + - JavaScript + - Méthode + - Object + - Obsolete + - Reference +translation_of: Archive/Web/JavaScript/Object.eval +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>La méthode <code><strong>Object.eval()</strong></code> permet d'évaluer une chaîne de caractères contenant du code JavaScript dans le contexte de l'objet. Cette méthode a été retirée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><code><var>obj</var>.eval(<var>string</var>)</code></pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>string</code></dt> + <dd>N'importe quelle chaîne de caractères qui représente une expression JavaScript ou une séquence d'instructions. L'expression peut contenir des variables et des propriétés d'objets existants.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>eval</code> ne peut plus être utilisée à partir d'un objet. Il faut utiliser la méthode {{jsxref("eval", "eval")}} à la place.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette méthode ne fait partie d'aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.eval")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("eval")}} (la méthode de l'objet global)</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html b/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html new file mode 100644 index 0000000000..e8c8d7febe --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html @@ -0,0 +1,257 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Objets_globaux/Object/freeze +tags: + - ECMAScript 5 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.freeze()</strong></code> permet de geler un objet, c'est-à-dire qu'on empêche d'ajouter de nouvelles propriétés, de supprimer ou d'éditer des propriétés existantes, y compris en ce qui concerne leur caractère énumérable, configurable ou pour l'accès en écriture. L'objet devient ainsi immuable. La méthode renvoie l'objet ainsi « gelé ».</p> + +<div>{{EmbedInteractiveExample("pages/js/object-freeze.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.freeze(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet à geler.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet qui a été passé à la fonction.</p> + +<h2 id="Description">Description</h2> + +<p>Rien ne pourra être ajouté ou supprimé dans l'ensemble des propriétés de l'objet gelé. Toute tentative échouera, silencieusement ou via une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Strict_mode", "mode strict", "", 1)}}).</p> + +<p>Les propriétés qui sont des données ne pourront pas être changées et les attributs <code>writable</code> et <code>configurable</code> vaudront <code>false</code>. Les propriétés qui sont des accesseurs ou des mutateurs fonctionneront de la même façon (et ne changeront pas la valeur associée malgré le fait qu'il n'y ait pas d'erreur). Les propriétés dont les valeurs sont des objets pourront être modifiées si ces objets ne sont pas gelés. Les tableaux peuvent également être gelés ce qui empêche alors d'ajouter ou de retirer des éléments ou de modifier les éléments existants si ceux-ci ne sont pas des objets.</p> + +<p>La fonction renvoie l'objet passé en argument, elle ne crée pas une copie « gelée ».</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Geler_des_objets">Geler des objets</h3> + +<pre class="brush: js">var obj = { + prop: function (){}, + toto: "truc" +}; + +// On peut ajouter de nouvelles propriétés, +// éditer ou supprimer celles existantes +obj.toto = "machin"; +obj.bidule = "woof"; +delete obj.prop; + +// L'argument et la valeur renvoyée correspondent au +// même objet. +// Il n'est pas nécessaire d'utiliser la valeur renvoyée +// pour geler l'objet original. +var o = Object.freeze(obj); + +o === obj; // true +Object.isFrozen(obj); // true + +// Maintenant que l'objet est gelé, les changements échoueront +obj.toto = "eheh"; // échoue silencieusement +obj.roxor = "ga bu zo meu"; // échoue silencieusement et n'ajoute + // pas la propriété + +// ...en mode strict, l'échec se traduira par une exception TypeErrors +function echec(){ + "use strict"; + obj.toto = "bipbip"; // renvoie une TypeError + delete obj.toto; // renvoie une TypeError + delete obj.roxor; // renvoie true car l'attribut n' a pas été ajouté + obj.bipbip = "arf"; // renvoie une TypeError +} + +echec(); + +// Les changements via Object.defineProperty échoueront également +// renvoie une TypeError +Object.defineProperty(obj, "ohoh", { value: 17 }); +// renvoie une TypeError +Object.defineProperty(obj, "toto", { value: "eit" }); + +// Il est également impossible de modifier le prototype. +// Les deux instructions suivantes déclencheront une TypeError. +Object.setPrototypeOf(obj, { x: 20 }); +obj.__proto__ = { x: 20 }; +</pre> + +<h3 id="Geler_un_tableau">Geler un tableau</h3> + +<pre class="brush: js">let a = [0]; +Object.freeze(a); +// Le tableau ne peut plus être modifié + +a[0] = 1; // échoue silencieusement +a.push(2); // échoue silencieusement + +// en mode strict, de telles tentatives +// déclencheront des exceptions TypeError +function echec() { + "use strict" + a[0] = 1; + a.push(2); +} + +echec(); +</pre> + +<p>L'exemple qui suit illustre comment les propriétés qui sont des objets peuvent être éditées (la méthode <code>freeze</code> ne s'applique que sur l'objet courant et de façon superficielle).</p> + +<pre class="brush: js">obj1 = { + internal: {} +}; + +Object.freeze(obj1); +obj1.internal.a = 'valeurA'; + +obj1.internal.a // 'valeurA'</pre> + +<p class="brush: js">L'objet qui est gelé est immuable mais ce n'est pas nécessairement une constante. Pour obtenir une constante, il faut que l'ensemble des références (directes et indirectes) pointe vers des objets immuables. Les chaînes de caractères, les nombres et les booléens sont toujours immuables. La plupart du temps, on aura besoin de créer des constantes au cas par cas (et non de façon générale).</p> + +<h3 class="brush: js" id="Qu'est-ce_que_le_gel_«_superficiel_»_(shallow_freeze)">Qu'est-ce que le gel « superficiel » ? (<em>shallow freeze</em>)</h3> + +<p>Lorsqu'on appelle <code>Object.freeze(monObjet)</code>, le gel ne s'applique qu'aux propriétés directement rattachées à <code>monObjet</code>. L'ajout, la suppression ou la réaffectation ne sont empêchées que sur l'objet directement. Si les valeurs de ces propriétés sont également des objets, ces derniers ne sont pas gelés et on peut leur ajouter/supprimer/réaffecter des valeurs.</p> + +<pre class="brush: js">var employé = { + nom: "Leroy", + designation: "Développeur", + adresse: { + cp: "72000", + ville: "Le Mans" + } +}; + +Object.freeze(employé); + +employé.nom = "John"; // propriété directe, la réaffectation échoue en silence +employé.adresse.ville = "Paris"; // propriété d'un objet fils : modifiable + +console.log(employé.adresse.ville); // affichera Paris +</pre> + +<p class="brush: js">Pour rendre l'objet complètement immuable, on gèle chacun des objets qu'il contient. Voici un exemple simple de fonction pour parcourir les propriétés qui sont des objets et les geler (attention, cela ne gère pas le cas où on a des cycles de références, ce qui entraînerait une boucle infinie).</p> + +<pre class="brush: js">function deepFreeze(obj) { + + // On récupère les noms des propriétés définies sur obj + var propNames = Object.getOwnPropertyNames(obj); + + // On gèle les propriétés avant de geler l'objet + for(let name of propNames){ + let value = obj[name]; + obj[name] = value && typeof value === "object" ? + deepFreeze(value) : value; + } + + // On gèle l'objet initial + return Object.freeze(obj); +} + +obj2 = { + internal: { + a: null + } +}; + +deepFreeze(obj2); +obj2.internal.a = 'valeurB'; // échouera silencieusement en mode non-strict +obj2.internal.a; // null</pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais est d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ECMAScript 2015 (ES2015), un argument qui n'est pas un objet sera traité comme un objet ordinaire gelé et sera renvoyé tel quel par la méthode.</p> + +<pre class="brush: js">Object.freeze(1); +// TypeError: 1 is not an object - code ES5 + +Object.freeze(1); +// 1 - code ES2015</pre> + +<p>Geler un {{domxref("ArrayBufferView")}} contenant des éléments entraînera une exception {{jsxref("TypeError")}} car ce sont des vues sur des zones mémoires.</p> + +<pre class="brush: js">> Object.freeze(new Uint8Array(0)) // Aucun élément +Uint8Array [] + +> Object.freeze(new Uint8Array(1)) // Avec des éléments +TypeError: Cannot freeze array buffer views with elements + +> Object.freeze(new DataView(new ArrayBuffer(32))) // Aucun élément +DataView {} + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Aucun élément +Float64Array [] + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Avec des éléments +TypeError: Cannot freeze array buffer views with elements +</pre> + +<p>On notera que les trois propriétés standard (<code>buf.byteLength</code>, <code>buf.byteOffset</code> et <code>buf.buffer</code>) sont en lecture seule (comme pour {{jsxref("ArrayBuffer")}} et {{jsxref("SharedArrayBuffer")}}) : il n'y a donc aucune raison de vouloir geler ces propriétés.</p> + +<h3 id="Comparaison_avec_Object.seal()">Comparaison avec <code>Object.seal()</code></h3> + +<p>Lorsqu'on utilise la méthode <code>Object.freeze()</code>, les propriétés existantes d'un objet deviennent immuables. En revanche, avec {{jsxref("Object.seal()")}}, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale.<br> + Implémentée avec JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</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.freeze")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html b/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html new file mode 100644 index 0000000000..0566ef1d36 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html @@ -0,0 +1,108 @@ +--- +title: Object.fromEntries() +slug: Web/JavaScript/Reference/Objets_globaux/Object/fromEntries +tags: + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.fromEntries()</strong></code> permet de transformer une liste de paires de clés/valeurs en un objet.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-fromentries.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.fromEntries(<var>iterable</var>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Un itérable tel qu'un tableau ({{jsxref("Array")}}) ou une {{jsxref("Map")}} ou tout autre objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouvel objet dont les propriétés sont fournies par les éléments de l'itérable.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>Object.fromEntries()</code> prend comme argument une liste de paires de clés-valeurs et renvoie un nouvel objet dont les propriétés sont fournies par ces clés-valeurs. L'argument <code>iterable</code> doit implémenter une méthode <code>@@iterator</code> qui renvoie un itérateur produisant un objet semblable à un tableau avec deux éléments ; le premier élément est une valeur qui sera utilisée comme clé de la propriété et le second élément sera utilisé comme valeur associée à cette clé.</p> + +<p><code>Object.fromEntries()</code> est la fonction inverse de {{jsxref("Object.entries()")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Convertir_une_Map_en_un_Object">Convertir une <code>Map</code> en un <code>Object</code></h3> + +<p>Grâce à <code>Object.fromEntries</code>, on peut convertir des objets {{jsxref("Map")}} en {{jsxref("Object")}} :</p> + +<pre class="brush: js">const map = new Map([ ['toto', 'truc'], ['machin', 42] ]); +const obj = Object.fromEntries(map); +console.log(obj); // { toto: "truc", machin: 42 } +</pre> + +<h3 id="Convertir_un_Array_en_un_Object">Convertir un <code>Array</code> en un <code>Object</code></h3> + +<p>Grâce à <code>Object.fromEntries</code>, on peut convertir des objets {{jsxref("Array")}} en {{jsxref("Object")}} :</p> + +<pre class="brush: js">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; +const obj = Object.fromEntries(arr); +console.log(obj); // { 0: "a", 1: "b", 2: "c" } +</pre> + +<h3 id="Transformer_des_objets">Transformer des objets</h3> + +<p>Avec <code>Object.fromEntries</code> et la méthode réciproque {{jsxref("Object.entries()")}}, et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Méthodes">les méthodes de manipulation de tableaux</a>, on peut transformer des objets :</p> + +<pre class="brush: js">const object1 = { a: 1, b: 2, c: 3 }; + +const object2 = Object.fromEntries( + Object.entries(object1) + .map(([ key, val ]) => [ key, val * 2 ]) +); + +console.log(object2); +// { a: 2, b: 4, c: 6 }</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définition initiale avec ES2019.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.fromEntries")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getnotifier/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getnotifier/index.html new file mode 100644 index 0000000000..ab7f2e2779 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/getnotifier/index.html @@ -0,0 +1,53 @@ +--- +title: Object.getNotifier() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getNotifier +tags: + - JavaScript + - Méthode + - Object + - Obsolete + - Reference +translation_of: Archive/Web/JavaScript/Object.getNotifier +--- +<div>{{JSRef}}{{obsolete_header}}</div> + +<p>La méthode <strong><code>Object.getNotifer()</code></strong> est utilisée pour créer un objet qui permet de déclencher des changements (tels que perçus par <code>Object.observe</code><code>()</code>) de façon synthétique. Cette API a été dépréciée et retirée des navigateurs.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Object.getNotifier(<em>obj</em>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite récupérer le notificateur (<em>notifier</em>) associé.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet de notification associé à l'objet passé en argument.</p> + +<h2 id="Description">Description</h2> + +<p>Le notificateur est utilisé pour déclencher des changements qui pourront être observés avec <code>Object.observe()</code>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Proposition de spécification</a>.</p> + +<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.getNotifier")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..5186c3b2b6 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html @@ -0,0 +1,149 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptor +tags: + - ECMAScript 5 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.getOwnPropertyDescriptor()</strong></code> renvoie un descripteur de la propriété propre d'un objet (c'est-à-dire une propriété directement présente et pas héritée via la chaîne de prototypes).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.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.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet sur lequel on cherche la propriété.</dd> + <dt><code>prop</code></dt> + <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on souhaite avoir la description.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un descripteur de propriété de la propriété souhaitée si elle existe pour l'objet en question, sinon {{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Cette méthode permet d'avoir des informations précises sur une propriété. Une propriété JavaScript est un nom (qui est une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) associé à un descripteur. Voir la page {{jsxref("Object.defineProperty")}} pour plus d'informations sur les descripteurs de propriétés.</p> + +<p>Un descripteur de propriété est un enregistrement qui dispose des attributs suivants :</p> + +<dl> + <dt><code><strong>value</strong></code></dt> + <dd>La valeur associée à la propriété (pour les descripteurs de données uniquement).</dd> + <dt><code><strong>writable</strong></code></dt> + <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être changée (pour les descripteurs de données uniquement).</dd> + <dt><code><strong>get</strong></code></dt> + <dd>Une fonction qui joue le rôle d'accesseur (<em>getter</em>) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement).</dd> + <dt><code><strong>set</strong></code></dt> + <dd>Une fonction qui joue le rôle de mutateur (<em>setter</em>) pour la propriété ou <code>undefined</code> s'il n'y a pas de tel mutateur (pour les descripteurs d'accesseurs uniquement).</dd> + <dt><code><strong>configurable</strong></code></dt> + <dd><code>true</code> si et seulement si le type du descripteur peut être changé et si la propriété peut être supprimée de l'objet.</dd> + <dt><code><strong>enumerable</strong></code></dt> + <dd><code>true</code> si et seulement si la propriété doit apparaître lors d'une énumération des propriétés de l'objet.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var o, d; + +o = { get toto() { return 17; } }; +d = Object.getOwnPropertyDescriptor(o, "toto"); +// d : { +// configurable: true, +// enumerable: true, +// get: /*l'accesseur*/, +// set: undefined +// } + +o = { truc: 42 }; +d = Object.getOwnPropertyDescriptor(o, "truc"); +// d : { +// configurable: true, +// enumerable: true, +// value: 42, +// writable: true +// } + +o = {}; +Object.defineProperty(o, "machin", { + value: 8675309, + writable: false, + enumerable: false }); +d = Object.getOwnPropertyDescriptor(o, "machin"); +// d : { +// value: 8675309, +// writable: false, +// enumerable: false, +// configurable: false +// }</pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si le premier argument de la méthode n'est pas un objet (mais une valeur d'un autre type), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument non-objet sera d'abord converti en objet avant d'appliquer la méthode.</p> + +<pre class="brush: js">Object.getOwnPropertyDescriptor("toto", 0); +// TypeError: "toto" n'est pas un objet // code ES5 + +// code ES2015 +Object.getOwnPropertyDescriptor("toto", 0); +// { +// configurable:false, +// enumerable:true, +// value:"f", +// writable:false +// } +</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.3', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale.<br> + Implémentée avec JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.getOwnPropertyDescriptor")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html new file mode 100644 index 0000000000..718833d4c4 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html @@ -0,0 +1,120 @@ +--- +title: Object.getOwnPropertyDescriptors() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptors +tags: + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.getOwnPropertyDescriptors()</strong></code> renvoie l'ensemble des descripteurs des propriétés propres d'un objet donné.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite connaître les descripteurs des propriétés.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un objet qui contient tous les descripteurs des propriétés propres de l'objet passé en paramètre. S'il n'y aucune propriété, cela sera un objet vide.</p> + +<h2 id="Description">Description</h2> + +<p>Cette méthode permet d'examiner de façon précise les différentes propriétés directement rattachées à un objet. Une propriété JavaScript se définit par un nom (une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) et un descripteur. Vous pouvez trouver de plus amples informations sur les types de descripteurs et sur leurs attributs sur la page de {{jsxref("Object.defineProperty()")}}.</p> + +<p>Un descripteur de propriété est un enregistrement qui possède les attributs suivants :</p> + +<dl> + <dt><code>value</code></dt> + <dd>La valeur associée à la propriété (uniquement pour les descripteurs de données).</dd> + <dt><code><strong>writable</strong></code></dt> + <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être changée (uniquement pour les descripteurs de données).</dd> + <dt><code>get</code></dt> + <dd>Une fonction qui est utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel accesseur (uniquement pour les descripteurs d'accesseur/mutateur).</dd> + <dt><code>set</code></dt> + <dd>Une fonction qui est utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel mutateur (uniquement pour les descripteurs d'accesseur/mutateur).</dd> + <dt><code>configurable</code></dt> + <dd><code>true</code> si et seulement si le type de descripteur peut être changé et si la propriété peut être supprimée de l'objet correspondant.</dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> si et seulement si cette propriété est listée lorsqu'on énumère les propriétés de l'objet correspondant.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Créer_un_clone">Créer un clone</h3> + +<p>La méthode {{jsxref("Object.assign()")}} ne copiera que les propriétés propres et énumérables d'un objet source vers un objet cible. On peut donc utiliser cette méthode avec {{jsxref("Object.create()")}} afin de réaliser une copie « plate » entre deux objets inconnus :</p> + +<pre class="brush: js">Object.create( + Object.getPrototypeOf(obj), + Object.getOwnPropertyDescriptors(obj) +); +</pre> + +<h3 id="Créer_une_sous-classe">Créer une sous-classe</h3> + +<p>Pour créer une sous-classe, généralement, on définit la sous-classe et on définit son prototype comme étant une instance de la classe parente. Enfin on définit les propriétés de cette nouvelle sous-classe.</p> + +<pre class="brush: js">function superclass() {}; +superclass.prototype = { + // on définit les méthodes et propriétés + // de la classe parente +}; + +function subclass() {}; +subclass.prototype = Object.create( + superclass.prototype, + Object.getOwnPropertyDescriptors({ + // on définit les méthodes et propriétés + // de la sous-classe +})); +</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('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td>Définition initiale.</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.getOwnPropertyDescriptors")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Prothèse d'émulation (<em>polyfill</em>)</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html new file mode 100644 index 0000000000..499f274e68 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html @@ -0,0 +1,180 @@ +--- +title: Object.getOwnPropertyNames() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.getOwnPropertyNames()</strong></code> renvoie un tableau de toutes les propriétés (qu'elles soient énumérables ou non, tant qu'elles ne sont pas désignées par un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol">symbole</a>) propres à un objet (c'est-à-dire n'étant pas héritées via la chaîne de prototypes).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Object.getOwnPropertyNames(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont seront listées les propriétés propres énumérables <em>et non-énumérables</em>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un tableau de chaînes de caractères qui sont les noms des propriétés propres (celles directement rattachées à l'objet) de l'objet passé en argument.</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.getOwnPropertyNames</code> renvoie un tableau dont les éléments sont des chaînes de caractères correspondant aux noms des propriétés énumerables <em>et non-énumerables</em> appartenant directement à l'objet <code>obj</code>. L'ordre des propriétés énumérables est cohérent avec l'ordre utilisé dans une boucle {{jsxref("Instructions/for...in","for...in")}} (ou avec {{jsxref("Object.keys")}}) parmi les propriétés de l'objet. L'ordre des propriétés non-énumérables dans le tableau et parmi les propriétés énumérables n'est pas défini.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_Object.getOwnPropertyNames()">Utiliser <code>Object.getOwnPropertyNames()</code></h3> + +<pre class="brush: js">var arr = ["a", "b", "c"]; +console.log(Object.getOwnPropertyNames(arr).sort()); +// ["0", "1", "2", "length"] + +// Objet semblable à un tableau (array-like) +var obj = { 0: "a", 1: "b", 2: "c"}; +console.log(Object.getOwnPropertyNames(obj).sort()); +// ["0", "1", "2"] + + +// On affiche les noms et les valeurs +// des propriétés avec Array.forEach +Object.getOwnPropertyNames(obj).forEach( + function(val, idx, array) { + console.log(val + " -> " + obj[val]); +}); +// affiche +// 0 -> a +// 1 -> b +// 2 -> c + +// propriété non-énumérable +var mon_obj = Object.create({}, { + getToto: { + value: function() { return this.toto; }, + enumerable: false + } +}); +mon_obj.toto = 1; + +console.log(Object.getOwnPropertyNames(mon_obj).sort()); +// ["toto", "getToto"] +</pre> + +<p>Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).</p> + +<p>Les propriétés héritées via la chaîne de prototype ne sont pas listées :</p> + +<pre class="brush: js">function ClasseParente() {} +ClasseParente.prototype.inheritedMethod = function () {}; + +function ClasseFille () { + this.prop = 5; + this.method = function () {}; +} +ClasseFille.prototype = new ClasseParente(); +ClasseFille.prototype.prototypeMethod = function () {}; + +console.log( + Object.getOwnPropertyNames( + new ClasseFille() // ["prop", "method"] + ) +) +</pre> + +<h3 id="Obtenir_uniquement_les_propriétés_non-énumérables">Obtenir uniquement les propriétés non-énumérables</h3> + +<p>On utilise ici la fonction {{jsxref("Array.prototype.filter()")}} pour retirer les clés énumérables (obtenus avec {{jsxref("Object.keys()")}}) de la liste de toutes les clés (obtenues avec <code>Object.getOwnPropertynames</code>) afin de n'avoir que les propriétés propres non-énumérables.</p> + +<pre class="brush: js">var target = myObject; +var enum_et_nonenum = Object.getOwnPropertyNames(target); +var enum_uniquement = Object.keys(target); +var nonenum_uniquement = enum_et_nonenum.filter(function(key) { + var indexInEnum = enum_uniquement.indexOf(key) + if (indexInEnum == -1) { + // non trouvée dans enum_uniquement indique + // que la clé est non-énumérable, on la + // garde donc dans le filtre avec true + return true; + } else { + return false; + } +}); + +console.log(nonenum_uniquement); +</pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument qui n'est pas un objet sera d'abord transformé en objet avant que la méthode soit appliquée.</p> + +<pre class="brush: js">Object.getOwnPropertyNames('toto') +TypeError: "toto" n'est pas un objet // code ES5 + +Object.getOwnPropertyNames('toto') +['length', '0', '1', '2'] // code ES2015</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale.<br> + Implémentée avec JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</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.getOwnPropertyNames")}}</p> +</div> + +<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2> + +<p>Pour les versions antérieures à Firefox 28 {{geckoRelease("28")}}, <code>Object.getOwnPropertyNames</code> ne listait pas les propriétés non-résolues des objets {{jsxref("Error")}}. Cela a été résolu dans les versions suivantes ({{bug("724768")}}).</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">Énumérabilité et possession des propriétés</a></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Array.forEach()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html new file mode 100644 index 0000000000..c296fef13f --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html @@ -0,0 +1,92 @@ +--- +title: Object.getOwnPropertySymbols() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.getOwnPropertySymbols()</strong></code> renvoie un tableau contenant tous les symboles des propriétés trouvées directement sur un objet donné.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.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.getOwnPropertySymbols(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite lister les symboles des propriétés propres.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un tableau des symboles trouvés directement sur l'objet passé en argument.</p> + +<h2 id="Description">Description</h2> + +<p>De la même façon que {{jsxref("Object.getOwnPropertyNames()")}}, il est possible d'avoir la liste des symboles des propriétés d'un objet donné sous forme d'un tableau. La méthode {{jsxref("Object.getOwnPropertyNames()")}} ne contiendra uniquement que les propriétés « nommées » d'un objet et non pas les propriétés uniquement accessibles via un symbole.</p> + +<p>Par défaut, aucun objet ne possède de propriété accessible via un symbole à l'état initial. Ainsi, <code>Object.getOwnPropertySymbols()</code> renvoie un tableau vide sauf si des propriétés nommées avec des symboles ont été définies pour l'objet.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var obj = {}; +var a = Symbol("a"); +var b = Symbol.for("b"); + +obj[a] = "symboleLocal"; +obj[b] = "symboleGlobal"; + +var objectSymboles = Object.getOwnPropertySymbols(obj); + +console.log(objectSymboles.length); // 2 +console.log(objectSymboles) // [Symbol(a), Symbol(b)] +console.log(objectSymboles[0]) // Symbol(a) +</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-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</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.getOwnPropertySymbols")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Symbol")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html new file mode 100644 index 0000000000..c001f9e8c0 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html @@ -0,0 +1,101 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getPrototypeOf +tags: + - ECMAScript5 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.getPrototypeOf()</strong></code> renvoie le prototype d'un objet donné (i.e. la valeur de la propriété <code>[[Prototype]]</code> interne).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getprototypeof.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.getPrototypeOf(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>L'objet dont on souhaite obtenir le prototype.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le prototype de l'objet passé en argument. Si aucune propriété n'est héritée, c'est la valeur {{jsxref("null")}} qui est renvoyée.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var proto = {}; +var obj = Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, la méthode renvoie une exception {{jsxref("TypeError")}} si le paramètre <code>obj</code> n'est pas un objet. Pour ES2015, le paramètre sera converti en un objet avant l'application de la méthode.</p> + +<pre class="brush: js">Object.getPrototypeOf("toto"); +// TypeError: "toto" n'est pas un objet (code ES5) +Object.getPrototypeOf("toto"); +// String.prototype (code ES2015) +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</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.getPrototypeOf")}}</p> +</div> + +<h2 id="Notes_relatives_à_Opera">Notes relatives à Opera</h2> + +<p>Bien que les anciennes versions d'Opera ne supportent pas <code>Object.getPrototypeOf()</code>, Opera supporte la propriété non-standard {{jsxref("Object.proto", "__proto__")}} depuis Opera 10.50.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</li> + <li>Le billet de John Resig sur <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a> (en anglais)</li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html new file mode 100644 index 0000000000..4a5a5434ce --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html @@ -0,0 +1,158 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>hasOwnProperty()</strong></code> retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à 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"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Le nom ({{jsxref("String")}}) ou le symbole ({{jsxref("Symbol")}}) de la propriété à tester.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un booléen qui indique si l'objet possède ou non la propriété indiquée en argument et que celle-ci est directement rattachée à l'objet (elle ne provient pas de la chaîne de prototypes de l'objet). <code>hasOwnProperty()</code> renvoie <code>true</code> si la propriété existe et que sa valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Chaque objet descendant d'{{jsxref("Object")}} hérite de la méthode <code>hasOwnProperty()</code>. Cette méthode peut être utilisée pour déterminer si un objet a la propriété spécifiée en tant que propriété directe de cet objet. Contrairement à l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}, cette méthode ne vérifie pas la chaîne des prototypes de l'objet. Si l'objet est un tableau ({{jsxref("Array")}}), la méthode <code>hasOwnProperty()</code> pourra être utilisée afin de vérifier la présence d'un index.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_hasOwnProperty()_pour_tester_l'existence_d'une_propriété">Utiliser <code>hasOwnProperty()</code> pour tester l'existence d'une propriété</h3> + +<p>L'exemple suivant détermine si l'objet <code>o</code> contient une propriété appelée <code>prop</code>:</p> + +<pre class="brush: js">o = new Object(); +o.hasOwnProperty('prop'); // false +o.prop = 'exists'; +o.hasOwnProperty('prop'); // true</pre> + +<h3 id="Propriétés_directes_et_propriétés_héritées">Propriétés directes et propriétés héritées</h3> + +<p>L'exemple suivant illustre la différence entre les propriétés directes et les propriétés héritées à partir de la chaîne de prototypes :</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; + +o.hasOwnProperty('prop'); +// retourne true + +o.hasOwnProperty('toString'); +// retourne false + +o.hasOwnProperty('hasOwnProperty'); +// retourne false</pre> + +<h3 id="Parcourir_les_propriétés_d'un_objet">Parcourir les propriétés d'un objet</h3> + +<p>L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que <code>hasOwnProperty()</code> est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) .</p> + +<pre class="brush: js">var bidule = { + truc: 'stack' +}; + +for (var nom in bidule) { + if (bidule.hasOwnProperty(nom)) { + console.log("C'est bien la propriété (" + + nom + + "), sa valeur : " + bidule[nom] + ); + } + else { + console.log(nom); + // toString ou autre + } +}</pre> + +<h3 id="hasOwnProperty()_en_tant_que_propriété"><code>hasOwnProperty()</code> en tant que propriété</h3> + +<p>JavaScript ne protège pas le nom de propriété <code>hasOwnProperty</code>, ainsi il est possible qu'un objet puisse avoir une propriété avec ce nom, il sera donc nécessaire d'utiliser une version externe de la méthode pour obtenir des résultats corrects.</p> + +<pre class="brush: js">var toto = { + hasOwnProperty: function() { + return false; + }, + truc: 'Voici les dragons' +}; + +toto.hasOwnProperty('truc'); // renvoie toujours false + +// On utilise une méthode d'un autre objet +// et on l'appelle avec this qui vaut toto +({}).hasOwnProperty.call(toto, 'truc'); // true + +// On peut aussi utiliser la propriété hasOwnProperty de Object prototype +Object.prototype.hasOwnProperty.call(toto, 'truc'); // true +</pre> + +<p>La dernière version utilisée permet de ne pas créer d'objet supplémentaire.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.hasOwnProperty")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable et rattachement des propriétés</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Instructions/for...in", "for...in")}}</li> + <li>{{jsxref("Opérateurs/L_opérateur_in", "in")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Retours_sur_héritage">Guide JavaScript : Retours sur l'héritage</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/index.html b/files/fr/web/javascript/reference/objets_globaux/object/index.html new file mode 100644 index 0000000000..bc750b5652 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/index.html @@ -0,0 +1,184 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Objets_globaux/Object +tags: + - Constructeur + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>Le constructeur <code><strong>Object</strong></code> crée un wrapper d'objet.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">// Initialisateur d'objet ou littéral { [ <em>paireNomValeur1</em>[, <em>paireN<var>omValeur2</var></em>[, + ...<em>paireNomValeurN</em>] ] ] } + +// Appelé comme un constructeur +new Object([<var>valeur</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>paireNomValeur1, paireNomValeur2, ... paireNomValeur<em>N</em></code></dt> + <dd>Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:).</dd> + <dt><code>valeur</code></dt> + <dd>Toute valeur.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Le constructeur <code>Object</code> crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur.</p> + +<p>Lorsqu'il n'est pas appelé dans un contexte constructeur, <code>Object</code> se comporte de façon identique à <code>new Object()</code>.</p> + +<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">initialisateur d'objet / syntaxe de littéral</a>.</p> + +<h2 id="Propriétés_du_constructeur_Object">Propriétés du constructeur <code>Object</code></h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>A une valeur de 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Permet l'ajout de propriétés à tous les objets de type Object.</dd> +</dl> + +<h2 id="Méthodes_du_constructeur_Object">Méthodes du constructeur <code>Object</code></h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Ajoute à un objet la propriété nommée décrite par le descripteur donné.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés.</dd> + <dt>{{jsxref("Object.entries()")}}</dt> + <dd>Retourne un tableau contenant les paires <code>[clé, valeur]</code> des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété.</dd> + <dt>{{jsxref("Object.fromEntries()")}}</dt> + <dd>Renvoie un nouvel objet à partir d'un itérable contenant des paires de clés-valeurs (l'opération duale de {{jsxref("Object.entries")}}).</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Retourne un descripteur de propriété pour une propriété nommée d'un objet.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt> + <dd>Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables <strong>propres</strong> de l'objet donné.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Retourne le prototype de l'objet indiqué.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Détermine si deux valeurs sont la même valeur. Considère comme égales toutes les valeurs NaN (ce qui diffère à la fois de la Comparaison d'Égalité Abstraite et de la Comparaison d'Égalité Stricte).</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Détermine si l'extension d'un objet est permise.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Détermine si un objet a été gelé.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Détermine si un objet est scellé.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Retourne un tableau contenant les noms de toutes les propriétés énumérables <strong>propres</strong> de l'objet donné.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Empêche toute extension de l'objet.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Empêche un autre code de détruire les propriétés d'un objet.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Définit le prototype d'un objet (c-à-d, la propriété interne <code>[[Prototype]]</code>).</dd> + <dt>{{jsxref("Object.values()")}}</dt> + <dd>Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères.</dd> +</dl> + +<h2 id="Instances_d'Object_et_objet_de_prototype_Object">Instances d'<code>Object</code> et objet de prototype <code>Object</code></h2> + +<p>Tous les objets en JavaScript descendent d'<code>Object</code> ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du <code>constructor</code> et fournissent leurs propres méthodes <code>toString()</code>. Les changements apportés à l'objet de prototype <code>Object</code> sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes.</p> + +<h3 id="Propriétés">Propriétés</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Méthodes">Méthodes</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Suppression_d'une_propriété_dans_un_objet">Suppression d'une propriété dans un objet</h2> + +<p>Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres propriétés (par exemple, comme <a href="/fr-Fr/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a>). Pour ce faire, il faut utiliser l'<a href="/fr-Fr/docs/Web/JavaScript/Reference/Operators/delete">opérateur delete</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_d'Object_avec_les_types_undefined_et_null">Utilisation d'<code>Object</code> avec les types <code>undefined</code> et <code>null</code></h3> + +<p>Les exemples suivants stockent un <code>Object</code> vide dans <code>o</code> :</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Utilisation_d'Object_pour_créer_des_objets_Boolean">Utilisation d'<code>Object</code> pour créer des objets <code>Boolean</code></h3> + +<p>Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans <code>o</code> :</p> + +<pre class="brush: js">// Équivalent à : o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// Équivalent à : o = new Boolean(false); +var o = new Object(Boolean()); + +</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">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée par JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Ajout de Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">La table de compatibilité de cette page a été générée à partir de données structurées. Si vous souhaitez contribuer à ces données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Object")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">Initialisateur d'objet</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/is/index.html b/files/fr/web/javascript/reference/objets_globaux/object/is/index.html new file mode 100644 index 0000000000..6e909d1fdb --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/is/index.html @@ -0,0 +1,130 @@ +--- +title: Object.is() +slug: Web/JavaScript/Reference/Objets_globaux/Object/is +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.is()</strong></code> permet de déterminer si deux valeurs sont <a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">les mêmes</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Object.is(<var>value1</var>, <var>value2</var>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>valeur1</code></dt> + <dd>La première valeur à comparer.</dd> + <dt><code>valeur2</code></dt> + <dd>La seconde valeur à comparer.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un booléen indiquant si les arguments ont la même valeur.</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.is()</code> permet de déterminer si deux valeurs sont <a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">identiques</a>. Deux valeurs sont considérées identiques si :</p> + +<ul> + <li>elles sont toutes les deux {{jsxref("undefined")}}</li> + <li>elles sont toutes les deux {{jsxref("null")}}</li> + <li>elles sont toutes les deux <code>true</code> ou toutes les deux <code>false</code></li> + <li>elles sont des chaînes de caractères de la même longueur et avec les mêmes caractères (dans le même ordre)</li> + <li>elles sont toutes les deux le même objet</li> + <li>elles sont des nombres et + <ul> + <li>sont toutes les deux égales à <code>+0</code></li> + <li>sont toutes les deux égales à <code>-0</code></li> + <li>sont toutes les deux égales à {{jsxref("NaN")}}</li> + <li>sont non-nulles, ne sont pas <code>NaN</code> et ont toutes les deux la même valeur</li> + </ul> + </li> +</ul> + +<p>Attention, ce n'est pas la même égalité qu'avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}}. L'opérateur == applique différentes conversions à chaque opérande (si ils ne sont pas du même type) avant de tester l'égalité (d'où le comportement <code>"" == false</code> qui donne <code>true</code>), <code>Object.is</code> ne convertit aucune des deux valeurs.</p> + +<p>Cette égalité est également différente de l'égalité stricte qu'on peut avoir avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}. L'opérateur === (et également l'opérateur ==) considère que <code>-0</code> et <code>+0</code> sont égales et que {{jsxref("Number.NaN")}} n'est pas égal à {{jsxref("NaN")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush:js;">Object.is("toto", "toto"); // true +Object.is(window, window); // true + +Object.is("toto", "truc"); // false +Object.is([], []); // false + +var toto = {a: 1}; +var truc = {a: 1}; +Object.is(toto, toto); // true +Object.is(toto, truc); // false + +Object.is(null, null); // true + +// Cas aux limites (cas spéciaux) +Object.is(0, -0); // false +Object.is(-0, -0); // true +Object.is(NaN, 0/0); // true</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<pre class="brush:js">if (!Object.is) { + Object.is = function(v1, v2) { + // Algorithme SameValue + if (v1 === v2) { //Étapes 1-5, 7-10 + //Étapes 6.b-6.b +0 !=-0 + return v1 !== 0 || 1 / v1 === 1 / v2; + } else { + //Étapes 6.a: NaN == NaN + return v1 !== v1 && v2 !== v2; + } + }; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</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.is")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Guide/Égalité_en_JavaScript">Guide JavaScript : L'égalité en JavaScript</a> qui illustre les trois manières de comparer en JavaScript</li> + <li>{{jsxref("Opérateurs/Opérateurs_de_comparaison","Les opérateurs de comparaison","",1)}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html new file mode 100644 index 0000000000..ae82dd912f --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html @@ -0,0 +1,114 @@ +--- +title: Object.isExtensible() +slug: Web/JavaScript/Reference/Objets_globaux/Object/isExtensible +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>Object.isExtensible()</code></strong> permet de déterminer si un objet est extensible (c'est-à-dire qu'on peut lui ajouter de nouvelles propriétés).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isextensible.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.isExtensible(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite vérifier s'il est extensible.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un booléen qui indique si oui ou non l'objet passé en argument peut être étendu.</p> + +<h2 id="Description">Description</h2> + +<p>Par défaut, les objets sont extensibles, on peut leur ajouter de nouvelles propriétés (et pour les moteurs qui supportent {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}, leur propriété __proto__ peut être modifiée). Un objet peut devenir non-extensible en utilisant les méthodes {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, ou {{jsxref("Object.freeze()")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// Les nouveaux objets sont extensibles. +var vide = {}; +Object.isExtensible(vide); // true + +// ...mais on peut les rendre non-extensibles. +Object.preventExtensions(vide); +Object.isExtensible(vide); // false + +// Les objets scellés sont, par définition, non-extensibles. +var scellé = Object.seal({}); +Object.isExtensible(scellé); // false + +// Les objets gelés sont également, par définition, non-extensibles. +var gelé = Object.freeze({}); +Object.isExtensible(gelé); // false +</pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire non-extensible, la méthode renverra <code>false</code>.</p> + +<pre class="brush: js">Object.isExtensible(1); +// TypeError: 1 n'est pas un objet (code ES5) + +Object.isExtensible(1); +// false (code ES2015) +</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.13', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</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.isExtensible")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.isExtensible()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html new file mode 100644 index 0000000000..ceb8c242ef --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html @@ -0,0 +1,177 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Reference/Objets_globaux/Object/isFrozen +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.isFrozen()</strong></code>permet de déterminer si un objet est {{jsxref("Object.freeze()", "gelé", "", 1)}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.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.isFrozen(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite vérifier s'il est gelé.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un booléen qui indique si oui ou non l'objet passé en argument est gelé.</p> + +<h2 id="Description">Description</h2> + +<p>Un objet est gelé si et seulement s'il n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}}, que toutes ses propriétés sont non-configurables et que ses propriétés de données (c'est-à-dire les propriétés qui ne sont pas des accesseurs ou des mutateurs) sont non-accessibles en écriture.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// Un objet nouvellement créé est extensible +// et est donc dégelé +Object.isFrozen({}); // false + +// Un objet vide et non extensible est gelé +var videGelé = Object.preventExtensions({}); +Object.isFrozen(videGelé); // true + +// Un nouvel objet avec une propriété est +// extensible et donc dégelé +var uneProp = { p: 42 }; +Object.isFrozen(uneProp); // false + +// Si on empêche d'étendre un objet non vide, +// cela ne le rend pas gelé car la propriété +// est toujours configurable (et accessible +// en écriture) +Object.preventExtensions(uneProp); +Object.isFrozen(uneProp); // false + +// ...si on supprime la seule propriété existante +// en revanche, on a bien un objet gelé +delete uneProp.p; +Object.isFrozen(uneProp); // true + +// Un objet non-extensible et avec une propriété +// non-accessible en écriture mais toujours configurable +// n'est pas gelé +var nonWritable = { e: "plep" }; +Object.preventExtensions(nonWritable); + +Object.defineProperty(nonWritable, "e", { writable: false }); +// on la rend non accessible en écriture + +Object.isFrozen(nonWritable); // false + +// Si on rend la propriété non-configurable, +// l'objet devient gelé + +Object.defineProperty(nonWritable, "e", { configurable: false }); +// on la rend non-configurable + +Object.isFrozen(nonWritable) === true); + +// Un objet non-extensible avec une propriété non-configurable +// mais accessible en écriture n'est pas gelé +var nonConfigurable = { release: "the kraken!" }; +Object.preventExtensions(nonConfigurable); +Object.defineProperty(nonConfigurable, "release", { configurable: false }); +Object.isFrozen(nonConfigurable); // false + +// Si cette propriété devient non accessible +// en écriture, l'objet est gelé +Object.defineProperty(nonConfigurable, "release", { writable: false }); +Object.isFrozen(nonConfigurable); // true + +// Un objet non-extensible avec un accesseur +// configurable n'est pas gelé +var accesseur = { get manger() { return "miam"; } }; +Object.preventExtensions(accesseur); +Object.isFrozen(accesseur); // false + +// ...si on rend la propriété non-configurable, +// l'objet est gelé. +Object.defineProperty(accesseur, "manger", { configurable: false }); +Object.isFrozen(accesseur); // true + +// La façon la plus simple est d'utiliser la +// méthode Object.freeze +var gelé = { 1: 81 }; +Object.isFrozen(gelé); // false +Object.freeze(gelé); +Object.isFrozen(gelé); // true + +// Par définition, un objet gelé est non-extensible. +Object.isExtensible(gelé); // false + +// Par définition, un objet gelé est scellé. +Object.isSealed(gelé); // true +</pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais est d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme s'il était un objet gelé et la méthode renverra <code>true</code>.</p> + +<pre class="brush: js">Object.isFrozen(1); +// TypeError: 1 n'est pas un objet (code ES5) + +Object.isFrozen(1); +// true (code ES2015) +</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.12', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée par JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</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.isFrozen")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html new file mode 100644 index 0000000000..2777d794c2 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html @@ -0,0 +1,126 @@ +--- +title: Object.prototype.isPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Object/isPrototypeOf +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference + - isPrototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>isPrototypeOf()</strong></code> permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.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 envoyez-nous une <em>pull request.</em></p> + +<div class="note"> +<p><strong>Note :</strong> <code>isPrototypeOf()</code> est différent de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}}. Dans l'expression "<code>object instanceof AFunction</code>", on compare la chaîne de prototypes d'<code>object</code> avec <code>AFunction.prototype</code> et non avec <code>AFunction</code>.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>prototypeObj</var>.isPrototypeOf(<var>objet</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>objet</code></dt> + <dd>L'objet dont la chaîne de prototypes sera parcourue.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué.</p> + +<h3 id="Erreurs_déclenchées">Erreurs déclenchées</h3> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Une exception {{jsxref("TypeError")}} est déclenchée si <code>prototypeObj</code> est <code>undefined</code> ou <code>null</code>.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>La méthode isPrototypeOf () vous permet de vérifier si un objet existe ou non dans la chaîne de prototypes d'un autre objet.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Cet exemple montre que <code>Bidule.prototype</code>, <code>Truc.prototype</code>, <code>Machin.prototype</code> et <code>Object.prototype</code> font bien partie de la chaîne de prototype pour l'objet <code>bidule</code> :</p> + +<pre class="brush: js">function Machin() {} +function Truc() {} +function Bidule() {} + +Truc.prototype = Object.create(Machin.prototype); +Bidule.prototype = Object.create(Truc.prototype); + +var bidule = new Bidule(); + +console.log(Bidule.prototype.isPrototypeOf(bidule)); // true +console.log(Truc.prototype.isPrototypeOf(bidule)); // true +console.log(Machin.prototype.isPrototypeOf(bidule)); // true +console.log(Object.prototype.isPrototypeOf(bidule)); // true +</pre> + +<p>La méthode <code>isPrototypeOf()</code>, avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet.</p> + +<p>Par exemple, vérifier que <code>bidule</code> descend bien de <code>Machin.prototype</code> :</p> + +<pre class="brush: js">if (Toto.prototype.isPrototypeOf(bidule)) { + // effectuer quelque chose de sûr +} +</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">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">La table de compatibilité de cette page a été générée à partir de données structurées. Si vous souhaitez contribuer à ces données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyee-nous une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html b/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html new file mode 100644 index 0000000000..750efbf49f --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html @@ -0,0 +1,137 @@ +--- +title: Object.isSealed() +slug: Web/JavaScript/Reference/Objets_globaux/Object/isSealed +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.isSealed()</strong></code> permet de déterminer si un objet est scellé.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-issealed.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.isSealed(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite savoir s'il est scellé.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un booléen indiquant si l'objet est scellé ou non.</p> + +<h2 id="Description">Description</h2> + +<p>Renvoie <code>true</code> si l'objet est scellé, <code>false</code> sinon. Un objet scellé est un objet qui n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}} et dont toutes les propriétés sont non-configurables (on ne peut donc pas les retirer, en revanche on peut avoir un droit de modification).</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// Par défaut, les objets ne sont pas scellés +var vide = {}; +Object.isSealed(vide); // false + +// Si un objet vide est rendu non-extensible, +// il est scellé +Object.preventExtensions(vide); +Object.isSealed(vide); // true + +// Ce qui n'est pas vrai pour un objet non-vide, +// sauf si toutes ses propriétés sont non-configurables +var avecPropriétés = { pif: "paf pouf" }; +Object.preventExtensions(avecPropriétés); +Object.isSealed(avecPropriétés); // false + +// Si on rend les propriétés non configurables, +// l'objet est scellé +Object.defineProperty(avecPropriétés, "pif", { configurable: false }); +Object.isSealed(avecPropriétés); // true + +// La méthode la plus simple est d'utiliser Object.seal. +var scellé = {}; +Object.seal(scellé); +Object.isSealed(scellé); // true + +// Un objet scellé est, par définition, non-extensible +Object.isExtensible(scellé); // false + +// Un objet scellé peut être gelé mais ce n'est pas +// nécessaire. gelé signifie que les propriétés ne +// peuvent pas être modifiées +Object.isFrozen(scellé); // true + +var s2 = Object.seal({ p: 3 }); +Object.isFrozen(s2); // false ("p" est toujours modifiable) + +var s3 = Object.seal({ get p() { return 0; } }); +// pour les accesseurs, seule l'accès en +// configuration est important +Object.isFrozen(s3); // true </pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme si c'était un objet scellé et la méthode renverra <code>true</code>.</p> + +<pre class="brush: js">Object.isSealed(1); +// TypeError: 1 is not an object (ES5 code) + +Object.isSealed(1); +// true (ES2015 code) +</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.11', 'Object.isSealed')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</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.isSealed")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html new file mode 100644 index 0000000000..4cd9891d66 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html @@ -0,0 +1,129 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Objets_globaux/Object/keys +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.keys()</strong></code> renvoie un tableau contenant les noms des propriétés propres à un objet (qui ne sont pas héritées via la chaîne de prototypes) et qui sont énumérables. L'ordre de ce tableau est le même que celui obtenu par une boucle {{jsxref("Instructions/for...in","for...in")}} (à la différence qu'une boucle for-in liste également les propriétés héritées).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-keys.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.keys(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite lister les propriétés propres et énumérables.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un tableau de chaînes de caractères qui sont les noms des propriétés énumérables de l'objet passé en argument.</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.keys()</code> renvoie un tableau dont les éléments sont les chaînes de caractères des noms des propriétés propres et énumérables d<code>'obj</code>. L'ordre des propriétés obtenu est le même que celui obtenu lorsqu'on boucle manuellement sur les propriétés de l'objet.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var arr = ["a", "b", "c"]; +console.log(Object.keys(arr)); +// affichera ['0', '1', '2'] + +// un objet semblable à un tableau +var obj = { 0 : "a", 1 : "b", 2 : "c"}; +console.log(Object.keys(obj)); +// affichera ['0', '1', '2'] + +// un objet semblable à un tableau avec +// un ordre de clé aléatoire +var an_obj = { 100: "a", 2: "b", 7: "c"}; +console.log(Object.keys(an_obj)); +// affichera ['2', '7', '100'] + +// getToto est une propriété non énumérable +var monObjet = Object.create({}, { + getToto : { + value : function () { + return this.toto } + } + }); +monObjet.toto = 1; + +console.log(Object.keys(monObjet)); +// affichera ['toto'] +</pre> + +<p>Si on souhaite lister toutes les propriétés, y compris celles qui ne sont pas énumérables, on pourra utiliser {{jsxref("Object.getOwnPropertyNames()")}}.</p> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015 (ES6), un argument qui n'est pas un objet sera d'abord converti en objet.</p> + +<pre class="brush: js">Object.keys("toto"); +// TypeError: "toto" n'est pas un objet (code ES5) + +Object.keys("toto"); +// ["0", "1", "2", "3"] (code ES2015)</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale.<br> + Implémentée avec JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</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.keys")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et possession des propriétés</a></li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html new file mode 100644 index 0000000000..fcb6bc6f0b --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html @@ -0,0 +1,91 @@ +--- +title: Object.prototype.__lookupGetter__() +slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupGetter +tags: + - Déprécié + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>La méthode <code><strong>__lookupGetter__</strong></code> renvoie la fonction liée comme accesseur d'une propriété donnée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.__lookupGetter__(<var>sprop</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>sprop</code></dt> + <dd>Une chaîne de caractères qui contient le nom de la propriété dont on souhaite obtenir l'accesseur (<em>getter</em>).</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La fonction qui est l'accesseur lié à la propriété indiquée.</p> + +<h2 id="Description">Description</h2> + +<p>Si un accesseur a été défini pour une propriété, il n'est pas possible d'obtenir la fonction utilisée en accédant à la propriété car on obtiendrait la valeur de retour de l'accesseur au lieu de l'accesseur lui-même. <code>__lookupGetter__</code> permet de récupérer la valeur de la fonction pour l'accesseur.</p> + +<p>Cette méthode ne doit plus être utilisée et il est possible de la remplacer de façon standard en utilisant : {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var obj = { + get toto() { + return Math.random() > 0.5 ? 'toto' : 'truc'; + } +}; + + +// Méthode non-standard et dépréciée +obj.__lookupGetter__('toto'); +// (function() { return Math.random() > 0.5 ? 'toto' : 'truc'; }) + + +// Méthode standard +Object.getOwnPropertyDescriptor(obj, "toto").get; +// (function() { return Math.random() > 0.5 ? 'toto' : 'truc'; }) +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</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.lookupGetter")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li> + <li>L'opérateur {{jsxref("Fonctions/get", "get")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li> + <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Définir des <em>getters</em> et <em>setters</em></a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html new file mode 100644 index 0000000000..0c67d3c5f8 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html @@ -0,0 +1,91 @@ +--- +title: Object.prototype.__lookupSetter__() +slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupSetter +tags: + - Déprécié + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ +--- +<div>{{JSRef}}{{deprecated_header}}</div> + +<p>La méthode <code><strong>__lookupSetter__</strong></code> renvoie la fonction définie comme mutateur pour une propriété donnée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.__lookupSetter__(<var>sprop</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>sprop</code></dt> + <dd>Une chaîne qui contient le nom de la propriété dont on souhaite obtenir le mutateur correspondant.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La fonction associée comme mutateur à la propriété indiquée.</p> + +<h2 id="Description">Description</h2> + +<p>Si un mutateur a été défini pour une propriété, on ne peut pas l'obtenir en faisant référence à la propriété directement. <code>__lookupSetter__</code> peut être utilisée pour obtenir une référence vers la fonction utilisée comme mutateur.</p> + +<p>Cette méthode ne doit plus être utilisée et peut être remplacée avec la méthodes standard {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var obj = { + set toto(valeur) { + this.truc = value; + } +}; + + +// Méthode non-standard et dépréciée +obj.__lookupSetter__('toto') +// (function(valeur) { this.truc = valeur; }) + + +// Méthode standard +Object.getOwnPropertyDescriptor(obj, "toto").set; +// (function(valeur) { this.truc = valeur; }) +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</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.lookupSetter")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li> + <li>L'opérateur {{jsxref("Fonctions/set", "set")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li> + <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Utiliser des <em>getters</em> et <em>setters</em></a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/nosuchmethod/index.html b/files/fr/web/javascript/reference/objets_globaux/object/nosuchmethod/index.html new file mode 100644 index 0000000000..bd87292bc5 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/nosuchmethod/index.html @@ -0,0 +1,76 @@ +--- +title: Object.prototype.__noSuchMethod__ +slug: Web/JavaScript/Reference/Objets_globaux/Object/noSuchMethod +tags: + - JavaScript + - Object + - Obsolete + - Propriété + - Prototype + - Reference +translation_of: Archive/Web/JavaScript/Object.noSuchMethod +--- +<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko43")}}</div> + +<p>La propriété <code><strong>__noSuchMethod__</strong></code> était utilisée pour faire référence à une fonction qui devait être utilisée lorsqu'on appelait une méthode inexistante d'un objet. Cette fonction n'est plus disponible.</p> + +<p>Si <code><strong>__noSuchMethod__</strong></code> a été abandonnée, la spécification ECMAScript 2015 (ES6) fournit les objets <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy">Proxy</a></code> qui permettent de réaliser ce qui pouvait être fait avec cette propriété (et plus encore).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.__noSuchMethod__ = <var>fun</var></pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>fun</code></dt> + <dd>Une fonction de la forme</dd> + <dd> + <pre class="brush: js">function (<var>id</var>, <var>args</var>) { . . . }</pre> + + <dl> + <dt><code>id</code></dt> + <dd>Le nom de la méthode qui n'est pas définie pour l'objet et qui a été appelée.</dd> + <dt><code>args</code></dt> + <dd>Le tableau d'arguments passé à la méthode.</dd> + </dl> + </dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Par défaut, lorsqu'on appelle une méthode qui n'existe pas pour un objet, cela lève une exception {{jsxref("TypeError")}}. Ce comportement peut être modifié en définissant une fonction pour la propriété <code>__noSuchMethod__</code>. Cette fonction prend en compte deux arguments : le premier qui est le nom de la méthode non définie qui a été appelée et le second qui correspond au tableau des arguments passés lors de l'appel. Le deuxième argument est bien un tableau (il hérite de {{jsxref("Array.prototype")}}) et n'est pas un objet semblable à un tableau comme l'objet {{jsxref("Fonctions/arguments","arguments")}}.</p> + +<p>Si cette méthode ne peut être appelée, soit parce qu'elle vaut <code>undefined</code> (sa valeur par défaut), soit parce qu'elle a été supprimée ou définie avec une valeur qui n'est pas une fonction, le moteur JavaScript reprendra le comportement par défaut et renverra des exceptions <code>TypeError</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_test_simple_avec___noSuchMethod__">Un test simple avec <code>__noSuchMethod__</code></h3> + +<pre class="brush: js">var o = { + __noSuchMethod__: function(id, args) { + console.log(id, '(' + args.join(', ') + ')'); + } +}; + +o.toto(1, 2, 3); +o.truc(4, 5); +o.machin(); + +// affichera +// toto (1, 2, 3) +// truc (4, 5) +// machin () +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété ne fait partie d'aucune spécification et a été retirée : voir le {{bug(683218)}}.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.noSuchMethod")}}</p> +</div> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html b/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html new file mode 100644 index 0000000000..eb0e3ec8c0 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html @@ -0,0 +1,154 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Reference/Objets_globaux/Object/observe +tags: + - JavaScript + - Méthode + - Object + - Obsolete + - Reference +translation_of: Archive/Web/JavaScript/Object.observe +--- +<div>{{JSRef}}{{obsolete_header}}</div> + +<p>La méthode <strong><code>Object.observe()</code></strong> est utilisée afin d'observer de façon asynchrone les modifications apportées à un objet. Cette méthode fournit un flux d'information qui correspondent aux changement apportés à l'objet, dans l'ordre dans lequel ils se sont produits. Cependant, cette API a été dépréciée et retirée des navigateurs. À la place, il est préférable d'utiliser l'objet {{jsxref("Proxy")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Object.observe(<var>obj</var>, <var>callback</var>[,<var>listeChangements</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet qu'on souhaite observer.</dd> + <dt><code>callback</code></dt> + <dd>La fonction qui est appelée à chaque fois qu'un changement est effectué. Elle est invoquée avec l'argument suivant : + <dl> + <dt><code>changes</code></dt> + <dd>Un tableau d'objets dont chaque élément représente une modification. Les propriétés de ces objets sont : + <ul> + <li><strong><code>name </code></strong>: Le nom de la propriété qui a été modifiée.</li> + <li><strong><code>object</code></strong> : L'objet modifié une fois le changement apporté.</li> + <li><strong><code>type</code></strong> : Une chaîne de caractères qui indique le type de modification qui a eu lieu. Elle peut valoir <code>"add"</code>, <code>"update"</code>, ou <code>"delete"</code>.</li> + <li><strong><code>oldValue </code></strong>: Propriété présente uniquement pour les types <code>"update"</code> et <code>"delete"</code>. Elle correspond à la valeur de l'objet avant la modification.</li> + </ul> + </dd> + </dl> + </dd> + <dt><code>listeChangements</code></dt> + <dd>La liste des types de changements qu'on souhaite observer sur l'objet donné avec la fonction de retour donnée. Par défaut, si cet argument n'est pas utilisé, le tableau utilisé sera <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet qu'on souhaite observer.</p> + +<h2 id="Description">Description</h2> + +<p>La fonction <code>callback</code> est appelée chaque fois qu'une modification est apportée à <code>obj</code> avec comme argument le tableau listant l'ensemble des modifications, dans l'ordre dans lequel elles se sont produites.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Enregistrer_les_différents_types_de_modifications">Enregistrer les différents types de modifications</h3> + +<pre class="brush: js">var obj = { + toto: 0, + truc: 1 +}; + +Object.observe(obj, function(changes) { + console.log(changes); +}); + +obj.machin = 2; +// [{name: 'machin', object: , type: 'add'}] + +obj.toto = 'coucou'; +// [{name: 'toto', object: , type: 'update', oldValue: 0}] + +delete obj.machin; +// [{name: 'machin', object: , type: 'delete', oldValue: 2}] + +Object.defineProperty(objet,'toto', {writable: false}); +// [{name: 'toto', object: <obj>, type: 'reconfigure'}] + +Object.setPrototypeOf(obj, {}); +// [{name: '__proto__',object: <obj>, type: 'setPrototype', oldValue: <prototype>}] + +Object.seal(obj); +// [ +// {name: 'toto', object: <obj>, type: 'reconfigure'}, +// {name: 'machin', object: <obj>, type: 'reconfigure'}, +// {object: <obj>, type: 'preventExtensions'} +// ] +</pre> + +<h3 id="Lier_des_données">Lier des données</h3> + +<pre class="brush: js">// Un objet représentant un utilisateur +var utilisateur = { + id: 0, + nom: 'Brendan Eich', + titre: 'Mr.' +}; + +// Une fonction de salutation +function majSalutation() { + user.greeting = 'Bonjour, ' + utilisateur.titre + ' ' + utilisateur.nom + ' !'; +} +majSalutation(); + +Object.observe(utilisateur, function(changes) { + changes.forEach(function(change) { + // Pour chaque modification qui porte sur le nom ou le titre + // on met à jour la salutation + if (change.name === 'nom' || change.name === 'titre') { + majSalutation(); + } + }); +}); +</pre> + +<h3 id="Exemple_Enregistrer_des_changements_personnalisés">Exemple : Enregistrer des changements personnalisés</h3> + +<pre class="brush: js">// On représente un point sur un plan bidimensionnel +var point = {x: 0, y: 0, distance: 0}; + +function setPosition(pt, x, y) { + // On effectue un changement personnalisé + Object.getNotifier(pt).performChange('reposition', function() { + var exDistance = pt.distance; + pt.x = x; + pt.y = y; + pt.distance = Math.sqrt(x * x + y * y); + return {exDistance: exDistance}; + }); +} + +Object.observe(point, function(changes) { + console.log('Distance modifiée : ' + (point.distance - changes[0].exDistance)); +}, ['reposition']); + +setPosition(point, 3, 4); +// Distance modifiée : 5</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Proposition de spécification (<em>straw man proposal</em>).</a></p> + +<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.observe")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> + <li><a href="https://esdiscuss.org/topic/an-update-on-object-observe">Retrait de la proposition pour <code>Object.Observer</code> (en anglais)</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/parent/index.html b/files/fr/web/javascript/reference/objets_globaux/object/parent/index.html new file mode 100644 index 0000000000..dfbda99f34 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/parent/index.html @@ -0,0 +1,42 @@ +--- +title: Object.prototype.__parent__ +slug: Web/JavaScript/Reference/Objets_globaux/Object/Parent +tags: + - JavaScript + - Object + - Obsolete + - Propriété + - Prototype + - Reference +translation_of: Archive/Web/JavaScript/Object.parent +--- +<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko2")}}</div> + +<p>La propriété <strong><code>__parent__</code></strong> était utilisée pour pointer vers le contexte d'un objet mais elle a été supprimée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.__parent__</pre> + +<h2 id="Description">Description</h2> + +<p>Pour les objets de plus haut niveau, on aurait eu <code>window</code> par exemple.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété ne fait partie d'aucune spécification.</p> + +<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.parent")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">Article : SpiderMonkey change du jour: the special __parent__ property has been removed</a> (en anglais)</li> + <li><a href="/fr/docs/Components.utils.getGlobalForObject">Components.utils.getGlobalForObject</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html b/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html new file mode 100644 index 0000000000..8b86cba0a4 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html @@ -0,0 +1,141 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.preventExtensions()</strong></code> permet d'empêcher l'ajout de nouvelles propriétés à un objet (i.e. d'étendre l'objet grâce à de nouvelles caractéristiques).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-preventextensions.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.preventExtensions(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet qu'on souhaite rendre non-extensible.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet rendu non-extensible.</p> + +<h2 id="Description">Description</h2> + +<p>Un objet est extensible si on peut lui ajouter de nouvelles propriétés. <code>Object.preventExtensions()</code> marque un objet et le rend non-extensible. Ainsi, cet objet ne pourra avoir d'autres propriétés que celles à l'instant où il a été marqué comme non-extensible. Attention, les propriétés existantes d'un objet non-extensible peuvent toujours être supprimées. Toute tentative d'ajout de nouvelles propriétés à un objet non-extensible échouera, soit de façon silencieuse, soit en levant une exception {{jsxref("TypeError")}} (le plus souvent en {{jsxref("Strict_mode", "mode strict", "", 1)}}).</p> + +<p><code>Object.preventExtensions()</code> n'empêche que l'ajout des propriétés directement sur l'objet, il n'empêche pas d'ajouter des propriétés sur le prototype.</p> + +<p>Cette méthode rend la propriété interne <code>[[prototype]]</code> de la cible immuable, toute réaffectation de <code>[[prototype]]</code> déclenchera une exception <code>TypeError</code>. Ce comportement est spécifique à la propriété interne <code>[[prototype]]</code>, les autres propriétés de la cible restent modifiables.</p> + +<p>Si, grâce à cette méthode, on peut rendre un objet non-extensible, il n'existe aucune méthode pour effectuer l'action inverse (rendre un objet non-extensible à nouveau extensible).</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// Object.preventExtensions renvoie l'objet +// non-extensible. +var obj = {}; +var obj2 = Object.preventExtensions(obj); +obj === obj2; // true + +// Par défaut, les objets sont extensibles. +var vide = {}; +Object.isExtensible(vide); // true + +// ...mais cela peut être modifié. +Object.preventExtensions(vide); +Object.isExtensible(vide) === false); + +// Object.defineProperty lève une exception +// lorsqu'on tente d'ajouter de nouvelles propriétés +var nonExtensible = { removable: true }; +Object.preventExtensions(nonExtensible); + +Object.defineProperty(nonExtensible, 'nouvelle', { value: 8675309 }); +/ lève une TypeError + +// En mode strict, toute tentative d'ajout +// lève une exception TypeError +function échec() { + 'use strict'; + nonExtensible.nouvelleProp = 'ÉCHEC'; // +} +échec(); + +// EXTENSION (ne fonctionne que pour les moteurs +// qui utilisent __proto__ ) : +// Le prototype (via __proto__) d'un objet non-extensible +// n'est pas modifiable : +var fixed = Object.preventExtensions({}); +fixed.__proto__ = { oh: 'hey' }; // lève une TypeError +</pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme un objet ordinaire qui n'est pas extensible et la méthode renverra cette valeur.</p> + +<pre class="brush: js">Object.preventExtensions(1); +// TypeError : 1 n'est pas un object (code ES5) + +Object.preventExtensions(1); +// 1 (code ES2015) +</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.10', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</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.preventExtensions")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html b/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html new file mode 100644 index 0000000000..d1caefe8c3 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html @@ -0,0 +1,150 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>propertyIsEnumerable()</strong></code> renvoie un booléen qui indique si la propriété donnée est énumérable.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.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"><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Le nom de la propriété dont on souhaite savoir si elle est énumérable ou non.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un booléen qui indique si la propriété passée en argument est énumérable.</p> + +<h2 id="Description">Description</h2> + +<p>Chaque objet possède une méthode <code>propertyIsEnumerable</code>. Cette méthode est utilisée afin de savoir s'il est possible d'énumérer la propriété donnée au moyen d'une boucle {{jsxref("Instructions/for...in", "for...in")}}. Cela concerne uniquement les propriétés propres à l'objet (celles qui ne sont pas héritées via la chaîne de prototypes). Si un objet ne possède pas la propriété, cette méthode renverra <code>false</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_propertyIsEnumerable">Utiliser <code>propertyIsEnumerable</code></h3> + +<p>Dans l'exemple qui suit, on illustre comment utiliser <code>propertyIsEnumerable</code> sur les objets et tableaux :</p> + +<pre class="brush: js">var o = {}; +var a = []; +o.prop = 'est énumérable'; +a[0] = 'est énumérable'; + +o.propertyIsEnumerable('prop'); // renvoie true +a.propertyIsEnumerable(0); // renvoie true +</pre> + +<h3 id="Objets_natifs_et_objets_définis_par_l'utilisateur">Objets natifs et objets définis par l'utilisateur</h3> + +<p>Dans l'exemple ci-dessous, on illustre l'énumérabilité des propriétés des objets natifs et celle des objets tiers, définis dans les scripts :</p> + +<pre class="brush: js">var a = ['est énumérable']; + +a.propertyIsEnumerable(0); // renvoie true +a.propertyIsEnumerable('length'); // renvoie false + +Math.propertyIsEnumerable('random'); // renvoie false +this.propertyIsEnumerable('Math'); // renvoie false +</pre> + +<h3 id="Propriétés_héritées_et_propriétés_propres">Propriétés héritées et propriétés propres</h3> + +<pre class="brush: js">var a = []; +a.propertyIsEnumerable('constructor'); // renvoie false + +function premierConstructeur() { + this.propriete = 'non énumérable'; +} + +premierConstructeur.prototype.premiereMethode = function() {}; + +function secondConstructeur() { + this.methode = function methode() { return 'énumérable'; }; +} + +secondConstructeur.prototype = new premierConstructeur; +secondConstructeur.prototype.constructor = secondConstructeur; + +var o = new secondConstructeur(); +o.propArbitraire = 'is enumerable'; + +o.propertyIsEnumerable('propArbitraire'); // renvoie true +o.propertyIsEnumerable('méthode'); // renvoie true +o.propertyIsEnumerable('propriété'); // renvoie false + +o.propriete = 'énumérable'; + +o.propertyIsEnumerable('propriété'); // renvoie true + +// Ces instructions renvoient false car propertyIsEnumerable +// ne prend pas en compte la chaîne de prototypes +o.propertyIsEnumerable('prototype'); // renvoie false +o.propertyIsEnumerable('constructor'); // renvoie false +o.propertyIsEnumerable('premièreMéthode'); // renvoie false +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</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.propertyIsEnumerable")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable et rattachement des propriétés</a></li> + <li>{{jsxref("Instructions/for...in", "for...in")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html b/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html new file mode 100644 index 0000000000..937a9f564c --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html @@ -0,0 +1,162 @@ +--- +title: Object.prototype.__proto__ +slug: Web/JavaScript/Reference/Objets_globaux/Object/proto +tags: + - Deprecated + - ECMAScript 2015 + - JavaScript + - Object + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto +--- +<div>{{JSRef}}{{Deprecated_header}}</div> + +<div class="warning"> +<p><strong>Attention :</strong> Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le <code>[[Prototype]]</code> d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer <code>obj.__proto__ = ...</code>, mais peuvent concerner n'importe quel code pour n'importe quel objet dont <code>[[Prototype]]</code> a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le <code>[[Prototype]]</code> d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object.create()")}}.</p> +</div> + +<div class="warning"> +<p><strong>Attention :</strong> Bien que la propriété <code>Object.prototype.__proto__</code> soit déjà supportée dans la plupart des navigateurs à l'heure actuelle, son comportement n'a été standardisé que récemment avec la spécification ECMAScript 2015. Si vous avez besoin d'utiliser cette propriété dans des environnements antérieurs à ES2015, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}}.</p> +</div> + +<p>La propriété <code>__proto__</code> de {{jsxref("Object.prototype")}} est une propriété accesseur (un couple de fonction avec un accesseur (<em>getter</em>) et un mutateur (<em>setter</em>)) qui expose le <code>[[Prototype]]</code> interne (qui est soit un objet, soit {{jsxref("null")}}) de l'objet courant.</p> + +<p>L'utilisation de <code>__proto__</code> est sujet à controverse. Elle a été déconseillée par plusieurs personnes et n'avait jamais été incluse dans la spécification ECMAScript. Cependant, de nombreux navigateurs ont décidé de l'implémenter. À l'heure actuelle, la propriété <code>__proto__</code> a été standardisée avec la spécification ECMAScript 2015 et sera officiellement supportée à l'avenir. Une alternative à cette propriété peut être l'utilisation des méthodes {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} et {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}}. Cependant, modifier le <code>[[Prototype]]</code> d'un objet est toujours une opération lente qui doit être évitée le plus possible pour des raisons de performances.</p> + +<p>La propriété <code>__proto__</code> peut également être utilisée avec un littéral objet afin de définir le <code>[[Prototype]]</code> lors de la construction (ce qui en fait une alternative à {{jsxref("Object.create()")}}. Voir la page sur {{jsxref("Opérateurs/Initialisateur_objet","les initialisateurs d'objet","",1)}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var proto = <var>obj</var>.__proto__;</pre> + +<div class="note"> +<p><strong>Note :</strong> le nom de la propriété est composé de deux tirets bas, suivis de « proto », suivis par deux tirets bas (<em>underscores</em>)</p> +</div> + +<h2 id="Description">Description</h2> + +<p>L'accesseur <code>__proto__</code> expose la valeur du <code>[[Prototype]]</code> interne d'un objet.</p> + +<ul> + <li>Pour les objets créés via un littéral objet, cette valeur est {{jsxref("Object.prototype")}}.</li> + <li>Pour les objet créés via un littéral de tableau, cette valeur est {{jsxref("Array.prototype")}}.</li> + <li>Pour les fonctions, cette valeur est {{jsxref("Function.prototype")}}.</li> + <li>Pour les objets créés en utilisant <code>new fun</code>, avec <code>fun</code> un des constructeurs natif de fonctions, fournis par JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, etc.), cette valeur est <code>fun.prototype</code>.</li> + <li>Pour les objets créés en utilisant <code>new fun</code>, avec <code>fun</code> une function definie dans un script, cette valeur est la valeur de <code>fun.prototype</code> au moment où <code>new fun</code> est évaluée. (Ainsi, si on affecte une nouvelle valeur à <code>fun.prototype</code>, les instances crées précédemment conserveront leur <code>[[Prototype]]</code>, les objets créés par la suite bénéficieront de la nouvelle valeur pour leur <code>[[Prototype]]</code>.)</li> +</ul> + +<p>Le mutateur <code>__proto__</code> permet de changer le <code>[[Prototype]]</code> d'un objet. Cet objet doit être extensible selon {{jsxref("Object.isExtensible")}}, si ce n'est pas le cas, une exception {{jsxref("TypeError")}} sera renvoyée. La valeur fournie pour le nouveau prototype doit être un objet ou {{jsxref("null")}}. Toute autre valeur entraînera un échec silencieux.</p> + +<p>Pour plus d'éléments sur le fonctionnement de l'héritage et des prototypes, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">l'héritage et les chaînes de prototypes</a>.</p> + +<p>Le propriété <code>__proto__</code> n'est qu'une propriété accesseur (composée d'une fonction accesseur (<em>getter</em>) et d'une fonction mutateur (<em>setter</em>)) pour {{jsxref("Object.prototype")}}. Si l'accès à <code>__proto__</code> consulte {{jsxref("Object.prototype")}}, on trouvera la propriété. Un accesseur qui ne consulte pas {{jsxref("Object.prototype")}} ne pourra pas trouver le prototype. Si une propriété <code>__proto__</code> est trouvée avant que {{jsxref("Object.prototype")}} ne soit consulté, cette propriété « cachera » {{jsxref("Object.prototype")}}.</p> + +<pre class="brush: js">var aucunProto = Object.create(null); + +console.log(typeof aucunProto.__proto__); // undefined +console.log(Object.getPrototypeOf(aucunProto)); // null + +aucunProto.__proto__ = 17; + +console.log(aucunProto.__proto__); // 17 +console.log(Object.getPrototypeOf(aucunProto)); // null + +var protoCaché = {}; +Object.defineProperty(protoCaché, "__proto__", + { value: 42, writable: true, configurable: true, enumerable: true }); + +console.log(protoCaché.__proto__); // 42 +console.log(Object.getPrototypeOf(protoCaché) === Object.prototype); // true +</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans ce qui suit, on crée un nouvelle instance d'<code>Employé</code> et on teste si <code>__proto__</code> est bien le même objet que le prototype de son constructeur.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Les remarques données plus haut sur les atteintes à la performance restent valables pour ces exemples. Ces exemples permettent uniquement d'illustrer le fonctionnement de <code>__proto__</code>, ils ne font pas office de recommandations.</p> +</div> + +<pre class="brush: js">// On déclare une fonction à utiliser comme constructeur +function Employé() { + /* on initialise l'instance */ +} + +// On crée une nouvelle instance d'Employé +var fred = new Employé(); + +// On teste l'équivalence +fred.__proto__ === Employé.prototype; // true +</pre> + +<p>À cet instant, <code>fred</code> hérite de <code>Employé</code>. On peut toutefois changer ça en assignant un nouvel objet à <code>fred.__proto__</code> :</p> + +<pre class="brush: js">// Assigner un nouvel objet à __proto__ +fred.__proto__ = Object.prototype; +</pre> + +<p><code>fred</code> n'hérite plus de <code>Employé.prototype</code>, mais de <code>Object.prototype</code>. Il perd donc les propriétés héritées de <code>Employé.prototype</code>.</p> + +<p>Cela n'est possible que pour les objets {{jsxref("Object.isExtensible", "extensibles","",1)}}. La propriété <code>__proto__</code> d'un objet non-extensible ne peut pas être changée :</p> + +<pre class="brush: js">var obj = {}; +Object.preventExtensions(obj); + +obj.__proto__ = {}; // renvoie une exception TypeError +</pre> + +<p>On notera que même la propriété <code>__proto__</code> de <code>Object.prototype</code> peut être redéfinie tant que la chaîne de prototypes se termine par <code>null</code> :</p> + +<pre class="brush: js">var b = {}; + +Object.prototype.__proto__ = + Object.create(null, //[[Prototype]] + { salut: { value: function () {console.log('salut');}}}); + +b.salut();</pre> + +<p>Si la propriété <code>__proto__</code> de {{jsxref("Object.prototype")}} ne permet pas d'aboutir à {{jsxref("null")}} via la chaîne de prototypes, on a une chaîne cyclique et on doit avoir une exception {{jsxref("TypeError")}} "cyclic __proto__ value".</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-object.prototype.__proto__', 'Object.prototype.__proto__')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Incluse dans l'annexe (normative) pour le fonctionnalités additionneles d'ECMAScript pour les navigateurs web (note : la spécification codifie ce qui est déjà présent dans les implémentations).</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.proto")}}</p> + +<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2> + +<p>Bien que la spécification ES2015 rende le support de <code>__proto__</code> nécessaire pour les navigateurs web, elle n'est pas obligatoire pour les autres environnements (bien que ce soit conseillé vu le caractère normatif de l'annexe). Si votre code doit être compatible avec un environnement qui n'est pas un navigateur web, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}} à la place.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html new file mode 100644 index 0000000000..29d6a8090b --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html @@ -0,0 +1,175 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Object/prototype +tags: + - JavaScript + - Object + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Object.prototype</strong></code> représente le prototype de {{jsxref("Object")}}.</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Description">Description</h2> + +<p>La quasi-totalité des objets JavaScript descendent de {{jsxref("Object")}} ; un objet classique héritera donc des méthodes et propriétés de <code>Object.prototype</code>. Comme pour toutes les propriétés héritées, il est possible de surcharger ces propriétés. Par exemple, d'autres prototypes de constructeurs surchargent la propriété <code>constructor</code> et fournissent leur propre méthode {{jsxref("Object.prototype.toString()", "toString()")}}.</p> + +<p>Cependant, on peut volontairement créer des objets qui ne descendent pas de {{jsxref("Object")}} (par exemple avec {{jsxref("Object.create", "Object.create(null)")}}) ou les modifier afin que ce ne soit plus le cas (par exemple avec la méthode {{jsxref("Object.setPrototypeOf()")}}).</p> + +<p>Les modifications apportées aux propriétés du prototype d'<code>Object</code> impactent donc tous ces objets via la chaîne de prototypes, sauf si ces propriétés sont surchargées. Ce puissant mécanisme permet ainsi de modifier le comportement des objets ou d'y ajouter des fonctionnalités.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Définit la fonction qui a créé le prototype d'un objet.</dd> + <dt>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>Pointe vers l'objet qui a été utilisé comme prototype lors de l'instanciation de l'objet.</dd> + <dt>{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> + <dd>Permet de définir une fonction qui sera exécutée lors d'une tentative d'accès à une méthode non-définie pour l'objet.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">UTilisée pour renvoyer le nombre de propriétés énumérables sur un objet défini par l'utilisateur. Cette propriété a été retirée.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Utilisée pour faire référence au contexte de l'objet. Cette propriété a été retirée.</s></dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associe une fonction à une propriété qui, lorsqu'on y accède, exécute la fonction et renvoie la valeur de retour.</dd> + <dt>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associe une fonction à une propriété qui, lorsqu'on la définit, exécute la fonction qui modifie la propriété.</dd> + <dt>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Renvoie la fonction associée à la propriété définie par la méthode {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd> + <dt>{{jsxref("Object.prototype.lookupSetter()","Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Renvoie la fonction associée avec la propriété définie par la méthode {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Renvoie un booléen qui indique si l'objet contient la propriété donnée comme une propriété propre (non héritée via la chaîne de prototypes).</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Renvoie un booléen qui indique si l'objet courant fait partie de la chaîne de prototype de l'objet passé en argument.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Renvoie un booléen qui indique si l'<a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">attribut ECMAScript interne [[Enumerable]]</a> est défini.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Renvoie une chaîne de caractères qui est un littéral objet représentant l'objet pour lequel la méthode a été appelée. La valeur de retour peut être utilisée pour créer un nouvel objet.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Appelle la méthode {{jsxref("Object.toString", "toString()")}}.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Renvoie une chaîne de caractères représentant l'objet.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>Supprime un point d'arrêt conditionnel placé sur une propriété de l'objet.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Renvoie la valeur primitive de l'objet.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>Ajoute un point d'arrêt conditionnel sur une propriété de l'objet.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Utilisée pour évaluer une chaîne de caractères étant du code JavaScript dans le contexte de l'objet. Cette méthode a été retirée.</s></dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Javascript se base sur un modèle prototypal et non pas classique (au sens « modèle à base de classes »). Le prototype d'un objet est utilisé pour fournir de façon dynamique des propriétés aux objets qui héritent du prototype.</p> + +<p>Par exemple :</p> + +<pre class="brush: js">var Personne = function(nom) { + this.name = nom; + this.peutParler = true; + this.salutation = function() { + if (this.peutParler) { + console.log('Bonjour, je suis ' + this.nom); + } + }; +}; + +var Employe = function(nom, titre) { + this.nom = nom; + this.titre = titre; + this.salutation = function() { + if (this.peutParler) { + console.log("Bonjour, je suis " + this.nom + ", le " + this.titre); + } + }; +}; +Employe.prototype = new Personne(); + +var Client = function(nom) { + this.nom = nom; +}; +Client.prototype = new Personne(); + +var Mime = function(nom) { + this.nom = nom; + this.peutParler = false; +}; +Mime.prototype = new Personne(); + +var bob = new Employe('Bob', 'bricoleur'); +var joe = new Client('Joe'); +var rg = new Employe('Red Green', 'réparateur'); +var mike = new Client('Mike'); +var mime = new Mime('Mime'); +bob.salutation(); +// Bonjour, je suis Bob, le bricoleur + +joe.salutation(); +// Bonjour, je suis Joe + +rg.salutation(); +// Bonjour, je suis Red Green, le réparateur + +mike.salutation(); +// Bonjour, je suis Mike + +mime.salutation(); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html b/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html new file mode 100644 index 0000000000..3a111936e6 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html @@ -0,0 +1,153 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Reference/Objets_globaux/Object/seal +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.seal()</strong></code> scelle un objet afin d'empêcher l'ajout de nouvelles propriétés, en marquant les propriétés existantes comme non-configurables. Les valeurs des propriétés courantes peuvent toujours être modifiées si elles sont accessibles en écriture.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-seal.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.seal(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>obj</dt> + <dd>L'objet à sceller. Ce peut être n'importe quelle valeur qui n'ait pas <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Types_de_données">un type primitif</a>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet qui est scellé.</p> + +<h2 id="Description">Description</h2> + +<p>Par défaut, les objets sont {{jsxref("Object.isExtensible()", "extensibles", "", 1)}} (ce qui signifie que de nouvelles propriétés peuvent leur être ajoutées). Sceller un objet empêche l'ajout de nouvelles propriétés et marque les propriétés existantes comme non-configurables. Ainsi, l'ensemble de propriétés de l'objet devient fixé et immuable. Le fait de rendre les propriétés non-configurables empêche également de transformer des propriétés de données en accesseurs et vice versa. Cela n'empêche pas de modifier la valeur des propriétés. Toute tentative de suppression ou d'ajout de propriétés à un objet qui est scellé, de conversion d'une propriété de données en accesseurs ou vice versa échouera, soit de manière silencieuse soit en lançant une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Fonctions_et_portee_des_fonctions/Strict_mode","mode strict","",1)}}.</p> + +<p>La chaîne de prototypes reste la même. Cependant, la propriété {{jsxref("Object.proto", "__proto__")}} ( {{deprecated_inline}} ) est scellée également.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var obj = { + prop: function () {}, + toto: "truc" + }; + +// On peut ajouter de nouvelles propriétés +// Les propriétés existantes peuvent être +// changées ou retirées +obj.toto = "machin"; +obj.blop = "blip"; +delete obj.prop; + +var o = Object.seal(obj); + +o === obj; // true +Object.isSealed(obj); // true + +// On peut toujours changer la valeur +// d'une propriété d'un objet scellé +obj.toto = "moh"; + +// Mais on ne peut pas convertir les données +// en accesseurs (ou vice versa) +Object.defineProperty(obj, "toto", { get: function() { return "g"; } }); +// lancera une TypeError + +// Tout autre changement que celui d'une valeur +// ne fonctionnera pas + +obj.coincoin = "mon canard"; +// la propriété n'est pas ajoutée + +delete obj.toto; +// la propriété n'est pas supprimée + +// ...en mode strict, cela lancera des TypeErrors +function échec() { + "use strict"; + delete obj.toto; // lance une TypeError + obj.tutu = "arf"; // lance une TypeError +} +échec(); + +// L'utilisation de la méthode Object.defineProperty ne fonctionnera pas + +Object.defineProperty(obj, "ohai", { value: 17 }); +// lance une TypeError + +Object.defineProperty(obj, "toto", { value: "eit" }); +// modifie une propriété existante</pre> + +<h2 id="Notes">Notes</h2> + +<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire scellé et la méthode renverra cet objet.</p> + +<pre class="brush: js">Object.seal(1); +// TypeError : 1 n'est pas un objet (code ES5) + +Object.seal(1); +// 1 (code ES2015)</pre> + +<h3 id="Comparaison_avec_Object.freeze()">Comparaison avec <code>Object.freeze()</code></h3> + +<p>Lorsqu'on utilise la méthode {{jsxref("Object.freeze()")}}, les propriétés existantes d'un objet gelé deviennent immuables. En revanche, avec <code>Object.seal()</code>, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale.<br> + Implémentée par JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.seal")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html new file mode 100644 index 0000000000..67ec870d90 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html @@ -0,0 +1,210 @@ +--- +title: Object.setPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Object/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p><strong>Attention :</strong> Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le <code>[[Prototype]]</code> d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer <code>Object.setPrototypeOf</code>, mais peuvent concerner n'importe quel code pour n'importe quel objet dont <code>[[Prototype]]</code> a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le <code>[[Prototype]]</code> d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object/create","Object.create()")}}</p> +</div> + +<p>La méthode <code><strong>Object.setPrototypeOf()</strong></code> définit le prototype (autrement dit la propriété interne <code>[[Prototype]]</code>) d'un objet donné avec un autre objet ou {{jsxref("null")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite définir le prototype.</dd> + <dt><code>prototype</code></dt> + <dd>Le nouveau prototype de l'objet (un objet ou <code>null</code>).</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet sur lequel on a défini le prototype.</p> + +<h2 id="Description">Description</h2> + +<p>Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le <code>[[Prototype]]</code> est non-extensible selon {{jsxref("Object.isExtensible")}}. Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}). Dans les autres cas, cette méthode substitue le <code>[[Prototype]]</code> de <code>obj</code> avec un nouvel objet.</p> + +<p><code>Object.setPrototypeOf()</code> fait partie de la spécification ECMAScript 2015. L'utilisation de cette méthode est considérée comme la façon correcte pour modifier le prototype d'un objet (contrairement à la propriété {{jsxref("Object/proto","Object.prototype.__proto__")}} plus controversée).</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var dict = Object.setPrototypeOf({}, null); +</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p>En utilisant la propriété {{jsxref("Object.proto", "Object.prototype.__proto__")}}, on peut définir <code>Object.setPrototypeOf</code> si elle n'est pas disponible :</p> + +<pre class="brush: js">// Cette prothèse ne fonctionne pas pour IE +Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) { + obj.__proto__ = proto; + return obj; +}</pre> + +<h2 id="Ajouter_une_chaîne_de_prototypes_à_un_objet">Ajouter une chaîne de prototypes à un objet</h2> + +<p>En combinant <code>Object.getPrototypeOf()</code> et {{jsxref("Object.proto", "Object.prototype.__proto__")}} on peut ajouter une chaîne de prototypes au nouveau prototype d'un objet :</p> + +<pre class="brush: js">/** +*** Object.setPrototypeOf(@object, @prototype) +* Change le prototype d'une instance +* +**/ + +Object.setPrototypeOf = function (oInstance, oProto) { + oInstance.__proto__ = oProto; + return oInstance; +}; + +/** +*** Object.appendChain(@object, @prototype) +* +* Ajoute le premier prototype non-natif d'une chaîne au nouveau prototype. +* Renvoie @object (si c'est une valeur primitive, elle sera transformée +* en objet). +* +*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body") +*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body") +* +* Ajoute le premier prototype non-natif d'une chaîne à l'objet Function.prototype +* puis ajoute new Function(["@arg"(s)], "@function_body") à cette chaîne. +* Renvoie la fonction. +* +**/ + +Object.appendChain = function (oChain, oProto) { + if (arguments.length < 2) { + throw new TypeError("Object.appendChain - Pas suffisamment d'arguments"); + } + if (typeof oProto !== 'object' && typeof oProto !== 'string') { + throw new TypeError("le deuxième argument de Object.appendChain doit être un objet ou une chaîne"); + } + + var oNewProto = oProto, oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain); + + for (var o1st = this.getPrototypeOf(o2nd); o1st !== Object.prototype && o1st !== Function.prototype; o1st = this.getPrototypeOf(o2nd)) { + o2nd = o1st; + } + + if (oProto.constructor === String) { + oNewProto = Function.prototype; + oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1)); + this.setPrototypeOf(oReturn, oLast); + } + + this.setPrototypeOf(o2nd, oNewProto); + return oReturn; +} +</pre> + +<h3 id="Utilisation">Utilisation</h3> + +<h4 id="Ajouter_une_chaîne_de_prototypes_à_un_prototype">Ajouter une chaîne de prototypes à un prototype</h4> + +<pre class="brush: js">function Mammifère () { + this.isMammifère = "oui"; +} + +function EspèceMammifère (sEspèceMammifère) { + this.espèce = sEspèceMammifère; +} + +EspèceMammifère.prototype = new Mammifère(); +EspèceMammifère.prototype.constructor = EspèceMammifère; + +var oChat = new EspèceMammifère("Felis"); + +console.log(oChat.isMammifère); // "oui" + +function Animal () { + this.respire = "oui"; +} + +Object.appendChain(oChat, new Animal()); + +console.log(oChat.respire); // "oui" +</pre> + +<h4 id="Deuxième_exemple_Transformer_une_valeur_primitive_en_une_instance_de_son_constructeur_et_ajouter_sa_chaîne_à_un_prototype">Deuxième exemple : Transformer une valeur primitive en une instance de son constructeur et ajouter sa chaîne à un prototype</h4> + +<pre class="brush: js">function MySymbol () { + this.isSymbol = "yes"; +} + +var nPrime = 17; + +console.log(typeof nPrime); // "number" + +var oPrime = Object.appendChain(nPrime, new MySymbol()); + +console.log(oPrime); // "17" +console.log(oPrime.isSymbol); // "yes" +console.log(typeof oPrime); // "object" +</pre> + +<h4 id="Troisième_exemple_Ajouter_une_chaîne_de_prototypes_à_l'objet_Function.prototype_object_et_ajouter_une_nouvelle_fonction_à_cette_chaîne">Troisième exemple : Ajouter une chaîne de prototypes à l'objet Function.prototype object et ajouter une nouvelle fonction à cette chaîne</h4> + +<pre class="brush: js">function Personne (sNom) { + this.identité = sNom; +} + +var george = Object.appendChain(new Person("George"), + "console.log(\"Salut !!\");"); + +console.log(george.identité); // "George" +george(); // "Salut !!"</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</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.setPrototypeOf")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Reflect.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object/proto","Object.prototype.__proto__")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html new file mode 100644 index 0000000000..1a8069abcf --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html @@ -0,0 +1,85 @@ +--- +title: Object.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Objets_globaux/Object/toLocaleString +tags: + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.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"><var>obj</var>.toLocaleString()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une chaîne de caractères qui représente l'objet en tenant compte de la locale.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>toLocaleString</code> renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}.</p> + +<p>Cette fonction est destinée à fournir aux objets une méthode générique <code>toLocaleString</code>, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous.</p> + +<h3 id="Objets_surchargeant_la_méthode_toLocaleString">Objets surchargeant la méthode toLocaleString</h3> + +<ul> + <li>{{jsxref("Array")}} : {{jsxref("Array.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number")}} : {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date")}} : {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.toLocaleString")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html new file mode 100644 index 0000000000..b86197d864 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html @@ -0,0 +1,132 @@ +--- +title: Object.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Object/toSource +tags: + - JavaScript + - Méthode + - Non-standard + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>La méthode <strong><code>toSource()</code></strong> renvoie une chaîne de caractères représentant le code source d'un objet.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Object.toSource(); +<var>obj</var>.toSource(); +</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une chaîne de caractères qui représente le code source de l'objet.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p> + +<ul> + <li>Pour l'objet natif {{jsxref("Object")}}, <code>toSource()</code> renvoie la chaîne suivante, qui indique que le code source n'est pas disponible : + + <pre class="brush: js">function Object() { + [native code] +} +</pre> + </li> + <li>Pour les instances de {{jsxref("Object")}}, <code>toSource()</code> renvoie une chaîne représentant le code source.</li> +</ul> + +<p>La méthode <code>toSource()</code> peut être utilisée à des fins de débogage pour analyser le contenu d'un objet.</p> + +<h3 id="Surcharger_la_méthode_toSource()">Surcharger la méthode <code>toSource()</code></h3> + +<p>La méthode <code>toSource()</code> peut être surchargée pour les différents objets. Par exemple :</p> + +<pre class="brush: js">function Personne(nom) { + this.nom = nom; +} + +Personne.prototype.toSource = function Personne_toSource() { + return 'new Personne(' + uneval(this.nom) + ')'; +}; + +console.log(new Personne('Jean').toSource()); // ---> new Personne("Jean") +</pre> + +<h3 id="Les_méthodes_toSource()_natives">Les méthodes <code>toSource()</code> natives</h3> + +<p>Chaque constructeur natif JavaScript possède sa propre méthode <code>toSource()</code>. Ces objets sont :</p> + +<ul> + <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Array")}}.</li> + <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Boolean")}}.</li> + <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Date")}}.</li> + <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Function")}}.</li> + <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Number")}}.</li> + <li>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("RegExp")}}.</li> + <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("String")}}.</li> + <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Symbol")}}.</li> + <li><code>Math.toSource()</code> — Renvoie "Math".</li> +</ul> + +<h3 id="Limites_les_objets_cycliques">Limites : les objets cycliques</h3> + +<p>Dans le cas d'objets qui font référence à eux-mêmes (une liste cyclique ou un arbre), <code>toSource()</code> ne représentera pas la référence (Firefox 24). Par exemple :</p> + +<pre class="brush: js">var obj1 = {}; +var obj2 = { a: obj1 }; +obj1.b = obj2; + +console.log('Cyclique : ' + (obj1.b.a == obj1)); + +var objSource = obj1.toSource(); // renvoie "({b:{a:{}}})" + +obj1 = eval(objSource); + +console.log('Cyclique : ' + (obj1.b.a == obj1)); +</pre> + +<p>Si on utilise une structure cyclique et qu'on a besoin de <code>toSource()</code>, il faudra surcharger la méthode <code>toSource()</code> pour avoir le comportement souhaité.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_toSource()">Utiliser <code>toSource()</code></h3> + +<p>Dans le code qui suit, on définit un objet <code>Chien</code> et on crée <code>monChien</code> qui est une instance de type <code>Chien</code> :</p> + +<pre class="brush: js">function Chien(nom, race, couleur, sexe) { + this.nom = nom; + this.race = race; + this.couleur = couleur; + this.sexe = sexe; +} + +monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle'); +</pre> + +<p>Si on appelle la méthode <code>toSource()</code> sur <code>monChien</code>, on obtiendra le littéral permettant de définir l'objet :</p> + +<pre class="brush: js">monChien.toSource(); +// returns ({nom:"Gabby", race:"Labrador", couleur:"chocolat", sexe:"femelle"}) +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette méthode ne fait partie d'aucun standard, implémentée avec JavaScript 1.3.</p> + +<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.toSource")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html new file mode 100644 index 0000000000..4d25f9b107 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html @@ -0,0 +1,138 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Object/toString +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'objet.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.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"><var>obj</var>.toString()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une chaîne de caractères représentant l'objet.</p> + +<h2 id="Description">Description</h2> + +<p>Chaque object possède une méthode <code>toString()</code> qui est appelée de façon automatique à chaque fois que l'objet doit être représenté sous forme de texte ou à chaque fois qu'on utilise un objet et que la valeur attendue est une chaîne de caractères. Par défaut, chaque objet qui descend d'<code>Object</code> hérite de la méthode <code>toString()</code>. Si cette méthode n'est pas surchargée, <code>toString()</code> renvoie "[object <em>type</em>]", où <code><em>type</em></code> est le type de l'objet. Par exemple :</p> + +<pre class="brush: js">var o = new Object(); +o.toString(); // renvoie [object Object] +</pre> + +<div class="note"> +<p><strong>Note :</strong> À partir de JavaScript 1.8.5 <code>toString()</code>, lorsqu'elle est appelée sur {{jsxref("null")}} renvoie <code>[object <em>Null</em>]</code>, et lorsqu'elle est appelée sur {{jsxref("undefined")}} renvoie <code>[object <em>Undefined</em>]</code>, ce qui est conforme à ECMAScript 5 et aux errata qui ont suivis. Voir l'exemple ci-après <a href="#detect">Utiliser <code>toString</code> pour détecter le type d'un objet</a>.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Surcharger_la_méthode_toString()_par_défaut">Surcharger la méthode <code>toString()</code> par défaut</h3> + +<p>Il est possible de surcharger la méthode <code>toString()</code>. La méthode <code>toString()</code> ne prend pas d'argument et doit renvoyer une chaîne de caractères. La méthode <code>toString()</code> peut renvoyer n'importe quelle valeur mais elle sera plus pertinente si elle renvoie des informations sur l'objet courant.</p> + +<p>Le code qui suit définit un type d'objet <code>Chien</code> et instancie <code>monChien</code>, qui est de type <code>Chien</code> :</p> + +<pre class="brush: js">function Chien(nom, race, couleur, sexe) { + this.nom = nom; + this.race = race; + this.couleur = couleur; + this.sexe = sexe; +} + +monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle'); +</pre> + +<p>Si on appelle la méthode <code>toString()</code> sur cet objet, on aura le résultat suivant (provenant de la méthode originale, héritée d'{{jsxref("Object")}}) :</p> + +<pre class="brush: js">monChien.toString(); // renvoie [object Object] +</pre> + +<p>Dans le code qui suit, on surcharge la méthode <code>toString()</code> avec <code>chienToString()</code>. Cette méthode produit une chaîne qui contient l'ensemble des propriétés (race, couleur, sexe, nom) de l'objet :</p> + +<pre class="brush: js">Chien.prototype.toString = function chienToString() { + var ret = 'Le chien ' + this.nom + ' est un ' + this.race + ' ' + this.sexe + ' ' + this.couleur; + return ret; +} +</pre> + +<p>En utilisant la fonction ci-avant, à chaque fois que <code>monChien</code> sera utilisé là où on attend une chaîne, le moteur JavaScript appellera automatique la fonction <code>chienToString()</code>qui renverra la chaîne suivante :</p> + +<pre class="brush: js">Le chien Gabby est un labrador femelle chocolat. +</pre> + +<h3 id="Utiliser_toString()_pour_détecter_le_type_d'un_objet"><a id="detect" name="detect">Utiliser <code>toString()</code> pour détecter le type d'un objet</a></h3> + +<p><code>toString()</code> peut être utilisée pour tous les objets afin d'obtenir son type. Pour utiliser <code>Object.prototype.toString()</code> avec n'importe quel objet, il sera nécessaire d'appeler {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} (pour éviter les versions surchargées).</p> + +<pre class="brush: js">var toString = Object.prototype.toString; + +toString.call(new Date); // [object Date] +toString.call(new String); // [object String] +toString.call(Math); // [object Math] + +// Depuis JavaScript 1.8.5 +toString.call(undefined); // [object Undefined] +toString.call(null); // [object Null] +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Lorsque la méthode est appelée sur {{jsxref("null")}}, elle renvoie <code>[object <em>Null</em>]</code>, et sur {{jsxref( "undefined")}} elle renvoie <code>[object <em>Undefined</em>]</code></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</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.toString")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/unobserve/index.html b/files/fr/web/javascript/reference/objets_globaux/object/unobserve/index.html new file mode 100644 index 0000000000..88de52a813 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/unobserve/index.html @@ -0,0 +1,103 @@ +--- +title: Object.unobserve() +slug: Web/JavaScript/Reference/Objets_globaux/Object/unobserve +tags: + - JavaScript + - Méthode + - Object + - Obsolete + - Reference +translation_of: Archive/Web/JavaScript/Object.unobserve +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>La méthode <code><strong>Object.unobserve()</strong></code> est utilisée pour retirer des observateurs placés avec {{jsxref("Object.observe()")}}. Cette méthode et l'API à laquelle elle appartient ont été dépréciées et retirées des navigateurs. À la place, il est préférable d'utiliser l'objet {{jsxref("Proxy")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Object.unobserve(<var>obj</var>, <var>callback</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet qu'on souhaite arrêter d'observer.</dd> + <dt><code>callback</code></dt> + <dd>La référence vers l'observateur qu'on souhaite arrêter d'appeler à chaque fois qu'une modification est apportée à <code><strong>obj</strong></code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'objet qui n'est plus observé.</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.unobserve()</code> doit être appelé après {{jsxref("Object.observe()")}} afin de retirer un observateur d'un objet.</p> + +<p>La fonction de rappel (<em>callback</em>) doit être une référence à la fonction et non une fonction anonyme. En effet, c'est cette référence qui sera utilisée pour retirer l'observateur précédemment placé. Appeler <strong>Object.unobserve()</strong> avec une fonction anonyme n'aura aucun effet, cela ne retirera aucun observateur.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Arrêter_l'observation_un_objet">Arrêter l'observation un objet</h3> + +<pre class="brush: js">var obj = { + toto: 0, + truc: 1 +}; + +var observer = function(changements) { + console.log(changements); +} + +Object.observe(obj, observer); + +obj.nouvelleProp = 2; +// [{name: 'nouvelleProp', object: <obj>, type: 'add'}] + +Object.unobserve(obj, observer); + +obj.toto = 1; +// La fonction callback n'a pas été appelée</pre> + +<h3 id="Utiliser_une_fonction_anonyme">Utiliser une fonction anonyme</h3> + +<pre class="brush: js">var personne = { + name : 'Ahmed', + age : 25 +}; + +Object.observe(personne, function (changements) { + console.log(changements); +}); + +personne.age = 40; +// [{name: 'age', object: <obj>, oldValue: 25, type: 'update'}] + +Object.unobserve(personne, function (changements) { + console.log(changements); +}); + +personne.age = 63; +// [{name: 'age', object: <obj>, oldValue: 40, type: 'update'}] +// La fonction callback est toujours appelée +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Proposition de spécification (<em>strawman proposal</em>)</a>.</p> + +<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.unobserve")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.observe()")}}{{obsolete_inline}}</li> + <li>{{jsxref("Array.observe()")}}{{obsolete_inline}}</li> + <li>{{jsxref("Array.unobserve()")}}{{obsolete_inline}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/unwatch/index.html b/files/fr/web/javascript/reference/objets_globaux/object/unwatch/index.html new file mode 100644 index 0000000000..4863156034 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/unwatch/index.html @@ -0,0 +1,70 @@ +--- +title: Object.prototype.unwatch() +slug: Web/JavaScript/Reference/Objets_globaux/Object/unwatch +tags: + - JavaScript + - Méthode + - Non-standard + - Object + - Prototype + - Reference +translation_of: Archive/Web/JavaScript/Object.unwatch +--- +<div>{{JSRef}}{{Non-standard_header}}</div> + +<div class="warning"> +<p><strong>Méthode dépréciée !</strong> Ne pas utiliser <code>unwatch()</code> et {{jsxref("Object.prototype.watch", "watch()")}}. En effet, ces deux méthodes n'étaient implémentées qu'avec Gecko <strong>et ont été retirées à partir de Firefox 58.</strong> De plus, l'ajout de points d'arrêts conditionnels a de graves impacts sur les performances, notamment sur les objets globaux comme <code>window</code>. Il est conseillé d'utiliser les <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">accesseurs et mutateurs</a> ou les proxies.</p> +</div> + +<p>La méthode <code><strong>unwatch()</strong></code> permet de retirer un point d'arrêt conditionnel créé par la méthode {{jsxref("Object.prototype.watch", "watch()")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.unwatch(<var>prop</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Le nom de la propriété dont on ne veut plus suivre l'état.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Le débogueur JavaScript possède plusieurs fonctionnalités, y compris celles offertes par cette fonction. Pour plus d'informations sur cet outil, voir <a href="/fr/docs/Outils/Debugger">le débogueur JavaScript</a>.</p> + +<p>Par défaut, tous les objets qui descendent de {{jsxref("Object")}} héritent de cette méthode.</p> + +<div class="note"> +<p><strong>Note :</strong> <code>unwatch()</code> utilise le nom d'une seule propriété comme paramètre. Ce comportement est expliqué avec la méthode {{jsxref("Object.watch", "watch()")}}.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<p>Voir {{jsxref("Object.watch", "watch()")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette méthode ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.2.</p> + +<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.unwatch")}}</p> +</div> + +<h2 id="Notes_de_compatibilté">Notes de compatibilté</h2> + +<p>Si on appelle <code>unwatch()</code> sur un objet {{domxref("Document")}}, on aura une exception {{jsxref("TypeError")}} à partir de Firefox 23 ({{bug(903332)}}). Cette régression a été corrigée avec Firefox 27.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.watch()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html new file mode 100644 index 0000000000..fea1e23cc0 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html @@ -0,0 +1,120 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Reference/Objets_globaux/Object/valueOf +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive d'un objet donné.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.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"><var>object</var>.valueOf()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La valeur primitive de l'objet appelant.</p> + +<h2 id="Description">Description</h2> + +<p>JavaScript appelle la méthode <code>valueOf</code> pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode <code>valueOf</code> ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive.</p> + +<p>Par défaut, la méthode <code>valueOf</code> est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, <code>valueOf</code> renvoie l'objet lui-même, ce qui sera affiché comme :</p> + +<pre class="brush: js">[object Object] +</pre> + +<p><code>valueOf</code> peut être utilisée afin de convertir un objet prédéfini en une valeur primitive. Si un objet est défini dans un script, il est possible de surcharger <code>Object.prototype.valueOf</code> pour appeler une méthode personnalisée au lieu de la méthode par défaut d'<code>Object</code>.</p> + +<h3 id="Surcharger_valueOf_pour_des_objets_personnalisés">Surcharger <code>valueOf</code> pour des objets personnalisés</h3> + +<p>Il est possible de créer une fonction à appeler à la place de la méthode <code>valueOf</code> par défaut. Celle-ci ne peut pas recevoir de paramètres.</p> + +<p>Supposons qu'on ait un type d'objet <code>monTypeDeNombre</code> et qu'on désire lui ajouter une méthode <code>valueOf</code> spécifique, on pourra utiliser le code suivant :</p> + +<pre class="brush: js">monTypeDeNombre.prototype.valueOf = function(){ return valeurPrimitive;}; +</pre> + +<p>En utilisant ce code, chaque fois qu'un objet de type <code>monTypeDeNombre</code> sera utilisé dans un contexte où il doit être représenté comme une valeur primitive, JavaScript appellera automatiquement la fonction qui y est définie.</p> + +<p>C'est habituellement JavaScript qui invoquera la méthode <code>valueOf</code>, mais il est aussi possible de l'appeler soi-même :</p> + +<pre class="brush: js">monNombre.valueOf() +</pre> + +<div class="note"> +<p><strong>Note :</strong> Les objets à utiliser dans un contexte textuel sont convertis avec la méthode {{jsxref("Object.toString", "toString()")}} ce qui est différent de la conversion d'objets {{jsxref("String")}} en valeurs primitives avec <code>valueOf</code>. Tous les objets peuvent être convertis en chaînes de caractères (la façon la plus générique étant "<code>[object <em>type</em>]</code>"). En revanche, la plupart des objets ne peut pas être convertie en nombre ou booléen par exemple.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_valueOf">Utiliser <code>valueOf</code></h3> + +<pre class="brush: js">function MonTypeDeNombre(n) { + this.nombre = n; +} + +MonTypeDeNombre.prototype.valueOf = function(){ + return this.nombre; +} + +var monObj = new MonTypeDeNombre(4); +console.log(monObj + 3); // 7 car l'opération a implicitement utilisé valueOf</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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.valueOf")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/values/index.html b/files/fr/web/javascript/reference/objets_globaux/object/values/index.html new file mode 100644 index 0000000000..f1630341fa --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/values/index.html @@ -0,0 +1,109 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Objets_globaux/Object/values +tags: + - ECMAScript2016 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Object.values()</strong></code> renvoie un tableau contenant les valeurs des propriétés propres énumérables d'un objet dont l'ordre est le même que celui obtenu avec une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle <code>for-in</code> est différente car elle parcourt également les propriétés héritées).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-values.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.values(<var>obj</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'objet dont on souhaite connaître les valeurs des propriétés propres énumérables.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un tableau dont les éléments sont les valeurs des propriétés énumérables de l'objet passé en argument.</p> + +<h2 id="Description">Description</h2> + +<p><code>Object.values()</code> renvoie un tableau dont les éléments sont les valeurs des propriétés énumérables directement rattachées à l'objet passé en argument. L'ordre du tableau est le même que celui obtenu lorsqu'on parcourt les propriétés manuellement.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var obj = { toto: "truc", machin: 42 }; +console.log(Object.values(obj)); // ['truc', 42] + +// un objet semblable à un tableau +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.values(obj)); // ['a', 'b', 'c'] + +// un objet semblable à un tableau +// dont les clés sont ordonnées aléatoirement +// lorsque des clés numériques sont utilisées, les valeurs sont +// renvoyées selon l'ordre numérique des clés +var un_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.values(un_obj)); // ['b', 'c', 'a'] + +// getToto est une propriété qui +// n'est pas énumérable +var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } }); +mon_obj.toto = "truc"; +console.log(Object.values(mon_obj)); // ['truc'] + +// un argument de type primitif sera +// converti en un objet +console.log(Object.values("toto")); // ['t', 'o', 't', 'o'] +</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p>Afin d'ajouter le support pour <code>Object.values</code> dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> ou sur le dépôt <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a>.</p> + +<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('ESDraft', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ES8')}}</td> + <td>Définition initiale.</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.values")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et rattachement des propriétés</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/objets_globaux/object/watch/index.html b/files/fr/web/javascript/reference/objets_globaux/object/watch/index.html new file mode 100644 index 0000000000..5a99dfe28f --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/watch/index.html @@ -0,0 +1,150 @@ +--- +title: Object.prototype.watch() +slug: Web/JavaScript/Reference/Objets_globaux/Object/watch +tags: + - JavaScript + - Méthode + - Non-standard + - Object + - Prototype + - Reference +translation_of: Archive/Web/JavaScript/Object.watch +--- +<div>{{JSRef}}{{non-standard_header}}</div> + +<div class="warning"> +<p><strong>Méthode dépréciée !</strong> Ne pas utiliser <code>watch()</code> et {{jsxref("Object.prototype.unwatch", "unwatch()")}}. En effet, ces deux méthodes n'ont été implémentées qu'avec Gecko et sont dépréciées. <strong>Elle sont retirées avec à partir de Firefox 58</strong>. De plus, l'ajout de points d'arrêts conditionnels a de graves impacts sur les performances, notamment sur les objets globaux comme <code>window</code>. Il est conseillé d'utiliser les <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">accesseurs et mutateurs</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy">les proxies</a>. Attention également à ne pas confondre {{jsxref("Object.prototype.watch", "Object.watch")}} et {{jsxref("Object.prototype.observe", "Object.observe")}}.</p> +</div> + +<p>La méthode <code><strong>watch()</strong></code> permet d'appeler une fonction lorsqu'une propriété est affectée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>obj</var>.watch(<var>prop</var>, <var>handler</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Le nom d'une propriété d'un objet dont on souhaite surveiller les changements.</dd> + <dt><code>handler</code></dt> + <dd>Une fonction à appeler quand la valeur de la propriété est modifiée.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Cette méthode permet de surveiller les assignations à une propriété appelée <code>prop</code> de l'objet courant, et appelle <code>handler(prop, ancienneValeur, nouvelleValeur)</code> dès que <code>prop</code> est définie et enregistre la valeur de retour dans cette propriété. Un tel point de surveillance peut filtrer (ou rendre null) l'assignation de la valeur, en renvoyant une valeur <code>nouvelleValeur</code> modifiée (ou en renvoyant <code>ancienneValeur</code>).</p> + +<p>Si une propriété pour laquelle un point de surveillance avait été défini, celui-ci ne disparait pas. Si la propriété est recréée par la suite, le point de surveillance sera toujours en activité.</p> + +<p>Pour retirer un point de surveillance, utilisez la méthode {{jsxref("Object.unwatch", "unwatch()")}}/ Par défaut, la méthode <code>watch</code> est héritée par tous les objets descendant d'<code>Object</code>.</p> + +<p>Le débogueur JavaScript a des fonctionnalités similaires à celles fournies par cette méthode, ainsi que d'autres options de débogage. Pour en savoir plus, voir <a href="/fr/docs/Outils/Debugger">le débogueur JavaScript</a>.</p> + +<p>Dans Firefox, <code>handler</code> n'est appelé que pour les assignations par script, pas depuis du code natif. Par exemple, <code>window.watch('location', myHandler)</code> n'appellera pas <code>myHandler</code> si l'utilisateur clique sur un lien vers une cible dans le document courant. Par contre, <code>window.location += '#myAnchor'</code> appellera <code>myHandler</code> :</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_watch_et_unwatch">Utiliser <code>watch</code> et <code>unwatch</code></h3> + +<pre class="brush:js">var o = {p:1}; +o.watch("p", + function (id, oldval, newval) { + console.log("o." + id + " a été modifiée de " + oldval + " en " + newval); + return newval; + }); + +o.p = 2; +o.p = 3; +delete o.p; +o.p = 4; + +o.unwatch('p'); +o.p = 5; +</pre> + +<p>Ce script affiche la sortie suivante :</p> + +<pre class="eval">o.p a été modifiée de 1 en 2 +o.p a été modifiée de 2 en 3 +o.p a été modifiée de undefined en 4 +</pre> + +<h3 id="Utiliser_watch_pour_valider_les_propriétés_d'un_objet">Utiliser <code>watch</code> pour valider les propriétés d'un objet</h3> + +<p>La méthode <code>watch</code> peut être utilisée pour tester les assignations d'une propriété d'objet. Cet exemple s'assure que toute Personne a un nom valide et un age entre 0 et 200.</p> + +<pre class="brush: js">Personne = function(name,age) { + this.watch("age", Personne.prototype._isValidAssignment); + this.watch("nom", Personne.prototype._isValidAssignment); + this.nom = nom; + this.age = age; +} + +Personne.prototype.toString = function() { + return this.nom + ", " + this.age; +}; + +Personne.prototype._isValidAssignment = function(id, oldval, newval) { + if (id == "nom" && (!newval || newval.length > 30)) { + throw new RangeError("nom invalide pour " + this); + } + if (id == "age" && (newval < 0 || newval > 200)) { + throw new RangeError("âge invalide pour " + this); + } + return newval; +} + +will = new Personne("Will", 29); +console.log(will); // Will, 29 + +try { + will.nom = ""; +} catch (e) { + console.log(e); +} + +try { + will.age = -4; +} catch (e) { + console.log(e); +} +</pre> + +<p>Ce script affichera la sortie suivante :</p> + +<pre class="eval">Will, 29 +RangeError: nom invalide pour Will, 29 +RangeError: âge invalide pour Will, 29 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette méthode ne fait partie d'aucune spécification. Elle a été implémentée avec JavaScript 1.2.</p> + +<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.watch")}}</p> +</div> + +<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2> + +<ul> + <li>Cette <a class="external link-https" href="https://gist.github.com/384583">prothèse d'émulation</a> (<em>polyfill</em>) permet d'utiliser <code>watch</code> dans les différents navigateurs compatibles avec ES5</li> + <li>Utiliser un objet {{jsxref("Proxy")}} permet d'avoir accès à plus d'informations, de façon plus profonde sur la manière dont les propriétés sont changées.</li> + <li>Appeler <code>watch()</code> sur un objet {{domxref("Document")}} renvoyait une exception {{jsxref("TypeError")}} depuis Firefox 23 ({{bug(903332)}}). Cette régression a été résolue avec Firefox 27.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.unwatch()")}}</li> + <li>{{jsxref("Object.observe()")}}{{obsolete_inline}}</li> +</ul> |