JavaScript Object.defineProperty()

Definition und Verwendung

Object.defineProperty() Die Methode wird verwendet, um Eigenschaften eines Objekts hinzuzufügen oder zu ändern.

Object.defineProperty() Die Methode ermöglicht es Ihnen, die Metadaten der Eigenschaft zu ändern.

Object.defineProperty() Die Methode ermöglicht es Ihnen, Getter und Setter hinzuzufügen.

Verwandte Methoden:

Object.defineProperty() Fügen Sie oder ändern Sie Eigenschaften.

Object.defineProperties() Fügen Sie oder ändern Sie mehrere Eigenschaften.

Object.getOwnPropertyNames() Gibt alle Eigenschaftsnamen des Objekts zurück.

Object.getOwnPropertyDescriptor() Gibt die Beschreibung der Property zurück.

Object.getOwnPropertyDescriptors() Gibt die Beschreibungen aller Eigenschaften des Objekts zurück.

Beispiel

Beispiel 1

Fügen Sie eine Property hinzu:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Fügen Sie eine neue Property hinzu
Object.defineProperty(person, "year", {value:"2008"});

Selbst ausprobieren

Beispiel 2

Ändern Sie die Property:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// 修改一个属性
Object.defineProperty(person, "language", {value:"NO"});

Selbst ausprobieren

Beispiel 3

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 修改一个属性
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: true,
  configurable: true
});
// 枚举属性
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
// Anzeigeproperty
document.getElementById("demo").innerHTML = txt;

Selbst ausprobieren

Beispiel 4

Der nächste Beispiel ist identisch mit dem vorherigen Beispielcode, aber die property 'language' ist versteckt und nicht auflösbar:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 修改一个属性
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: false,
  configurable: true
});
// 枚举属性
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Selbst ausprobieren

例子 5

此例创建了一个 setter 和 getter,以确保 language 属性的更新为大写:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 修改一个属性
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// 修改 language
person.language = "en";
// 显示 language
document.getElementById("demo").innerHTML = person.language;

Selbst ausprobieren

例子 6

此例使用 getter 将 firstName 和 lastName 连接起来:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// 定义一个 Getter
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Selbst ausprobieren

例子 7

JavaScript 的 Getter 和 Setter 非常适合创建计数器:

// 定义 Setter 和 Getter
Object.defineProperty(obj, "reset", {
  get: function () { this.counter = 0; }
});
Object.defineProperty(obj, "increment", {
  get: function () { this.counter++; }
});
Object.defineProperty(obj, "decrement", {
  get: function () { this.counter--; }
});
Object.defineProperty(obj, "add", {
  set: function (value) { this.counter += value; }
});
Object.defineProperty(obj, "subtract", {
  set: function (value) { this.counter -= value; }
});

Selbst ausprobieren

Syntax

Object.defineProperty(object, property, beschreibung)

Parameter

Parameter Beschreibung
object Erforderlich. Zielobjekt.
property Erforderlich. Eigenschaftsname.
beschreibung

Erforderlich. Der zu fügen oder zu ändernde Eigenschaftsbeschreibung:

  • value: value
  • writable : true|false
  • enumerable : true|false
  • configurable : true|false
  • get : function
  • set : function

Rückgabewert

Typ Beschreibung
Object Geänderter Objekt.

Browser-Unterstützung

Object.defineProperty() Es handelt sich um Eigenschaften von ECMAScript5 (ES5).

Seit Juli 2013 unterstützen alle modernen Browser ES5 (JavaScript 2009) vollständig:

Chrome Edge Firefox Safari Opera
Chrome 23 IE/Edge 11 Firefox 21 Safari 6 Opera 15
September 2012 September 2012 April 2013 Juli 2012 Juli 2013