JavaScript Object.defineProperty()

Definicja i użycie

Object.defineProperty() Metoda jest używana do dodania lub modyfikacji atrybutów obiektu.

Object.defineProperty() Metoda pozwala na zmianę metadanych atrybutu.

Object.defineProperty() Metoda pozwala na dodanie gettera i settera.

Związane metody：

Object.defineProperty() Dodaj lub zmodyfikuj atrybut.

Object.defineProperties() Dodaj lub zmodyfikuj wiele atrybutów.

Object.getOwnPropertyNames() Zwraca wszystkie nazwy atrybutów obiektu.

Object.getOwnPropertyDescriptor() Zwraca opis atrybutu.

Object.getOwnPropertyDescriptors() Zwraca opis wszystkich atrybutów obiektu.

Instancja

Przykład 1

Dodaj atrybut：

// Tworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Dodaj nowy atrybut
Object.defineProperty(person, "year", {value:"2008"});

Spróbuj sam

Przykład 2

Modyfikacja atrybutu：

// Tworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Modyfikacja atrybutu
Object.defineProperty(person, "language", {value:"NO"});

Spróbuj sam

Przykład 3

// Tworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modyfikacja atrybutu
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: true,
  configurable: true
});
// Enumerowanie atrybutów
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
// Wyświetl atrybut
document.getElementById("demo").innerHTML = txt;

Spróbuj sam

Przykład 4

Następny przykład jest taki sam jak poprzedni, ale ukrył atrybut language, aby był nie枚举：

// Tworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modyfikacja atrybutu
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: false,
  configurable: true
});
// Enumerowanie atrybutów
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Spróbuj sam

Przykład 5

W tym przykładzie utworzono setter i getter, aby zapewnić, że atrybut language jest aktualizowany do wielkiej litery:

// Tworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modyfikacja atrybutu
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// Modyfikacja language
person.language = "en";
// Wyświetlanie language
document.getElementById("demo").innerHTML = person.language;

Spróbuj sam

Przykład 6

W tym przykładzie używamy gettera do połączenia firstName i lastName:

// Tworzenie obiektu
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// Definiowanie Gettera
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Spróbuj sam

Przykład 7

Getter i Setter w JavaScript są bardzo odpowiednie do tworzenia liczników:

// Definiowanie Settera i Gettera
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; }
});

Spróbuj sam

Gramatyka

Object.defineProperty(object, property, descriptor)

parametry

Zwracana wartość

Wsparcie przeglądarek

Object.defineProperty() To cechy ECMAScript5 (ES5).

Od lipca 2013 roku wszystkie nowoczesne przeglądarki obsługują w pełni ES5 (JavaScript 2009):