JavaScript Object.defineProperty()

Definitie en gebruik

Object.defineProperty() Deze methode wordt gebruikt om eigenschappen van objecten toe te voegen of te wijzigen.

Object.defineProperty() Deze methode staat je toe om de metadata van eigenschappen te wijzigen.

Object.defineProperty() Deze methode staat je toe om getter en setter toe te voegen.

Gerelateerde methoden:

Object.defineProperty() Voeg of wijzig eigenschappen toe.

Object.defineProperties() Voeg of wijzig meerdere eigenschappen toe.

Object.getOwnPropertyNames() Geef alle eigenschapsnamen van het object terug.

Object.getOwnPropertyDescriptor() Geef de beschrijver van de eigenschap terug.

Object.getOwnPropertyDescriptors() Geef de beschrijvers van alle eigenschappen van het object terug.

Voorbeeld

Voorbeeld 1

Voeg eigenschap toe:

// Maak een object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Voeg een nieuwe eigenschap toe
Object.defineProperty(person, "year", {value:"2008"});

Probeer het zelf

Voorbeeld 2

Wijzig eigenschap:

// Maak een object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Pas een eigenschap aan
Object.defineProperty(person, "language", {value:"NO"});

Probeer het zelf

Voorbeeld 3

// Maak een object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Pas een eigenschap aan
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: true,
  configurable: true
});
// Enumereer eigenschappen
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
// Toon eigenschap
document.getElementById("demo").innerHTML = txt;

Probeer het zelf

Voorbeeld 4

De volgende voorbeeld is hetzelfde als het vorige voorbeeld, maar de property 'language' is verborgen en niet oplosbaar:

// Maak een object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Pas een eigenschap aan
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: false,
  configurable: true
});
// Enumereer eigenschappen
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Probeer het zelf

Voorbeeld 5

In dit voorbeeld maakt men een setter en getter om ervoor te zorgen dat de waarde van de eigenschap language altijd in hoofdletters is:

// Maak een object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Pas een eigenschap aan
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// Pas language aan
person.language = "en";
// Toon language
document.getElementById("demo").innerHTML = person.language;

Probeer het zelf

Voorbeeld 6

In dit voorbeeld gebruikt men getters om firstName en lastName te combineren:

// Maak een object
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// Definieer een Getter
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Probeer het zelf

Voorbeeld 7

JavaScript's getters en setters zijn zeer geschikt voor het maken van tellers:

// Definieer Setter en 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; }
});

Probeer het zelf

Syntaxis

Object.defineProperty(object, property, descriptor)

parameter

Retourwaarde

Browserondersteuning

Object.defineProperty() Is een kenmerk van ECMAScript5 (ES5).

Sinds juli 2013 ondersteunen alle moderne browsers ES5 (JavaScript 2009) volledig: