Explication détaillée des descripteurs d'attributs dans ECMAScript 5_Basic knowledge

Les descripteurs de propriétés sont un nouveau concept dans ES5. Leur fonction est d'ajouter plus de contrôle aux propriétés des objets.

Object.defineProperty

Pour étudier les descripteurs de propriétés, il faut d'abord parler de la méthode Object.defineProperty. Le but de cette méthode est de définir de nouvelles propriétés pour l'objet ou de modifier des propriétés existantes. Son prototype est le suivant :

Copier le code Le code est le suivant :

Object.defineProperty(obj, prop, descriptor)

Exemple d'utilisation :

Copier le code Le code est le suivant :

var obj = { };
Object.defineProperty(obj, 'attr', { valeur : 1 });

Le morceau de code ci-dessus ajoute un attribut nommé attr avec une valeur de 1 à l'objet obj. Équivalent à :

Copier le code Le code est le suivant :

var obj = { };
obj.attr = 1;

En comparaison, la méthode d'écriture de Object.defineProperty semble plus compliquée. Cependant, son plus grand secret réside dans son troisième paramètre.

Descripteur de données

Supposons que nous voulions que attr soit un attribut en lecture seule, nous pouvons ajouter le descripteur de données inscriptible :

Copier le code Le code est le suivant :

var obj = { };
Objet.defineProperty(obj, 'attr', {
Valeur : 1,
inscriptible : faux
});
console.log(obj.attr);
obj.attr = 2; // échoue
console.log(obj.attr);

En exécutant le programme ci-dessus, vous pouvez constater que la valeur de attr imprimée deux fois est 1, ce qui signifie que l'écriture de l'attribut a échoué. Cependant, un tel résultat serait un peu déroutant, car l'instruction d'affectation n'a pas pu s'exécuter sans exception. Imaginez que si un tel problème se produisait dans un gros morceau de code, il serait difficile à résoudre. En fait, le simple fait d'exécuter le code en mode strict produira une exception :

Copier le code Le code est le suivant :

'use strict'; // Entrer en mode strict
var obj = { };
Objet.defineProperty(obj, 'attr', {
Valeur : 1,
inscriptible : faux
});
obj.attr = 2; // lancer une exception

Jetons un coup d'œil à un autre descripteur de données énumérable, qui peut contrôler si la propriété peut être énumérée. Si vous définissez simplement un attribut, cet attribut peut être énuméré dans une boucle for...in :

Copier le code Le code est le suivant :

var obj = { };
obj.attr = 1;
for (var i in obj) { console.log(obj[i]); énumérable peut le "cacher" :
var obj = { };

Objet.defineProperty(obj, 'attr', {
Valeur : 1,
énumérable : faux
});
for (var i in obj) { console.log(obj[i]);

Lorsque vous exécutez le code ci-dessus, vous constaterez que la console ne génère rien car l'attribut attr ne peut pas être énuméré pour le moment.

À ce stade, vous avez peut-être une question, le descripteur d'attribut peut-il être modifié ? Par exemple, une propriété en lecture seule peut-elle être à nouveau définie comme étant accessible en écriture ? En fait, cela dépend d'un autre descripteur de données configurable, qui contrôle si le descripteur de propriété peut être modifié.

Copier le code Le code est le suivant :

var obj = { };

Objet.defineProperty(obj, 'attr', {
Valeur : 1,
inscriptible : faux,
configurable : vrai
});
Objet.defineProperty(obj, 'attr', {
inscriptible : vrai
});
obj.attr = 2;


Le code ci-dessus définit d'abord attr comme attribut en lecture seule, puis le redéfinit comme étant accessible en écriture. L’écriture dans attr est donc réussie.

Descripteur d'accès

Les descripteurs d'accès sont similaires aux accesseurs get/set en mode orienté objet.

Copier le code Le code est le suivant :

var obj = { };
Objet.defineProperty(obj, 'attr', {
set: function(val) { this._attr = Math.max(0, val },
Obtenez : function() { return this._attr }
});
obj.attr = -1;
console.log(obj.attr); // 0

Dans le morceau de code ci-dessus, l'accès à attr devient en fait un accès à _attr, et la valeur minimale est limitée à 0 dans la fonction set.

Obtenir le descripteur d'attribut

Ce qui précède concerne uniquement la définition des descripteurs d'attributs, alors comment obtenir les descripteurs définis ? Object.getOwnPropertyDescriptor fait le travail.

Copier le code Le code est le suivant :

var obj = { };
Objet.defineProperty(obj, 'attr', {
Valeur : 1,
inscriptible : faux,
configurable : vrai
});
var desc = Object.getOwnPropertyDescriptor(obj, 'attr');
console.dir(desc);

Contrôle des objets

L'Object.defineProperty mentionné précédemment opère sur les propriétés de l'objet, tandis que les trois méthodes mentionnées ci-dessous opèrent directement sur l'objet.

Object.preventExtensions peut empêcher les objets d'avoir de nouvelles propriétés :

Copier le code Le code est le suivant :

var obj = { };
obj.attr = 1;
Objet.preventExtensions(obj);
obj.attr2 = 2; //échec

Object.seal peut faire en sorte que l'objet n'ait que des valeurs d'attribut qui peuvent être modifiées (si l'attribut est en lecture seule, même les valeurs d'attribut ne peuvent pas être modifiées) :

Copier le code Le code est le suivant :

var obj = { };
obj.attr = 1;
Objet.seal(obj);
obj.attr = 1.5;
supprimer obj.attr; // échouer

Object.freeze peut rendre l'objet totalement non modifiable :

Copier le code Le code est le suivant :

var obj = { };
obj.attr = 1;
Objet.freeze(obj);
obj.attr = 1.5; // échoue
obj.attr2 = 2; //échec

Ensuite, vous vous demanderez peut-être comment savoir si un objet a été empêché d'extensions, scellé ou gelé ? La réponse est d'appeler respectivement Object.isExtensible, Object.isSealed et Object.isFrozen. L'utilisation de ces trois fonctions est relativement simple et n'est plus lourde.

En général, les objets peuvent être contrôlés plus strictement via des descripteurs d'attributs et la rigueur de la logique du programme peut être renforcée. Le seul inconvénient est que ES5 n'est que fondamentalement implémenté dans IE9 (IE9 ne prend pas encore en charge le mode strict étant donné qu'il est domestique). IE8 Bien que la part soit encore relativement élevée, cet ensemble d'éléments ne peut actuellement être utilisé que dans les navigateurs mobiles et Node.js.