Analyse der Object.defineProperty()-Methode in JavaScript

Dieser Artikel stellt Ihnen die Analyse der Object.defineProperty()-Methode in JavaScript vor. Sie hat einen bestimmten Referenzwert.

= und Object.defineProperty

Eigenschaften für JavaScript-Objekte hinzufügen oder ändern. Es gibt zwei verschiedene Möglichkeiten: direkt verwenden = Zuweisung oder verwenden Object.defineProperty (. )Definition . Wie folgt:

// 示例1
var obj = {};

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

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

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

So gesehen scheint es keinen Unterschied zwischen den beiden zu geben, oder? Wenn Sie jedoch Object.getOwnPropertyDescriptor() verwenden, um den Deskriptor (Eigenschaftsdeskriptor) der Eigenschaften von obj.a und obj.b anzuzeigen, werden Sie feststellen, dass = nicht dasselbe ist wie 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}"

Es ist ersichtlich, dass bei Verwendung von = Zuweisung der Attributdeskriptorwert des Attributs geändert werden kann und beschreibbar, aufzählbar und konfigurierbar alle wahr sind.

Der Standardwert der beschreibbaren, aufzählbaren und konfigurierbaren Eigenschaftsdeskriptoren der mit Object.defineProperty() definierten Eigenschaften ist falsch, sie können jedoch alle geändert werden. Was die Bedeutung von beschreibbar, aufzählbar und konfigurierbar angeht, ist es nicht schwer, anhand des Namens zu erraten, der später ausführlich vorgestellt wird.

Die Verwendung der =-Zuweisung entspricht dem Festlegen von beschreibbar, aufzählbar und konfigurierbar auf „True“, wenn die Definition mithilfe von Object.defineProperty() erfolgt. Die Codebeispiele 3 und 4 sind äquivalent:

// 示例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()

Wenn Object.defineProperty() verwendet wird, um nur Werte zu definieren, sind die Standardwerte beschreibbar, aufzählbar und konfigurierbar FALSCH. Die Codebeispiele 5 und 6 sind äquivalent:

// 示例5
var obj = {};

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

Da beschreibbar, aufzählbar und konfigurierbar alle falsch sind, kann das obj.name-Attribut nicht zugewiesen, durchlaufen und gelöscht werden:

// 示例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}

Wenn im strikten Modus ( „use strict“) meldet der Code in Beispiel 7 einen Fehler, der unten zu sehen ist.

beschreibbar

Wenn „beschreibbar“ auf „false“ gesetzt ist, kann die Eigenschaft nicht erneut zugewiesen werden und im strikten Modus wird ein Fehler gemeldet „Zuweisung zur schreibgeschützten Eigenschaft nicht möglich“(Wenn Sie ähnliche Anwendungsfehler in Echtzeit überwachen möchten, können Sie Fundebug gerne kostenlos testen. Wir unterstützen Front-End-Webseiten, WeChat-Miniprogramme, WeChat-Minispiele, Node.js und Java-Fehlerüberwachung! ):

// 示例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"

Wenn „wrritable“ wahr ist, können den Attributen Werte zugewiesen werden. Vielleicht möchten die Leser dies selbst testen.

enumerable

Wenn enumerable falsch ist, können die Attribute nicht durchlaufen werden:

// 示例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>'”

Wenn enumerable wahr ist, können die Leser dies möglicherweise selbst testen .

konfigurierbar

Wenn enumerable false ist, kann die Eigenschaft nicht gelöscht werden und im strikten Modus wird ein Fehler gemeldet „Eigenschaft kann nicht gelöscht werden“:

// 示例9
"use strict"

var obj = {};

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

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

Wenn enumerable wahr ist, können Attribute gelöscht werden. Leser möchten dies möglicherweise selbst testen.

beschreibbar und konfigurierbar

Wenn beschreibbar und aufzählbar gleichzeitig falsch sind, kann die Eigenschaft nicht mit Object.defineProperty() neu definiert werden und im strikten Modus wird ein Fehler gemeldet „Eigenschaft kann nicht neu definiert werden“:

// 示例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>”

Wenn beschreibbar oder aufzählbar wahr ist, kann die Eigenschaft mit Object.defineProperty() neu definiert werden. Leser möchten dies möglicherweise selbst testen.

Alle Codebeispiele in diesem Artikel wurden auf Chrome 67 getestet.

Verwandte Empfehlungen:

Erweiterung von Klassen in js und Analyse objektorientierter Technologie

AngularJS zum Löschen von Seitenvorlagen So verwenden Sie

Das obige ist der detaillierte Inhalt vonAnalyse der Object.defineProperty()-Methode in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!