JavaScript Object.defineProperty()

Определение и использование

Object.defineProperty() Метод используется для добавления или изменения свойств объекта.

Object.defineProperty() Метод позволяет изменить метаданные свойств.

Object.defineProperty() Метод позволяет добавить getter и setter.

Связанные методы:

Object.defineProperty() Добавить или изменить свойства.

Object.defineProperties() Добавить или изменить несколько свойств.

Object.getOwnPropertyNames() Возвращает все имена свойств объекта.

Object.getOwnPropertyDescriptor() Возвращает описание свойств.

Object.getOwnPropertyDescriptors() Возвращает описание всех свойств объекта.

Пример

Пример 1

Добавить свойства:

// Создание объекта
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Добавить новый свойство
Object.defineProperty(person, "year", {value:"2008"});

Попробуйте сами

Пример 2

Изменить свойства:

// Создание объекта
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Изменение свойства
Object.defineProperty(person, "language", {value:"NO"});

Попробуйте сами

Пример 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>";
}
// Показывать свойства
document.getElementById("demo").innerHTML = txt;

Попробуйте сами

Пример 4

Следующий пример аналогичен предыдущему, но свойство language скрыто и не является перечисляемым:

// Создание объекта
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

Этот пример использует GETтер для соединения firstName и lastName:

// Создание объекта
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// Определение GETтера
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Попробуйте сами

Пример 7

GETтеры и SETтеры JavaScript очень подходят для создания счетчиков:

// Определение Сеттера и Геттера
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 Обязателен. Целевой объект.
property Обязателен. Название атрибута.
descriptor

Обязателен. Атрибут описания, который нужно добавить или изменить:

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

Возвратное значение

Тип Описание
Object Измененный объект.

Поддержка браузерами

Object.defineProperty() Это функция ECMAScript5 (ES5).

С июля 2013 года все современные браузеры полностью поддерживают ES5 (JavaScript 2009):

Chrome Edge Firefox Safari Opera
Chrome 23 IE/Edge 11 Firefox 21 Safari 6 Opera 15
Сентябрь 2012 года Сентябрь 2012 года Апрель 2013 года Июль 2012 года Июль 2013 года