JavaScript Object.defineProperty()

Definition and usage

Object.defineProperty() Method is used to add or modify properties of the object.

Object.defineProperty() Method allows you to change the metadata of the property.

Object.defineProperty() Method allows you to add getter and setter.

Related methods:

Object.defineProperty() Add or modify properties.

Object.defineProperties() Add or modify multiple properties.

Object.getOwnPropertyNames() Returns all property names of the object.

Object.getOwnPropertyDescriptor() Returns the descriptor of the property.

Object.getOwnPropertyDescriptors() Returns the descriptors of all properties of the object.

Instance

Example 1

Add attribute:

// Δημιουργία ενός αντικειμένου
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Add a new attribute
Object.defineProperty(person, "year", {value:"2008"});

Δοκιμάστε το Εξ ορισμού

Example 2

Modify attribute:

// Δημιουργία ενός αντικειμένου
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Αλλαγή μιας ιδιότητας
Object.defineProperty(person, "language", {value:"NO"});

Δοκιμάστε το Εξ ορισμού

Example 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>";
}
// Display attribute
document.getElementById("demo").innerHTML = txt;

Δοκιμάστε το Εξ ορισμού

Example 4

The next example is the same as the previous example code, but the language attribute is hidden, making it non-enumerable:

// Δημιουργία ενός αντικειμένου
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;

Δοκιμάστε το Εξ ορισμού

Παράδειγμα 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;

Δοκιμάστε το Εξ ορισμού

Παράδειγμα 6

Σε αυτό το παράδειγμα χρησιμοποιείται ο getter για να συνδυαστεί το firstName και το lastName:

// Δημιουργία ενός αντικειμένου
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// Ορισμός ενός Getter
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Δοκιμάστε το Εξ ορισμού

Παράδειγμα 7

Οι Getter και Setter του JavaScript είναι πολύ κατάλληλοι για τη δημιουργία μετρητών:

// Ορισμός 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; }
});

Δοκιμάστε το Εξ ορισμού

Γλώσσα

Object.defineProperty(object, property, descriptor)

παράμετροι

Αποτελεσματικότητα

Υποστήριξη Πλοηγού

Object.defineProperty() Είναι χαρακτηριστικά του ECMAScript5 (ES5).

Από τον Ιούλιο του 2013, όλες οι σύγχρονες πλοηγούς υποστηρίζουν πλήρως το ES5 (JavaScript 2009):