Analyse de la méthode Object.defineProperty() en JavaScript

Cet article vous présente l'analyse de la méthode Object.defineProperty() en JavaScript. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

= et Object.defineProperty

ajoutent ou modifient des propriétés pour les objets JavaScript. Il existe deux manières différentes : utiliser directement = assignation ou utiliser Object.defineProperty (. )Définition . Comme suit :

// 示例1
var obj = {};

// 直接使用=赋值
obj.a = 1;

// 使用Object.defineProperty定义
Object.defineProperty(obj, "b",
{
    value: 2
});

console.log(obj) // 打印"{a: 1, b: 2}"

En regardant les choses de cette façon, il ne semble y avoir aucune différence entre les deux, n'est-ce pas ? Cependant, si vous utilisez Object.getOwnPropertyDescriptor() pour afficher le descripteur (descripteur de propriété) des propriétés de obj.a et obj.b, vous constaterez que = n'est pas la même chose que Object.defineProperty :

// 示例2
var obj = {};

obj.a = 1;

Object.defineProperty(obj, "b",
{
    value: 2
});

console.log(Object.getOwnPropertyDescriptor(obj, "a")); // 打印"{value: 1, writable: true, enumerable: true, configurable: true}"
console.log(Object.getOwnPropertyDescriptor(obj, "b")); // 打印"{value: 2, writable: false, enumerable: false, configurable: false}"

On peut voir que lors de l'utilisation de l'affectation =, la valeur du descripteur d'attribut de l'attribut peut être modifiée, et les valeurs inscriptibles, énumérables et configurables sont toutes vraies.

La valeur par défaut des descripteurs de propriétés inscriptibles, énumérables et configurables des propriétés définies à l'aide de Object.defineProperty() est fausse, mais ils peuvent tous être modifiés. Quant à la signification de inscriptible, énumérable et configurable, il n'est pas difficile de la deviner à partir du nom, qui sera présenté en détail plus tard.

Utiliser = assignation équivaut à définir writable, énumérable et configurable sur true lors de la définition à l'aide de Object.defineProperty(). Les exemples de code 3 et 4 sont équivalents :

// 示例3
var obj = {};

obj.name = "Fundebug";
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}

// 示例4
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: true,
    configurable: true
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}

Object.defineProperty()

Lorsqu'il est défini à l'aide de Object.defineProperty(), si seule la valeur est définie, alors accessible en écriture, énumérable et la valeur par défaut configurable est false. Les exemples de code 5 et 6 sont équivalents :

// 示例5
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug"
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}

// 示例6
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: false,
    enumerable: false,
    configurable: false
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}

Étant donné que les paramètres inscriptibles, énumérables et configurables sont tous faux, l'attribut obj.name ne peut pas être attribué, parcouru ou supprimé :

// 示例7
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug"
});

// writable为false，无法赋值
obj.name = "云麒";
console.log(obj.name); // 打印"Fundebug"

// enumerable为false，无法遍历
console.log(Object.keys(obj)); // 打印"[]"

// configurable为false，无法删除
delete obj.name;
console.log(obj.name); // 打印"Fundebug"

En mode strict ("use strict"), le code de l'exemple 7 signalera une erreur, visible ci-dessous.

writable

Lorsque writable est faux, la propriété ne peut pas être à nouveau attribuée et une erreur sera signalée en mode strict "Impossible d'attribuer une propriété en lecture seule"(Si vous souhaitez surveiller en temps réel des erreurs d'application similaires, vous êtes invités à essayer Fundebug gratuitement. Nous prenons en charge les pages Web frontales, les mini-programmes WeChat, les mini-jeux WeChat, la surveillance des erreurs Node.js et Java ! ) :

// 示例8
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: false,
    enumerable: true,
    configurable: true
});

obj.name = "云麒"; // 报错“Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'”

writable est vrai Lorsque , les attributs peuvent se voir attribuer des valeurs, les lecteurs souhaiteront peut-être tester cela par eux-mêmes.

enumerable

Lorsque enumerable est faux, les attributs ne peuvent pas être parcourus :

// 示例9
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: false,
    configurable: true
});

console.log(Object.keys(obj)) // 打印"[]"

Lorsque enumerable est vrai, les attributs peuvent être parcourus. Les lecteurs souhaiteront peut-être tester cela. par eux-mêmes.

configurable

Lorsque enumerable est faux, la propriété ne peut pas être supprimée, et une erreur sera signalée en mode strict "Impossible de supprimer la propriété"  :

// 示例10
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: true,
    configurable: false
});

delete obj.name // 报错“Uncaught TypeError: Cannot delete property 'name' of #<Object>”

enumerable est Lorsqu'il est vrai, l'attribut peut être supprimé. Les lecteurs souhaiteront peut-être le tester par eux-mêmes.

inscriptible et configurable

Lorsque writable et enumerable sont faux en même temps, la propriété ne peut pas être redéfinie à l'aide de Object.defineProperty(), et une erreur sera signalée en mode strict "Impossible de redéfinir la propriété" :

// 示例11
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: false,
    configurable: false
})

Object.defineProperty(obj, "name",
{
    value: "云麒"
}) // 报错“Uncaught TypeError: Cannot redefine property: name”

Lorsque writable ou enumerable est vrai, la propriété peut être redéfinie à l'aide de Object.defineProperty(). Les lecteurs souhaiteront peut-être tester cela par eux-mêmes.

Tous les exemples de code de cet article ont été testés sur Chrome 67.

Recommandations associées :

Extension des classes en js et analyse de la technologie orientée objet

angularjs à propos du nettoyage des modèles de page Comment utiliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!